Skip to content
Grav 2.0 is officially stable. Read the announcement →

Community guidelines

Please keep discussions civil and on-topic. Repeated violations may lead to a temporary ban.

Content & Markdown

Add an alt tag to an image and to cropZoom version

Started by Pierre-Clement Cazon 9 years ago · 6 replies · 2420 views
9 years ago

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!

9 years ago

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

9 years ago

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

TWIG
{% 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
9 years ago

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 ?

9 years ago

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 ...

9 years ago

@JobPhoning hello 🙂
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):

TWIG
{% 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 :)

👍 2

Suggested topics

Topic Participants Replies Views Activity
Content & Markdown · by Jochen, 8 months ago
6 96 8 months ago
Content & Markdown · by Ton Haarmans, 1 year ago
10 184 1 year ago
Content & Markdown · by Jan L'Am, 1 year ago
4 147 1 year ago
Content & Markdown · by Leonardo, 1 year ago
3 61 1 year ago
Content & Markdown · by belthasar, 1 year ago
4 255 1 year ago