> For the complete documentation index, see [llms.txt](https://attr.sygnal.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://attr.sygnal.com/sa5-gallery/article/simple-collage-layout-engine.md).

# Simple Collage Layout Engine

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   

{% embed url="<https://x-gallery-e9e055.webflow.io/home-2>" %}

{% tabs %}
{% tab title="Example 1" %}

<figure><img src="/files/6v0RhbtEjS08sVYtueKq" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Example 2" %}

<figure><img src="/files/qCUfUYyLy2R2R4wiRz92" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

## Notes&#x20;

* Adjusts colspan randomly against a 12 col grid&#x20;
* Ensures all rows fill 12 cols exactly
* Seeks to avoid dupliate adjacent row layouts&#x20;

## Configuration Options

None, currently.&#x20;

Future;

* Perhaps min and max items preferred per row
* Perhaps the colspan options, e.g. 3, 6, 9, 4, 8... &#x20;
* Hinting, on landscape, portrait, and square imagery&#x20;

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

* top-left
* top-center
* top-right
* left
* center
* right
* bottom-left
* bottom-center
* bottom-right

{% hint style="info" %}
Easily implemented using an option field in the the CMS with the above values.  This allows you to&#x20;
{% endhint %}

<img src="/files/aunRBVfALWkxw62rb2X0" alt="" class="gitbook-drawing">

Reference from&#x20;

wfu-gallery-layout-config="x"&#x20;

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

## Designer Controls&#x20;

* Row height&#x20;
  * Set fixed, e.g. `400px`
  * or, as function of width so it scales, e.g. `30vw`&#x20;
  * This is usually set on the card or image itself&#x20;
* Set images to 100% width, Fit: Cover &#x20;

## Internal Notes

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/sa5-gallery/article/simple-collage-layout-engine.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.