Long time reader, first time poster. Always appreciate reading through all your help.
I’m working on a portfolio site and I’m using the CMS Multi Image field for the gallery. I was wanting to create a grid feature where I could upload a bunch of images, then use the ‘Alt Text’ feature to set custom classes for certain images.
If you look at the design below, it’s essentially a two column grid, but I’d like to have items span two rows at times or across two columns.
My thought was to use a combination of Custom Attributes and JS to try and extract the Alt text from the image and insert that text into the parent div as a sub class, but I couldn’t figure out how to do it.
I found a great tutorial for how to do this if each image is a separate CMS entry, but not if they are in the multi image field. https://www.youtube.com/watch?v=VJ0swK8mbg4
For reference: the third and fourth image should be ‘tall’ (that’s the alt text and class I’ve given them) and the fifth image should be ‘wide’. I’m just unsure how to make use of this alt text and the css classes.
Just after recording this I noticed that you wrote “multi-image field”. Yes that changes things, but the same technique here would work fine with the alt tag binding.
Thanks so much for this, Michael. Really appreciate you taking the time to record this and have a play.
The trouble I’ve run into is that, since I’m using the Multi-Image field, I can’t give each image a separate class. To do that, I’d have to set up an individual CMS entry for each image and then link them to a project. For this project, there may be 30 projects with up to 10 images each, so you can see the appeal of using the Multi-Image Field - it’s going to save me a lot of time
The part that I’m still struggling with (and maybe it isn’t possible) is binding or referencing the alt tags from the Multi-Image field to the CSS layout so that I can isolate only certain images. By default, a 2 Column layout works well, but I’d love the ability to have certain images go across the whole row or expand vertically as well.
Would you have any insight into how to reference that alt tag? As you saw, I tried to hobble together some different javascripts, but I’m not very experienced with that so I’m not surprised it didn’t work. Ha.
Unfortunately if you want to go the multi-image field and alt tag route, you really have only two options;
Use javascript to make some post-load mods to the page
Use CSS with the :has() pseudo selector which is widely supported but NOT by Firefox.
My rule on this is that if the site is 90%+ mobile users, Firefox has no market share there and you’re probably ok using :has(). If however desktop users make up a substantial visitor base then about 7% of those users will be on Firefox and :has() will fail.
In this case, that failure isn’t really problematic, that 7% of desktop users just gets single-cell images.
If you go that route, you can use a CSS construction something like this;
Totally understand it isn’t great to use the ALT tag for anything other than image descriptions, but in this case, I was trying to find a way to use Mulit-Image field and isolate certain images.
Your solution was really helpful too. So, thanks again!
hi @paulhanna I understand you are trying to find a way to “hack” WF collection as it has very pure customisation, but the image alt tag is a terrible choice as it may impact ranking.
When Googlebot or other search engine crawlers inspect a page, images with properly formatted alt text contribute to how the page is indexed and where it ranks.
Way back, this alt hack was more forgettable but these days Google push on accessibility pretty hard for ranking.
