Simple Collage Layout Engine

Ideal for simple collage-style layouts

Ideal for-

• Any number of images

• Where the entire image set should fill a square, with no jagged edges

• Where it's ok to crop the edges of the images

• Where the focal point for most images is center

Examples

Home 2x-gallery-e9e055.webflow.io

Example 1

Example 2

Notes

• Adjusts colspan randomly against a 12 col grid

• Ensures all rows fill 12 cols exactly

• Seeks to avoid dupliate adjacent row layouts

Configuration Options

None, currently.

Future;

• Perhaps min and max items preferred per row

• Perhaps the colspan options, e.g. 3, 6, 9, 4, 8...

• Hinting, on landscape, portrait, and square imagery

Hinting, on image focal point ( grid of 9, like top-left, center-middle )

• top-left

• top-center

• top-right

• left

• center

• right

• bottom-left

• bottom-center

• bottom-right

Easily implemented using an option field in the the CMS with the above values. This allows you to

Reference from

wfu-gallery-layout-config="x"

<script type="application/sa5+json" name="x">
{
  "@context": "https://attr.sygnal.com",
  "@type": "GallerySimpleCollageConfig",
  "@version": "0.1", 
 
  ... 
  
}
</script> 

Designer Controls

• Row height

  • Set fixed, e.g. 400px

  • or, as function of width so it scales, e.g. 30vw

  • This is usually set on the card or image itself

• Set images to 100% width, Fit: Cover

Internal Notes

https://x-gallery-e9e055.design.webflow.com/?pageId=6795f0a055de576f76b34b1b&workflow=canvas&mode=edit