Caption and alternative text

Besides the slides, a social media post includes the following text:

• Caption: the text published together with the post.

• Alternative text: the description of the slide image for screen readers.

You can add the caption and alternative text in eWizard Editor or in the project code. When you export the post, eWizard adds this text to separate documents.

Caption

eWizard.js stores the post caption in the common/i18n/caption.json file. The file contains the caption text for each language of the post.

// ./common/i18n/caption.json

{
  "eng": {
    "text": "Discover the new treatment option<sup refs=\"ref_1\"></sup> 💊"
  }
}

The caption is plain text. It can contain emoji and references. To add a reference, wrap the reference key in the <sup refs=""></sup> tag the same way as on the slides.

The <sup refs=""></sup> tag is the only HTML markup supported in the caption.

The caption is displayed in the language set in the localization.current field of the settings.json file. If the caption isn't available in this language, eWizard.js uses the fallback language.

To change the default path to the caption file, edit the path.common.caption field in the .ewizard/settings.json file.

Alternative text

Add the alternative text to the slide with the alt attribute of the wiz-slide component.

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

<template>
  <wiz-slide
    class="instagram-facebook-post-1"
    alt="Doctor talking to a patient in the clinic"
  >
    <!-- slide content -->
  </wiz-slide>
</template>

Add the alternative text to the regular slides. For video slides, the alternative text isn't exported.

References

The social media post uses one list of references for all slides and the caption. The references are stored in the common/resources/references.json file.

// ./common/resources/references.json

{
  "ref_1": {
    "name": "<p>First reference</p>"
  },
  "ref_2": {
    "name": "<p>Second reference</p>"
  },
  "ref_3": {
    "name": "<p>Third reference</p>"
  }
}

The reference number is the position of the reference in references.json. This means that the same reference has the same number on all slides and in the caption. For example, ref_3 is the third reference in the file, so it's displayed as ³ both on the slide and in the caption.

For more information, see References.