Reader support

Image descriptions

Surface long image descriptions and swap localized image variants when a reader changes language.

Long image descriptions use the same text map as the rest of the page. For an image node, use the texts.json entry for its data-id, then fall back to the page’s own description, alt, or figcaption.

The natural presentation is an image lightbox or zoom view, where readers have space to read a longer description. Show it only when features.describeImages is true.

Localized image variants

images.json maps an image id to a replacement asset when the image itself contains translated content, such as a labelled diagram. On language change, replace the src of the corresponding image nodes.

The map is optional. features.describeImages can be true when the export has descriptions but no translated image asset, so leave the original src in place whenever the map or its id is absent.

Variants exist for target languages, never the source one, so the map lives under each translated locale:

Verified export excerptWebPub Β· content/i18n/pt-BR/images.json
{
  "pg001_im001": "pg001_im001_tr_pt-BR.png",
  "pg002_im002": "pg002_im002_tr_pt-BR.png",
  "pg003_im002": "pg003_im002_tr_pt-BR.png",
  "pg004_im002": "pg004_im002_tr_pt-BR.png",
  "pg005_im002": "pg005_im002_tr_pt-BR.png",
  "pg006_im002": "pg006_im002_tr_pt-BR.png"
}

The key is the data-id on the <img>; the value is a file sitting beside the original in images/. Switching to pt-BR means swapping src on exactly those six images and leaving every other image untouched.

Image-description feature configurationWebPub Β· assets/config.json
{
  "title": "Hyena and Raven",
  "bundleVersion": "1",
  "languages": {
    "available": [
      "en-US",
      "pt-BR"
    ],
    "default": "en-US"
  },
  "features": {
    "signLanguage": true,
    "easyRead": true,
    "glossary": true,
    "eli5": false,
    "readAloud": true,
    "autoplay": true,
    "showTutorial": false,
    "showNavigationControls": false,
    "describeImages": true,
    "notepad": false,
    "state": true,
    "characterDisplay": false,
    "highlight": false,
    "activities": true
  },
  "analytics": {
    "enabled": false,
    "siteId": 0,
    "trackerUrl": "https://unisitetracker.unicef.io/matomo.php",
    "srcUrl": "https://unisitetracker.unicef.io/matomo.js"
  },
  "lockedSettings": [
    "dockLayout",
    "theme",
    "iconSize",
    "reduceMotion"
  ]
}

An empty map is valid

Most books need no translated images at all, and ship {}. Leave the original source in place whenever the map, or an image's id within it, is absent.

On this page