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.

General

How to create alternative text for images?

Solved by Josh View solution

Started by Josh 5 years ago · 6 replies · 977 views
5 years ago

I'm trying to figure out the best way to add alt text to my images in grav. From the documentation it says to create a metafile for each image and stick the text in there:

Your images, in essence, have a set of data unique to them that can be easily referenced and pulled as needed.

While I agree that once the text is there it is easily referenced and pulled as needed. However, it is NOT easy to create the text. According to this I have to manually create a yaml file for EVERY image on my site that will include alt text? And this is the best way to add alt text to images? I'm confused. How are end users/clients supposed to do this? Surely there's an easier way. What if my site has hundreds/thousands of images...

Has anybody found an easier way to do this?

  • Is there a way to auto-generate this metafile?
  • Can I add alt text to an image through a page blueprint?
  • other ideas?

I don't see a plugin for this.

last edited 11/21/21 by Josh
5 years ago

@skipper, Are you adding your images in a Twig template or in Markdown?

5 years ago

Through the media selector, usually through the admin. That's the most user friendly. It's accessible through the .md file.

5 years ago

@skipper, Sorry, I realise my question wasn't specific enough... I was trying to assess if metafiles are really necessary.

After loading the image in Admin:

  • do you then, in Admin, add the image(s) to Markdown (content) of the page?
  • or do you add the image(s) to HTML in a Twig template?
5 years ago

@pamtbaau, yes it would be nice if metafiles weren't needed for this. I'm inserting images in the twig template:

TWIG
{% set first_image = page.media.images|first %}
{{ first_image.cropResize(600, 300).html()|raw }}
5 years ago

@skipper, I see an alternative for the media files here: Adding the alt_text value in the frontmatter of the page.

YAML
---
title: Page title
image:
  title: My title
  altText: My alt text
---

You can add this by adding an extra field (or fields if title is needed) to the blueprint of the page, or if acceptable, edit the frontmatter of the page in Admin manually in mode 'Expert'.

You can then add the image with altText in Twig like:

TWIG
{% set first_image = page.media.images|first %}
{{ first_image.cropResize(600, 300).html(
    page.header.image.title, 
    page.header.image.altText
   ) | raw 
}}
5 years ago Solution

Yes, I got alt text working without a metafile. I added two fields to my blueprint, a file selector for the image, and text for the alt text. Then I could render the two together like you outlined:

TWIG
{% set featuredImage = page.media[header.featured_image|first.name] %}
{% set altText = header.alt_text %}

{{ featuredImage.cropResize(600,300).html('',altText)|raw }}

Thanks for the help @pamtbaau

Suggested topics

Topic Participants Replies Views Activity
General · by Jerry Hunt, 4 days ago
2 76 8 hours ago
General · by pamtbaau, 13 hours ago
1 47 12 hours ago
General · by Andy Miller, 1 day ago
0 44 1 day ago
General · by Marcel, 12 months ago
6 346 5 days ago
General · by Duc , 5 days ago
3 40 5 days ago