How to add alt to image in custom section

Question

I have created a custom section in which I add a picture. I need to display its alt. How can i do this?

 <img src="{{ section.settings.img_section_image | img_url: '960x645'}}"> {% schema %} { "name": "Img section", "settings": [ { "id": "img_section_image", "type": "image_picker", "label": "Add image" }, ], "presets": [ { "name": "Img sections" } ] } {% endschema %}

Answer 1

Once you upload the image simply click on the image, and a popup appears on the popup there is a text field to add an alt tag for that image.

it looks like this image:

To get it on img tag you can use the default image_tag

{{ section.settings.img_section_image | image_url: width: 200 | image_tag }}

it shows the alt tag automatically when img tag is created or use the

{{ section.settings.img_section_image| image_url: width: 200 | image_tag: alt: 'My image's alt text' }}

To add manually custom tag, without backend.

if you do not use image_tag , then try something like this

<img src="{{ section.settings.img_section_image | img_url: '960x645'}}" alt="{{section.settings.img_section_image.alt}}">

I hope this will helps you and other as well