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

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

Drawing

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

Last updated

Was this helpful?