is there a workaround for the 20 collection lists limitation for one pagers? I have a deck of sliders, the user should be able to click through some images per project and client should be able to update the images via cms. The issue I’m having is that I need to use a collection list for each slide/image. Any ideas?
Can you explain more about your data structure for the CMS? I’m trying to understand why you have collections for each column. Will each project always be limited to a single photo? It might be simpler to have 1 cms collection for projects then use a dropdown field to designate which column it should go in.
Are you trying to to get a Masonry or flexbox type layout?
The screenshot shows 3 sections/rows. Can I achieve this with masonry, while using sliders?
“Will each project always be limited to a single photo?” Each project (slider) consists of 3-5 photos.
“It might be simpler to have 1 cms collection for projects then use a dropdown field to designate which column it should go in.” Does this still give me the freedom to achieve the above layout? How would I set this up?
Still my biggest issue is using sliders and connect each slide to a collection list. I’m running out of collection lists after showing 6 projects (1 project having 3 images). Is there maybe a workaround using images that lay on top of each other and a click animation to go to the next image?
Are you familiar with flexbox? It can easily create your desired layout with one or two collection lists.
On the collection list element set it to flexbox - horizontal - align:end - wrap - align:rows-center. Here’s an example. Set the collection item element to your desired width and any items that don’t fit on a row will wrap down. Setting the wrapped rows to align:rows-center will get the desired look. The taller images will push up/down from that center baseline.
My suggestion would be to add 5 photo fields to your collection settings. Then inside each collection item use the slideshow element linked to the project photos like you were doing.
If you want more control over exactly how many items are in each row, make each row it’s own collection and limit the number of items. Make the first row align:end and the second row align:start.
Hope that helps. Let me know if you have any further questions.
thanks so much! I’m going to look into the flexbox solution. Just one question:
“Then inside each collection item use the slideshow element linked to the project photos like you were doing.”
If I still link the slideshows the way I did, I’d still use the collection list for each slider, correct? I’d still have the issue of using too many collection lists on one page? Or is there something I’m missing?
Currently you have the collection list inside of a slider slide. Instead reverse that and put the slide inside of the collection list item. Then add a slide for each image and bind them to the photos in the collection.
so the slider solution works. I’m using way less collection lists than before! But I can’t get the layout to work. Could you guide me through one more time, how to set this up?
I created a collection list, gave it the 3 column layout and the flex styling written above. But how can I give different styling to the sliders? They all have the same size now, if I change one I change all. I’m sure I’m missing something.
Did some digging on the forums to find an answer. Apparently, although counterintuitive, on the slider element set the height to “auto”. Now it is supposed to default to auto but that will force it. After doing so I get the following.
The sliders correctly resize for the largest image vertically. However if there shorter images the images get aligned:top automatically. Not sure ho you feel about that.
