Can someone provide a custom HTML embed code for Webflow that displays the alt tag of each image next to it in the new Multi Image Field?
TL;DR
- Use a Collection List to display images from a Multi-Image Field and add an Image element with a class.
- Insert an Embed element with custom JavaScript to extract each image’s alt text and display it in a nearby div.
You're looking to display the alt text next to each image in a Webflow Collection that uses the Multi-Image Field, which Webflow does not directly support via binding alt text in the Designer.
1. Understand Webflow’s Multi-Image Field Limitation
- Webflow allows you to bind images from a Multi-Image Field using a Collection List.
- Alt text for these images must be entered manually or accessed via custom code, since Webflow doesn’t expose alt text from multi-image fields in Designer.
2. Add a Collection List for Your Multi-Image Field
- Drag a Collection List into your Webflow page and bind it to the Multi-Image Field.
- Inside the Collection List, add an Image element and bind it to the multi-image source.
- Give the Image element a class like
custom-image.
3. Embed Custom HTML and JavaScript
- Add an Embed element below the Image element inside the same Collection Item.
- Paste the following code (edit class names if you use different ones):
<div class="image-alt-text"></div>
<script>
const img = document.currentScript.previousElementSibling;
const altText = img.getAttribute("alt");
const altDiv = document.currentScript.parentElement.querySelector(".image-alt-text");
if (altText && altDiv) {
altDiv.textContent = altText;
}
</script>
- This script fetches the
altattribute of the image and displays it in thediv.image-alt-textelement.
4. Ensure Webflow Alt Tag Is Set per Image
- In the Collection’s CMS images, make sure each image has a valid alt text in the media asset’s settings. Webflow will apply this alt tag to the image when published.
Summary
To display alt tags for Multi-Image Field items, use a Collection List, insert an Image with alt text, and use custom JavaScript in an Embed block to extract and show the alt attribute next to each image.
