How To Add Alt Image Text As Captions in WebFlow CMS

When managing multiple images and adding captions in WebFlow, creating separate text fields for each caption can be inefficient and clutter your project. A more streamlined approach is to use the alt text field.

When working with the CMS multiple image field, hover over an image and click the three dots that appear. Then, select “Edit Alt Text” to add your caption directly to the image’s alt field.

However, WebFlow currently doesn’t offer a built-in way to display alt text visually on your site. To make these captions visible, you’ll need to implement a custom code solution.

Put this script in the before </body> Tag in your page settings

<script>
  document.addEventListener("DOMContentLoaded", function () {
    // Select all CMS items
    const cmsItems = document.querySelectorAll(".cms-item");

    cmsItems.forEach((item) => {
      // Find the image within the CMS item
      const image = item.querySelector(".cms-image");
      
      if (image) {
        const altText = image.getAttribute("alt"); // Get the alt attribute

        // Find the text display element within the same CMS item
        const altTextDisplay = item.querySelector(".alt-text-display");
        
        if (altTextDisplay) {
          if (altText) {
            altTextDisplay.textContent = altText; // Insert the alt text
            altTextDisplay.style.display = "block"; // Ensure it's visible
          } else {
            altTextDisplay.style.display = "none"; // Hide the element if no alt text
          }
        } else {
          console.warn("Alt text display element not found in:", item);
        }
      } else {
        console.warn("No image found in CMS item:", item);
      }
    });
  });
</script>

Then create a Div where you want your caption to be and make it’s class name:

alt-text-display

Publish and you should be good