Skip to content

Slide templates ​

Slide templates are the ready-made slides that you can add to your social media post in eWizard Editor. For example, a template of an Instagram story or a LinkedIn post. Each template has its own size, so you can add slides of different sizes to the same post.

If the post has no slides, eWizard Editor displays the slide templates.

To add a slide template:

  1. Create a subdirectory with the template ID in the templates directory. For example, instagram_facebook_story.

  2. Add the index.vue file with the template markup to the subdirectory. Wrap the markup in the wiz-slide component the same way as on the slides.

  3. Add the template thumbnail to the media/images/thumb.jpg file in the subdirectory. The thumbnail is displayed in eWizard Editor.

    .
    └─templates/
      ├─common/
      └─instagram_facebook_story/
        ├─media/
        |  └─images/
        |    └─thumb.jpg
        └─index.vue

    eWizard.js collects the templates only from the first-level subdirectories of the templates directory. Use the templates/common/ directory to store the resources shared between the templates, such as blocks, components, styles, and media.

  4. Add the template name and size to the templates.json file in the project root directory.

    json
    // ./templates.json
    
    {
      "templates": {
        "instagram_facebook_story": {
          "name": "Instagram/Facebook story (9:16)",
          "size": { "width": 1080, "height": 1920 }
        },
        "instagram_facebook_story_video": {
          "name": "Instagram/Facebook story video (9:16)",
          "kind": "video",
          "size": { "width": 1080, "height": 1920 }
        }
      }
    }

    The template object in templates.json has the same fields as the slide object in structure.json. If the template name isn't defined, eWizard Editor displays the template ID.

The following table lists the slide sizes that the social networks recommend for the most common post types:

Post typeAspect ratioSize in pixels
Instagram/Facebook post1:11080×1080
Instagram/Facebook post4:51080×1350
Instagram/Facebook story or reel9:161080×1920
LinkedIn post1:11080×1080
LinkedIn post4:51080×1350
LinkedIn post1.91:11200×627
LinkedIn post9:161080×1920
TikTok feed video9:161080×1920