Multi Image Field - show alt tag as text

illustregrafik · July 17, 2019, 8:33am

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 · July 17, 2019, 1:17pm

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 · July 25, 2019, 7:46am

As always, superb Siton_Systems

Golden28 · July 26, 2019, 9:30am

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 · July 26, 2019, 1:16pm

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>

illustregrafik · July 27, 2019, 7:10pm

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

asksj · August 5, 2019, 11:12am

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 · August 5, 2019, 12:31pm

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:

asksj · August 5, 2019, 12:39pm

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 · March 19, 2020, 7:12pm

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:

Add in your collection list (I changed my collection list to a grid)
Add a lightbox / image inside your collection item
In the settings for the lightbox tick “Get media from your collection name”
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)
Give the image inside your lightbox a class name, for this example I used “multi_image”
In this images settings tick "get image from your collection name

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>

Make sure you’ve actually given your images in the multi image field some alt text (duh)
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; }
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
Ask your clients for more money.

Makos7 · May 29, 2020, 9:17am

I registered so I can say thank you

whoooop · June 26, 2020, 4:01pm

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

Amir_Khan · July 10, 2020, 12:35am

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 · August 5, 2020, 12:38am

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 · October 6, 2020, 5:24pm

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 · October 9, 2020, 6:41am

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 · January 26, 2021, 2:00pm

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 · February 3, 2021, 9:10am

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 · September 9, 2021, 10:50am

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

MelinaOve · November 10, 2021, 12:50pm

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

Very, very helpful.

Thanks so much!