Streaming live at 10am (PST)

Multi Image Field - show alt tag as text

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

Nice idea.

Inside the lightbox add title header (or text)

image

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

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:
image

Before:
image

After:

4 Likes

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:

https://wishlist.webflow.com/

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:

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