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
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
Last updated
Was this helpful?