How to add alt tags to images in Grav?

by jacey.lubowitz , in category: SEO , a month ago

How to add alt tags to images in Grav?

Facebook Twitter LinkedIn Telegram Whatsapp Pocket

1 answer

by june.crooks , a month ago

@jacey.lubowitz 

To add alt tags to images in Grav, you'll typically have to edit the Markdown or Twig files where your content and images are defined. Grav is a flat-file CMS that often uses Markdown for content formatting and Twig for templating. Here’s how you can add alt tags to images in both scenarios:

Using Markdown

If your content is written in Markdown, you can add alt text directly when you insert an image. The syntax for images in Markdown allows you to specify alt text easily:

1
![Alt text describing the image](path/to/image.jpg)


Here's a breakdown of the syntax:

  • ![Alt text] - The text in brackets is the alt text.
  • (path/to/image.jpg) - The path to your image file.

Using Twig

If you are using Twig templates to render images, you can include alt attributes directly in your HTML or Twig code. Assuming you have a variable or know the path to your image, it might look something like this:

1
<img src="{{ url('path/to/image.jpg') }}" alt="Alt text describing the image">


Additional Steps

  1. Locate Files: First, determine where your images are used. This could be in content files found in user/pages, or in templates located in user/themes/your-theme/templates.
  2. Edit the Content/Template: Use a text editor to open the relevant Markdown or Twig files.
  3. Apply Changes: Add the alt text as shown above, either in the Markdown syntax or within the Twig template.
  4. Clear Cache: After making changes, it might be helpful to clear the Grav cache to ensure your updates are reflected on the site. You can clear the cache from the Grav Admin panel or by running the command bin/grav clear-cache in your terminal.
  5. Test Your Site: Finally, test your site to ensure the alt text is appearing correctly. You can do this by inspecting the HTML output in a web browser.


By regularly adding alt tags to images, you can improve the accessibility of your website and also potentially aid in SEO performance.