Multi Image Field - show alt tag as text

[illustregrafik (Patrick)]

Hi there,

I use the new Multi Image Field and would like to add text to each image that shows. Captions are not yet possible but since we can give each image in the cms a alt tag, I was wondering if somebody could provide a custom code (via html embed) that could show the alt tag as normal text right next to the image.

Would be great to have a solution for this before the Webflow team comes up with a new feature.

Thanks!

Patrick

[Siton_Systems (Ezra Siton)]

Nice idea.

Inside the lightbox add title header (or text)

Scope Add a class for the list
–images in this example
(Otherwise the code will affect other elements)

Before body

Copy paste this code

<script>
$(function() {
    $('.images img').each(function () {
      var caption = ($(this).attr('alt'));
      $(this).next().text(caption);
    });
});
</script>

Parts of the code:

• $('.images img').each(function () { loop throw all img inside .images class
• var caption = ($(this).attr('alt')); get the alt from each image and store this alt inside var
• $(this).next().text(caption); Change next() dom element (Related to this image element) text() (text docs) to “caption” (The var)

Publish the site - Result:

Before:

After:

[Golden28 (Neil Newnham)]

As always, superb Siton_Systems

[Golden28 (Neil Newnham)]

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.

[Siton_Systems (Ezra Siton)]

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

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>

[illustregrafik (Patrick)]

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

[asksj (Stephanie Jones)]

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

[Siton_Systems (Ezra Siton)]

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:

Webflow [new] Multi-ref feild CMS & fancyBox3.js gallery

Someone write to me in private - so her is the solution for all users. demo: https://codepen.io/fancyapps/full/gdVyxg fancybox3 is one of three best JS gallery plugins out there (The other: photoswipe(For advanced) & lightgallery). Support Touch gestures (Pinch to zoom and so on) Vertical swipe to close gallery Keyboard support History mode: Add #hash to url (Back button on mobile/desktop = close) Fancybox3 - Mobile optimized gallery - JavaScript lightbox library for presenting various t…

[asksj (Stephanie Jones)]

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

[TomPiggott]

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.

[Makos7 (Ákos Varga)]

I registered so I can say thank you

[whoooop]

@TomPiggott

.multi_image { object-fit: cover; }

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

[Amir_Khan]

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.

[chickenlegs0809 (Nada Dabbouseh)]

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?

[TomPiggott]

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!

[prajakta]

@Siton_Systems

<script>
$(function() {
    $('.images img').each(function () {
      var caption = ($(this).attr('alt'));
      $(this).next().text(caption);
    });
});
</script>

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

[teristrife (TC)]

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

[TomPiggott]

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!

[spirelli]

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

[MelinaOve]

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

Very, very helpful.

Thanks so much!