Multi Image Field - show alt tag as text

As always, superb Siton_Systems

1 Like

Does anyone know how far off we are from having captions for each lightbox multi-image upload? I’ve got a client who loves this feature but not having captions per image is a dealbreaker for them.

You right (No way to add a caption for multi-images lightbox).
Maybe add this idea to webflow wishlist:

Harder to solve this by custom code beacuse each image use JSON for the data.
Example:

<script type="application/json" id="data" class="w-json">{
  "items": [
    {
      "url": "https://uploads-ssl.webflow.com/5cdea0b4b9e0bc7e48892f8c/5d2c5bbdb4a76d7eb8328c84_24411049.jpg",
      "type": "image"
    }
  ],
  "group": "hello"
}</script>

Thanks @Siton_Systems ! This is exactly what I was looking for.

1 Like

Would there be a way to dynamically append a JSON attribute to each item that pulls from the alt text? I’m sure I’m using improper terminology but from my very limited knowledge of JSON & JS it seems like something like this might work:
https://stackoverflow.com/questions/18884840/adding-a-new-array-element-to-a-json-object/18884871

Hard to solve this - because the gallery loads with the original JSON (So even if i add json data - nothing happens) - Long task to solve this (More freelancer job mission) + whats happen if webflow js code will change?

Anyway figure and figcaption - you get very small effect on SEO/Site semantic.

Of course you can always use any markup you want and combine with some JS plugin - like this example:

Got it—thanks for the help.

I tried to implement the initial solution here, but it’s not working for me… Any thoughts? Here is my read-only link: https://preview.webflow.com/preview/aawaa?utm_medium=preview_link&utm_source=designer&utm_content=aawaa&preview=c685b3439ad29066a2fdb8f6a8d1957e&pageId=5d42c9d2f6c573e9ba42ede9&itemId=5d42e0187ac7887dc281f35f&mode=preview

And live site link (password is “website”): https://aawaa.webflow.io/artists-affiliates/lenore-chinn

Hi All,

If anyone else needs this function…

I couldn’t get it to work using any of the methods above.

My friend worked out this solution:

  1. Add in your collection list (I changed my collection list to a grid)

  2. Add a lightbox / image inside your collection item

  3. In the settings for the lightbox tick “Get media from your collection name

  4. Tick " Link with outer lightboxes" and type in your collection name to the group name field (if you want to be able to click through the multiple images)

  5. Give the image inside your lightbox a class name, for this example I used “multi_image”

  6. In this images settings tick "get image from your collection name

  7. Paste the following code into your sites footer (Project settings > custom code > footer):

     <script>
      
     $(function(){
     $(".multi_image").each(function(){
        var caption ="";
        $(this).wrap("<div class='img-caption'/>") 
        if($(this).attr("alt")){
          caption = $(this).attr("alt");
        
        var style = $(this).attr("style");
        $(this).attr("style","");
        $("<div class='caption'>" + caption +"</div>").insertAfter(this); 
        $(this).parent().attr("style", style);
        }
     });
      
     });
      
     </script>
    
  8. Make sure you’ve actually given your images in the multi image field some alt text (duh)

  9. I then added an embed to get the images to display as cover as I have a fixed size on my multi_image class. The embed goes inside the lightbox, under the image and is coded like this:

     <style>
      
     .multi_image {
     object-fit: cover;
      
     </style>
    
    .multi_image { object-fit: cover; }
  10. If you want to style the text that’s now displaying under your image, add some text on to your page, give it a class of “caption”, style it, then delete it

  11. Ask your clients for more money.

8 Likes

I registered so I can say thank you :slight_smile:

4 Likes

Whew! That solved a huge problem for me. Thank you!

1 Like

I can’t for the life of me get any of these examples to work. I had high hopes for the 2nd one, but it is not showing up.

Do I need to make a separate div for the alt text, or is it just supposed to appear?

Update The second solution worked! Not sure why, or how, or what changed, but it did. I did add the class to the list and the image.

1 Like

Hi, Hope you’re able to read this soon! How do I put the captions INSIDE the lightbox and not on the page?

Also, do you know how to display only a limit of like 3 thumbnails on the page, but then have the rest of the images still displayed when the lightbox is launched?

To be honest, I don’t actually know how you would get the text inside. Have you tried applying negative margin to the alt text? Or perhaps setting it’s position to absolute and giving it a higher Z index than the image? Bear in mind you would need to set the image’s position to relative for this to work.

Re a limit on the thumbnails I’m afraid I don’t know. Might be worth a google for that one - surely someone has had to do that before! Good luck!

Can someone help, “Alt” name visible for second and then show the default value to me, also my images are coming from Variant option colors

Hi tom!
thanks for your code it is working, but it is breaking my .classe_name:nth-child(4n+1) {flex: 0 100%;}

do you have any idea how to fix this? I have tried but could not figure it out :confused:

Hey man, I’m really sorry but I actually don’t know how to solve that. It’s a bit above my pay grade I’m afraid. Like I said, I got the original code from a friend who figured it out and then did some tweaking. Perhaps start a new thread in the forums and see if any expert can help?

Sorry for such a late reply too!

Associated clonable prototype:
https://webflow.com/website/Alt-Tags-as-Captions-for-CMS-Multi-Images

2 Likes

Even I managed to follow these instructions (and that means something, because I don’t no sh**)

Very, very helpful.

Thanks so much!

With the following code, you can add the alt text of the multi-image field images as a text element inside the opened lightbox.

You have to substitute the “your-image-class-goes-here” by the class you used in the images that are inside the lightbox clickable element.

/**
 * Gathering the Data and storing inside an object,
 * and pushing it into an array of objects
 */
const altData = [];
const allImages = document.querySelectorAll(".your-image-class-goes-here"); // <- change here

const getImgData = (img) => {
  const imgData = {
    _src: img.src,
    _alt: img.alt,
  };
  return imgData;
};

allImages.forEach((el) => {
  altData.push(getImgData(el));
});

/**
 * Setting up Listeners to function when the Lighbox is open,
 * and to when a new child is added to the w-lightbox-container element
 */

const htmlTag = document.querySelector("html");
const lightboxes = document.querySelectorAll(".w-lightbox");
const lbOpenObserver = new MutationObserver((mut) => {
  mut.forEach((mutation) => {
    if (mutation.target.classList.contains("w-lightbox-noscroll")) {
      const lbContainer = mutation.target.querySelector(
        ".w-lightbox-container"
      );
      const slideChangeObserver = new MutationObserver((newMut) => {
        if (newMut[0].target.classList.contains("w-lightbox-content")) {
          const figureLB = newMut[0].target.querySelector("figure");
          const imgLB = newMut[0].target.querySelector("img");
          if (figureLB.children.length < 2) {
            altData.forEach((entry) => {
              if (entry._src == imgLB.src) {
                const figcaption = document.createElement("figcaption");
                figcaption.textContent = entry._alt;
                //In case you want to style the figcaption, give it a class
                figcaption.classList.add("lb-figcaption");
                if (entry._alt) figureLB.appendChild(figcaption);
              }
            });
          }
        }
      });
      slideChangeObserver.observe(lbContainer, {
        subtree: true,
        childList: true,
      });
    }
  });
});
lbOpenObserver.observe(htmlTag, { attributeFilter: ["class"] });
1 Like

Sorry I dont get this… where does the Alt text show on the page?
I have cloned your site but cant see the text.