Hi there. We need to improve the accessibility of our website to include alt text with relevant copy. I thought I found a way to do this for featured images (e.g. the image that shows up in the Image field in the liquid output) in blog posts by:
Pressing the three dots (…) menu in the top right corner when selecting an image for a blog pos
Selecting “Set SEO”
Adding Alt Text
Here the CTA says copy, but I believe that expected behavior should be to save the image with alt text as featured image for the blog post
Hi @frozenicetea Copy is the correct term here because the interface of the File Manager here is just generating the HTML code for you and copying it to your clipboard to use somewhere else in your page/code.
(it is not really connected to the Image field selection process, it’s just part of the File Manager itself).
To add Alt text to your image in this case, you would need to build it into your layout code. So in your Blog post layout (list and/or detail) you might have something like this:
<img src="{{this.image}}" alt="{{this.name}}">
(which would use the post’s name as the Alt text - adjust as needed)
To add Alt text to your image in this case, you would need to build it into your layout code. So in your Blog post layout (list and/or detail) you might have something like this:
The problem with this solution is that there is no copy that actually explains the image with this solution. Technically it adds an alt-tag but it doesn’t really increase accessibility as it doesn’t actually explain the image. If I for example would have a blog post named “Sign up for our talk about space” and use this picture of the moon as a featured image, using the blog post name doesn’t explain the picture. The alt text should probably be something along the lines of “Our moon in the first quarter phase”.
To create good, accessible websites we therefore need support to also add alt text to featured images for blog posts.
There are many problems like this that I fix with web apps, which is why I think the portal should be more customizable or have webapps on all plans.
Also, I think the portal could do with a design update. There are millions of admin templates out there that look so clean and tidy compared to the treepl one. Sorry if this is harsh but when I create a webapp with a lot of fields it’s all over the place it really looks confusing for any client. Should be a grouping option or something.
Example?
For now, on the PRO and ECOMMERCE plans, you can add custom properties to the Blog module to solve this.
On the BUSINESS plan, we have Custom Modules, so you could reproduce the blog module as a Custom Module to include any extra fields you need.
If on the ESSENTIAL plan, it’s more limited but some workarounds could be; utilising another unused field or even adding the Alt text to the end of the image path and splitting it out with Liquid as 2 separate values, eg: /images/moon-img.jpg#Our moon in the first quarter phase
Then in the layout:
