This article shows you how to add and translate static images on a page without the need for FORGE Back Office.
Topics covered here:
When are static images available?
As a headless CMS (Content Management System), FORGE delivers the site structure to the built-in and custom rendering engines.
Editors can add static images only available for custom rendering engines.
See the article Introducing FORGE for more information about rendering engines in the FORGE logical architecture.
Adding images
- Select Add image in the right menu and select the azure-highlighted slot where you want to add the static text:
- In the image selector, select the image and the Select button. E.g., at step 1, select the first slot, the alpha_ogzdfm image, and the Select button:
- In the Image settings popup page, set image's metadata and select Add:
- Alternative text: A textual image's description provided in the HTML alt attribute. It is displayed when the image cannot be loaded and is also used by screen readers to describe the image to visually impaired users.
- Caption: A short piece of text providing context, explanation, or additional information about the image.
- Click through URL: The URL (web address) linked to an image, allowing users to navigate to another webpage when they click on the image.
- Copyright: The legal right that gives the image's creator the right to use, share, change, or copy their work.
- The selected image displays in the chosen slot:
Manage translations
When selecting an image, all languages get the same image. Then, editors can localize and manage image visibility per language by hovering over the language box.
Changing the image per language
Select the change image icon — for example, for the French language. In the popup window that opens, hover over the image's thumbnail:
By selecting Choose image, a further popup window opens, which allows selecting a new image:
Once selected, the new image is assigned to the edited language — French in our example:
Switch to French to preview the image for that language:
Changing image visibility per language
(coming soon)
By hovering over a language and selecting, editors can hide or enable the image's visibility in the front-end for that language.
When editors switch the image's visibility off, the front-end receives the instruction to not display that image.