Combining Multi-Image Fields in a Single Grid

This demo is built on a collection page, where the CMS has 4 multi-image fields.

Each of those fields is limited to 25 images.

We want to combine them all ( up to 100 images ) so that we can have a single responsive grid layout.

1. Test
   1. test2
      1. test3
   2. test4
2. test5

Implementation

See...

• Custom attribute on the grid element
• Custom attribute on each image within the 4 collection lists, which tags so that SA5 Layout will move it inside of the grid.

Like all libraries, SA5 Layout will run in the published site, not in the designer.

Notes

• For convenience I've used the grid class on the Collection List elements as well, purely to assist with design-time sizing, padding, and responsiveness.
• This approach is fully responsive, since the target grid container is set responsively to the number of columns we want at each breakpoint.
• The number of photos in each multi-image field is irrelevant, but can be anywhere 0 to 25 ( for a max of 100 in this setup ).
• More multi-image fields could be used if you needed.