Hello,
I’d like to pull dynamic images from a collection and lay them out in a grid with varying widths.
Here’s a mock up of what I have in mind:
So, if we’re using a 3 column grid, you can see that some items are 2:1, 1:1 and even 3:1. In my tests, I can’t figure out a way to specify — on a per item basis — the grid ratio they should display at. It seems to be one size fits all.
What is the best way to go about laying out dynamic content like this?
Hi Greg,
This structure requires a bit of tweeiking and kind of a workaround, since the grid does not supports collection items yet.
What you need to do-
Have a wrapper div with the grid properties (now with the grid areas - easy!)
Then inside this wrapper’s areas put 6 CMS lists, and define each list to display only 1 item. The first list to start on the first item, the 2nd on the 2nd and so on…
Ah okay. That is a clever solution — thanks for the suggestion.
Will all the individual CMS calls affect the load time of the page? There are only 6 images pictured here, but I plan on displaying 20 or more.
Probably yes.
How bad will it be? That is a good question!
I don’t know… 
Maybe you can do some tests and let us know your resaults?
I was thinking it might. In this case, it’s the same amount of work for me to manually place the images.
Hopefully Collection Items in Grid is on the wishlist somewhere.
Thanks again for your help.
Is there a way to do something similar with ‘multi-image’ fields?
It doesn’t seem like you can sort or filter multi-image fields, so it seems like the technique described above won’t work (create an area for item 1-3 with a filter, then create another area for item 4-5 etc).
