Slides structure

Use the structure.json file to define the slides of the social media post. This file includes the slides object where each slide is an object defined by its ID.

The order of the slides in the slides object is the order of the slides in the social media post.

// ./structure.json

{
  "slides": {
    "instagram_facebook_post_1": {
      "name": "Instagram/Facebook post (1:1)",
      "size": {
        "width": 1080,
        "height": 1080
      },
      "nameOriginal": "Instagram/Facebook post (1:1)",
      "thumbnail": "slides/instagram_facebook_post_1/media/images/thumb.jpg",
      "template": "slides/instagram_facebook_post_1/index.vue"
    },
    "instagram_facebook_post_1_video": {
      "name": "Instagram/Facebook post video (1:1)",
      "kind": "video",
      "size": {
        "width": 1080,
        "height": 1080
      },
      "nameOriginal": "Instagram/Facebook post video (1:1)",
      "thumbnail": "slides/instagram_facebook_post_1_video/media/images/thumb.jpg",
      "template": "slides/instagram_facebook_post_1_video/index.vue"
    }
  }
}

Each slide object includes the following fields:

Field	Type	Description
name*	String	The slide name displayed in eWizard Editor.
size*	Object	The slide size.
size.width*	Number	The slide width in pixels.
size.height*	Number	The slide height in pixels.
kind	String	The slide type: standard for a regular slide or video for a video slide. The default value is standard.
template	String	The path to the slide Vue component. If the path isn't defined, eWizard.js determines the path based on the slide ID in the slides directory. For example, slides/instagram_facebook_post_1/index.vue.
thumbnail	String	The path to the slide thumbnail. If the path isn't defined, eWizard.js determines the path based on the slide ID and the path.slide.thumbnail field of the system settings. For example, slides/instagram_facebook_post_1/media/images/thumb.jpg.
nameOriginal	String	The slide name in the original language. For more information, see Localization.

The fields marked with asterisks (*) are required.

eWizard.js converts the structure.json file of the social media post into an e-Detailer structure with a single chapter. As a result, you can use the same navigation as in e-Detailers.

Slide component

Wrap the slide markup in the wiz-slide component. The component sets the slide width and height from the size field in structure.json.

<!-- ./slides/linkedIn_post_1/index.vue -->

<template>
  <wiz-slide class="linkedIn-post-1">
    <wiz-image
      class="pa block-image"
      src="./media/images/image.jpg"
      alt="An image"
    ></wiz-image>
  </wiz-slide>
</template>

Use the alt attribute of the wiz-slide component to add the alternative text to the slide. For more information, see Alternative text.

Video slides

A video slide is a slide with one full-size video. To create a video slide:

1. Set the kind field of the slide to video in structure.json.

   // ./structure.json
   
   {
     "slides": {
       "instagram_facebook_post_1_video": {
         "name": "Instagram/Facebook post video (1:1)",
         "kind": "video",
         "size": {
           "width": 1080,
           "height": 1080
         }
       }
     }
   }

2. Add the wiz-video component to the slide.

   <!-- ./slides/instagram_facebook_post_1_video/index.vue -->
   
   <template>
     <wiz-slide class="instagram-facebook-post-1-video">
       <wiz-video
         class="pa full-slide-video"
         src="./media/videos/video.mp4"
         poster="./media/images/poster.jpg"
         :autoplay="true"
         :loop="true"
         :muted="true"
         :playsinline="true"
         :controls="false"
         component-name="Full slide video"
       ></wiz-video>
     </wiz-slide>
   </template>

   The poster image is displayed before the video starts.

When you export the post, eWizard adds the video file and its poster to the archive instead of the slide screenshot.

Plugin

You can access the slides and their settings using the structure plugin. The social media post structure plugin additionally includes the getSlideDimensions method. Use this method to get the size and aspect ratio of the slide by its ID.

this.$structure.getSlideDimensions('instagram_facebook_post_1');

The method returns an object with the following fields:

{
  width: 1080,
  height: 1080,
  aspectRatio: '1:1',
}