Count images inside CMS item

Hey everyone!

I have a collection that have these fields:

  • Title
  • Text
  • Image-1
  • Image-2
  • Image-3
    etc

Some items have 3 images, some 8, some 10 and so on. I want to count the amount of images on each item and display in a text block. I’ve used item counters, but I don’t know how to count images inside an item. Any help would be aprecciated.

Hey Vitor, in your description it sounds like you’re using a separate field for each image, is that correct?

You might want to instead use the Image collection field that the CMS now offers, which I believe lets you store 0-25 images in a single collection field. That should also make it a bit easier to render, since you’d have a Collection List within your Collection List, linked to that image field.

AFAIK, Webflow doesn’t [yet] offer any bindable fields like “Count of Photos”, so you’re kind of stuck making your own solution for counting.

Three possibilities come to mind.

MANUALLY UPDATED FIELD
Create a Count of Photos numeric field, and hand-update it whenever you add/remove photos. You’ll then be able to bind that field wherever you want.

ZAPIER UDPATED COUNT FIELD
[Requires a Zapier paid plan] Same as above, but with Zapier you MAY be able to automatically update it any time you republish that CMS item. I say MAY, because I have not tried triggering a Zap from a CMS item update. Assuming that’s possible, you should be able to count the photos and update that count field, which would make displaying that value super easy. Will you run into an infinite loop of Webflow->Zapier updates? Maybe.

JQUERY SCRIPTS
I usually take this approach to counting CMS things, but there area a lot of caveats and the script depends very much on the context you’re using it in. If you’re showing a Collection List of CMS items, which each have photos, you’ll be able to count them, but you may only be able to count what you can see, and I think that’s limited to 3 photos (?) in the embedded collection list scenario. So you wouldn’t get a proper count.

However on your Collection page, you can show all 25 photos, and count accurately up to that maximum. You may be able to adapt my webflow-utils library on Github for your needs;

I can’t advise the right solution for your case, but message me at mike@sygnal.com if you’re needing help with some custom scripting work.

Hey Mike! Thanks for your response. This image collection field is the Multi Image field? In my case, I don’t think I can use it. I need to let the user navigate through the images, like a slider, not a light box. And they’ll be inside cards.

I want something like this:

There’s one way that’ll probably work, but I would have to change more than 100 items that’s already on my CMS. I could put the images on a different CMS and link them in the multi-reference field. Then use the finsweet attributes to nest the collections, count the items and make the slider dynamic. But usually when I use some attributes with others at the same time, I don’t get good results.

But, this is probably the way to do it.

Correct, the Multi Image field is what I’m referring to-

If you’re displaying with a slider, it looks like you’d need to need to use a jQuery library for that, rather than Webflow’s slider component. I believe it does not yet offer CMS binding. Did you manage to make Webflow’s slider work in your approach? I’d imagine that requires a lot of display conditionals at the slide level.

Yes it would be a pain to change 100 items and reload all of those photos- the main reason to consider it would probably be client-maintainability if you have a client managing their own CMS images.

Multi-reference fields can be difficult to work with, particularly if you would ever want to re-order the images. That said, it might be the right choice if you’re sharing photos across your photo-collections- particularly if there is other data like captions, prices, locations, etc. that you want to display.

In your final display I’m guessing you want to show a series of cards something like this-

image

Returning to the counting question, here’s roughly what I’d do-

Setup-

  • Build your component, slider and images.
  • Wire everything up to display the way you want
  • Apply a special class or attribute to the outer collection item ( card-level ), so that your script can locate each card and iterate through them. I’ll use a class of my-card for discussion.
  • Wrap the image collection inside each card as tightly as possible in a DIV, which has no styling. This will be the element your script looks for to count image elements. Apply a special class name, or use a custom attribute to identify it with your script. Let’s call it my-card-images.
  • Apply a special class or attribute to the text element where you want to display the count. Let’s call it my-card-imagecount.

Scripting ( jQuery, before </body>, executed on DOM ready )-

  1. Select and iterate through your my-card elements
  2. Within each, locate the my-card-images element, and count the IMG elements inside of that.
  3. In that same card, locate the my-card-imagecount element, and replace the innerText there.