Creating dynamic CMS gallery

Design help General
1

Hi community.

We are in the middle of the development for a client and we are facing an unknown challenge. We need to create the following gallery powered by the CMS:

CleanShot 2024-08-05 at 14.21.15
CleanShot 2024-08-05 at 14.21.151475×1176 192 KB

The idea in real life is to work like the gallery on this site. It must expand when clicking on the thumbnail that says the dynamic number of hidden images.

Sorry if this is an obvious thing to accomplish. We have been researching around but haven’t found a way to do it. And I’m not sharing a link to the project because we haven’t created that page yet.

Thank you in advance for your help and ideas.

2

Add a small piece of custom CSS that gives the list items at positions 2 and 4 custom CSS a rowspan = 2 and colspan = 2.

I’ve some notes here that should help.

Also limit your list to 6 items, and then create a second hidden list with 7 - n.
As long as they all have lightboxes using the same group name, all of the images will appear there.

3 Likes
3

Thank you for this! Sorry that it took me so long to reply but other projects got in the way of this one.

We will be implementing this solution ASAP and I will reach back out to share the results.

Thanks again!

4

Hi! We are working on implementing this but we don’t fully get this last bit to make sure not all photos load at first and show them when clicking on the last one.

Would you expand a bit? Thanks again!

5

What’s your readonly site link for this page?

6

Hi Michael, thanks for the help.

Here is the read-only link. We implemented as the video explain, which is by affecting the first item, not the specific ones that we have according to the Figma file.

Thank you!

7

Ah I was afraid of that, Webflow’s limit items ranging feature is only available on collection lists that are bound to a collection. When you’re bound to a multi-ref field or and image-gallery-field, that ranging option isn’t presented.

So we’ll hide those extra items with a chunk of custom CSS in an embed instead.

<style>
.dynamic-gallery-list > * {
  display: none;
}
.dynamic-gallery-list > *:nth-child(-n+3) {
  display: block; // or flex, etc as needed for your vis items
}
</style>

Note- the .dynamic-gallery-list is the class name of your collection list element, which is the middle one. Update the code if you change that.

The number of items to show is that 3 in the :nth-child part.

8

Amazing, thank you for all these help! I modified the :nth-child to 6 in order to increase the default number of images shown.

Now, is there any way to:

  1. Make the fourth image take two rows?
  2. Make six image (last one) clickable to expand the gallery and load the rest of the images available?

CleanShot 2024-08-28 at 17.17.09
CleanShot 2024-08-28 at 17.17.091259×1149 182 KB

Thank you again.

9

Same approach as item 2…

That’s a whole different UX angle with a fair bit of complexity.
I think I’d do it in JS + CSS;

  • Build your grid to handle e.g. up to 100.
  • Set the CSS style embed to hide > 6. ID that embed
  • Script installs a click handler on the 6th item- this will compete with your lightbox there, so it may be better to make it a button outside of the grid, or to have item 6 be special, and not part of your lightbox ( see Finsweet CMS combine, which I think is the lib that lets you merge static items into a collection list ).
  • Click handler would then delete that “special” item, and also delete your ID’d embed so that all items would now show.
1 Like