Add an alt tag to an image and to cropZoom version

Support Content & Markdown
1

Hello,

I’m starting on Grav and I don’t understand how to add an ALT tag to a specific image and how to change the name and ALT of a cropZoom image.

  • I have an image named image.jpg in /user/pages/01. home/page/

  • I created an image.jpg.meta.yaml file in which I wrote alt_text: test

  • On the html. twig file side :

    {% set header_image_media = page. media. images|first %}

    {{ header_image_media_image_media. html () }}}}

Thank you in advance for your help!

2

Hi, try taking a look at https://learn.getgrav.org/content/media#metafiles (if you have not already seen it)

3

Thank you for your quick answer but I have already consulted this page.
I’m a little confused, if someone can guide me please.

4

Well for your first two points, in the twig file try to write:

{% set header_image_media = page.media.images|first %}
{{ header_image_media.html('if_you_want_title', header_image_media.meta.alt_text, 'if_you_want_class') }}
2 Likes
5

This is good for the ALT tag in the article image, thank you.
To modify the name and ALT tag of the cropZoom image, an idea ?

6

Once Grav shows any content in the browser, to modify that you need to work with javascript (jquery, etc.). that is, get the object to be changed by name or class and change an attribute …

7

@JobPhoning hello :slight_smile:
I understand that you are using Image Action cropZoom on your image, and after that you wish to give it an alt= attribute?

If you are doing this in Twig (template file):

{% set header_image = page.media.images|first  %} // We're assigning first image in the page folder to a variable
{% set header_image_cropped = header_image.cropZoom(100,300) %} // Using cropping action on our image
{{  header_image_cropped.html('Mona Lisa', 'Photo of a painting', 'image-small')  }} // Rendering the actuall <img /> tag

This will give us output of a 100px wide and 300px tall image with html looking like this:
<img title="Mona Lisa" alt="Photo of a painting" class="image-small" src="/page/your_image_name.jpg" />

You could as well do it all in one line, just wanted to show you step by step :slight_smile:

2 Likes