Naming alt text for images inside symbols

Hey everyone,

is it possible to give images inside symbols alt text?
There is no option field to link alt text to the symbol.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hi @Nilson

You can set alt text on all images even within a symbol. The alt text setting is available for the image elements, so first you need to edit the symbol to be able to select the image within the symbol.

To edit a Symbol, double-click on an instance or select it and press enter. Once you enter edit mode, you should be able to select the images and edit the alt text.

Hello @AnnaKelian ,

Sorry to reopen this but I don’t see any way to create a property for image alt text when the image is in a symbol.

Thank you for your help!

Hi Joachim,
If it helps I use two approaches depending on what I need.

USE IMAGE ASSET ALT-TEXT
If your images are all stored in assets, you can set the alt-text there in the asset directly.
However that won’t work if you’re trying to pull the images from CMS bindings.

OVERRIDE THE alt ATTRIBUTE
Another approach is to create a custom attribute on the Image element called x-alt, and then to bind that value to a component Alt property.

Then, use SA5’s dynamic attributes feature. On page load, it will automatically find all attributes prefixed with x- and then override the matching attribute without the x- prefix. In this case, x-alt overwrites alt.

2 Likes

Hello @memetican !

The x-alt solution is awesome, I was already in chatgpt trying to cook some JS.
Thanks a lot, I did not know the Sygnal Attributes, will definitely check how it can add functionality, I already use the Finsweet solutions but I saw some new things there! :smiley:

2 Likes