How to create alternative text for images?

1

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.

2

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

3

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

4

@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

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

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

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

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

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

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:

{% 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