How to do captions under the 25 images in CMS

I have to make approx. 10 websites for artists with portofolio, and I wonder why we can’t have captions under the 25 images in CMS. Can anyone help?
My clients wants to have captions under each of the images.

Thank you !

Hi again! I am waiting for this! Please answer me!

Thank you so much!

Hey @neanea6060
I think you can find what you are looking for in here:

Cheers.

Hi @neanea6060,
you could add a alt text field into your cms collection. Then you can add it as a text field under your image? Or am I missing sth?

If you want to use this text as alt text for cms images, you can set it as alt=“” in a custom html embed image element. (I am not sure if you can add alt text from cms to images)

Maxi

Thank you!
That seems very difficult?

Thanks a lot!
That seems very difficult? I can’t figure out how to do that? Is there a video tutorial about how to do this? Why is this so difficult in Webflow? In other platforms it is no problem to have a caption under an image in a CMS

Hi @neanea6060,
in webflow you get the legos to build sth. At six or other page builders you get the houses and cars prebuilt. (Ways simplified)

Can you share a read only link? Then I can show you how to do it.

And for my understanding, you want a (visible to the end user) caption under the picture?
And/ or the caption as alt text for screen readers?

Maxi

You can’t have captions for the multi-image fields built in. You’d have to use some other way of getting an image collection displayed.

@fonsume, mentioned sth. important. Are you using the multi-image field, or just the “normal” one.

the 25 Multi-image field in the CMS

Hi @neanea6060! One thing to note about multi-image fields and alt text is that you can add it per-image in the CMS.

Take a look at https://university.webflow.com/courses/2021-portfolio-course (the Accessibility audit lesson covers multi-image alt text at 8:00 into that lesson) if you haven’t already.

As for pulling in captions for each image in the multi-image field, I’m not aware of a native solution, but we’ll make sure to bring this feedback to the team as it’s incredibly practical — there are many times where we could use that in multi-image designs.

If you’re looking for something immediate, it might make more sense to create a separate Collection item for each image, then add a text field for the caption per-item. This way you can use a Collection list to add the image and the related caption. :+1:

Thanks a lot for your reply.
But if I have to make a separate Collection item for each image, then my client can not figure out how to post new portfolio images, with a text below. It’s way too difficult for him.
Re: “Take a look at 2021 design portfolio course | Webflow University 1 (the Accessibility audit lesson covers multi-image alt text at 8:00 into that lesson) if you haven’t already” - so I do not know what video the speech is about, there are more videos in these courses as I see it

Hi, @neanea6060, the lesson in that course that covers this is called Accessibility audit, and at 8:00 in that lesson, we cover alt text for multi-image fields.

As an alternative, you could also add a handful of fields so your client can still add only one Collection item for images + captions:

Image field (1st image)
Text field (1st image’s caption)
Image field (2nd image)
Text field (2nd image’s caption)
Image field (3rd image)
Text field (3rd image’s caption)
etc.

McGuire is talking about alt text which is not at all what you’re asking for.

You can’t add captions to the multi image field. What you can do is use a rich text field and add images there, which gives options for way more than 25 images and captions under them.

1 Like

Hey @Fonsume — the example in the previous post with single images and text fields matching for each one would let you set up multiple images + captions in a Collection list.

I absolutely love this approach!

But I want a slide, which the 25 images does.
I I do it as you said, Image field (1st image)
Text field (1st image’s caption)
Image field (2nd image)
Text field (2nd image’s caption)
Image field (3rd image)
Text field (3rd image’s caption)
etc.
There is no slide :smile: :sleepy:

You can add lightbox to images in rich text fields.

ok. Lighbox in the Rich text fields. How?

Personally I use Fancybox on my site.

Here’s the code snippet:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

<script>
$('.w-richtext figure img').each(function() {
  $(this).parent().css({cursor: 'pointer'}).attr('data-fancybox', 'gallery').attr('data-src', this.src);
})});

$("[data-fancybox]").fancybox({
  clickContent    : false
});
</script>

Add this to the custom code part of your page and it’ll make all images within a rich text field clickable and in a gallery that can be scrolled through.