2

I am trying to figure out how to add alt image tags to my photos. I was under the impression that the "file name" served as the alt image tag in Craft CMS, but no such alt tags are populating...and furthermore...I really have no idea where I can add them. Can I do this from the assets field?

2 Answers 2

4

Out of the box, you can use the image "Title" as alt text. Since it is already configured - you don't need to add any additional fields. Then you can output this in your twig template as:

{% set image = image.yourImageField.one() %}
<img src="image.url" alt={{ image.title }}">

For semantics, you may not want to use the "Title" field. Or, you may be using "Title" for something else. In that case, you can add a new text field to your asset called "Alt Text". It will then appear right below "Title" in your image/asset editing dialogue.

{% set image = image.yourImageField.one() %}
<img src="image.url" alt={{ image.altText }}">

enter image description here

1
  • Thank you very much - one more question if you don't mind. How do I update the twig template?
    – jason
    Commented Jul 29, 2019 at 20:22
3

An updated answer for 2023: Alternative Text is available to assets as a native field in Craft CMS 4.

To enable it, within Settings > Media: Assets > Volumes > Field Layout, add the "Alternative Text" field found in the sidebar to the asset content (see screenshot).

Within your template, use asset.alt to render. Your image call could look something like this:

{% set asset = block.imagefieldname.one() %}
<img src="{{ asset.url }}" alt="{{ asset.alt }}" />

To edit the alt field:

  • When on an entry: after adding an asset to a field, double click the asset to open a contextual menu.
  • From the Assets dashboard: just click the asset.

Note: Mozilla recommends not using the HTML title attribute. From CraftCMS dev perspective, it's not recommended to render title field as the alt text either as you cannot leave it blank for decorative images. There's probably use cases for it but I haven't discovered them.

Screenshot of Media Assets and where to find Alternative Text field

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.