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?

Webflow’s Multi Image Field allows CMS collection images to be displayed dynamically, but it doesn’t directly expose the alt tag in the Designer. To display the alt text next to each image with a custom embed, you’ll need a mix of Webflow CMS binding and custom JavaScript.

Here’s how to do it:

1. Set Up the Multi Image Field in Webflow

• Add a Multi Image Field to your CMS collection.
• On your CMS Template page (or Collection List), add a Collection List and connect it to the Multi Image Field.
• Place an Image element inside the Collection List and bind it to the current image.
• Add an HTML Embed element inside the same Collection List item (beside or below the image).

2. Use an Embed to Output Image Alt Attributes

• Since Webflow doesn’t expose alt text from Multi Image Fields directly, we leverage JavaScript to pull the alt attribute from each rendered image and display it.

In the Embed Element, use the following:

<div class="custom-alt-text"></div>

3. Add Custom JavaScript to Render the Alt Text

• Go to Page Settings > Before tag section.
• Add this inline script (you can modify the .w-dyn-item or .custom-alt-text selectors if you use custom classes):

<script>  document.addEventListener("DOMContentLoaded", function () {    const items = document.querySelectorAll('.w-dyn-item');    items.forEach(item => {      const img = item.querySelector('img');      const alt = img?.getAttribute('alt') || 'No alt text';      const altContainer = item.querySelector('.custom-alt-text');      if (altContainer) {        altContainer.textContent = alt;      }    });  });</script>

• This script loops through each CMS image instance, grabs its alt attribute, and places it into the adjacent .custom-alt-text div from the Embed.

Summary

To show Multi Image Field alt text beside each image in Webflow:

• Add an image and embed inside a Collection List bound to the Multi Image Field.
• Use a <div> inside the Embed to hold alt text.
• Add a script before </body> to copy the image’s alt attribute into the div.

This lets you dynamically show the alt tag even though Webflow doesn't expose it directly in the Designer.