# Filter

Allows you to set, unset and style the `gallery` block's filter bar.

## Settings

The Filter property displays a text field above the Gallery or Galleries. It makes it easier to display a gallery or display all galleries.

### Display single gallery

<figure><img src="https://lh4.googleusercontent.com/XtK6kYyHH0E6MKDkXsG_eVaGuCKuQVfVF2mFEe-0a0kviykv43ilOQqpSQaKglVOEokdv2UjfUWyeVP260zzqAW1p-z_ILxQJ5Ty5S8WJAhiAv4uOeTwQ6ak97-xGWER8tW8TAln57Uh52AlsNDJkGeYLBMxKZ6rySrXatD_uObDrbTy7WE7M8RYnPSgYg" alt=""><figcaption></figcaption></figure>

<details>

<summary>Add filter bar</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Filter tab
5. Navigate to the Settings tab
6. Toggle Active

</details>

<details>

<summary>Remove filter bar</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Filter tab&#x20;
5. Navigate to the Settings tab
6. Untoggle Active

</details>

### Display all galleries

![](https://lh3.googleusercontent.com/5UxdEadnAPDLMmep_0R3kbQWJDdn8bhS9BWBWOuhXjzdAa6L08Kzcl6y07R2b-IOYK28iV-fsT0CNHXKC0Wfv2FqK4H59Xc8ivcoQ76FNlQ-rFAAudpKeK4Apwu0Jexgf5ai8eadZthVQt58XLzJhou1QlYzH45KcyecS1qDlv5P7FeN_hckdoPyZxzsoQ)

<details>

<summary>Activate Filter "All"</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Filter tab
5. Navigate to the Settings Tab
6. Toggle Filter "All"

</details>

<details>

<summary>Deactivate Filter "All"</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Filter tab
5. Navigate to the Settings tab
6. Untoggle Filter "All"

</details>

### 'All' label

The 'All' label property allows you to name the collection of Galleries rather than the default 'All'.

{% hint style="info" %}
The "All" label needs the filter bar to be enabled to work.

{% endhint %}

![](https://lh6.googleusercontent.com/LO9TBdjP-d-L2fNjiL_SZplLCaJbzX9e5gkpfi0l4jUUQRPZXwJqbwuFc6wVX5YqqXGMqCE5uOYEvdJQwzB6sQg6KoHk4ISmGTRg0YZgeH1C14MqRVrK6aItkdZeMHWNYM2ASKKHojjR5mOT3Ze8GsY0O0T8Oalbi2AQ0jXis-AMWih0vs7HFp4fMjju4A)

<details>

<summary>Name 'All' Label</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Filter tab
5. Navigate to the Settings tab
6. Name 'All' Label

</details>

<details>

<summary>Remove 'All' Label</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Filter tab
5. Navigate to the Settings tab
6. Click dot to remove 'All' Label name

</details>

## Layout

Allows you to style the layout of the Filter Bar.

![](https://lh5.googleusercontent.com/aYjI2hQJByhhSvY8JK6U_bIztQp0eUqML8B3XUddVELT4WpLw29mU0LrRglOK4v5qr0B25z3SKijAAVv7k44PTca5MRLHXFz-Li8bQ8PsIFW0-jmKlqc5AhYeRY2LYqqEELn5-LaRqSI_77Es97h_yHB8S0zEi-smc5-KSeVNIHhvdLqyBTg6_C6-7EQfA)

### Spacing

The Spacing property adjusts the spacing between each Gallery name in the Filter Bar.

![](https://lh3.googleusercontent.com/dYUayMeKGCNQlGYRL_uZsrgGSDHJJbpepZCpG33NftgarNq1I3vXxDrXGfCuKCnYOqWE9cAthgkpPGGB-vOMgyzpeRn_q2yWSE42zrfBVJ3I238A3aQ_vtJTZqB9PfWikjdQ_7u6rf9CkThy3adDqyHZG-tKqE-b6XkAF0nyzILpdqnLiXDCZoxKE3nMkw)

<details>

<summary>Adjust spacing</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Filter tab
5. Open the Layout tab
6. Adjust Spacing

</details>

<details>

<summary>Reset spacing</summary>

1. Select a Cwicly Gallery block
2. Select a `gallery` block
3. Open the Block Inspector
4. Navigate to the Primary tab
5. Open the Filter tab
6. Open the Layout tab
7. Click dot to reset Spacing

</details>

### Gap

The Gap property adjusts the distance between the Filter Bar and the Gallery Block.

![](https://lh3.googleusercontent.com/grW-sRfk3azbh7STKqTVM8SFmWRVlCP1iweOaggrEZvheGDyxIE1_C_LPmtdMo9_jIU6-a9X_H5SlIXOF1-ry5kwOU6bkeM38tXL37D4LkWSSicZDfVmv4biTGmeT84eCcLnP7LDtfXIhkuPH2nSa_ByClCe-LvDMoPpZndtyR5WYMHhHHK8_b-w-49h1g)

<details>

<summary>Adjust gap</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open Image Style tab
5. Navigate to the Filter tab&#x20;
6. Open the Layout tab
7. Adjust Gap

</details>

<details>

<summary>Reset gap</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open Filter tab
5. Open Layout tab
6. Click dot to reset Gap

</details>

### Direction

The Direction property establishes the main axis within a flexbox container and includes row, column and reverse.

![](https://lh3.googleusercontent.com/k9H-yS28v2xY-8OD5SWmnD-zsumBTYSK85nE-5NwZqEjmI5j-uuqFHRW3bchiv4XeOqtZ1Ewbz6FOGqW0YOMb-WFpzGxn6FI8cNKPtKBxlH9p0e_BrdF1jtS9fFBe1haoG1Lx2oQKiTaiSDnxDNRhbewrFOezKLyEvPA4hGHbihav7TARZfpB2ANLAL3mw)

<details>

<summary>Modify direction</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open Filter tab
5. Open Layout tab
6. Find the Direction property
7. Click on the appropriate direction options (row, column, reverse)​​

</details>

<details>

<summary>Reset direction</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open the Filter tab
5. Open the Layout tab
6. Find the Direction property
7. Reclick selected option to reset direction

</details>

### Align

The Align property allows you to specify the vertical position of the Filter bar contents, such as flex-start, center, flex-end, space-between, space-around.

![](https://lh5.googleusercontent.com/G-rIumfYC5KfeJpHgV2Oa_oID-KBITUi7V59msEZnVcLVCFhS8hmVoGQ27L_q49nxlcNUrWvY9nEn5vveV-45NfXQ37FwnPtb4BPPPI1qflB_t1AiGWNHt_RAIIGkUy8qEAPt0ySjE2SbnAIExJ_WesY3upg2AGw-qo29sf5wIlso0-qbYCcEorGaA6XSg)

<details>

<summary>Modify align</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Open Filter tab
4. Open Layout tab
5. Select desired value (flex-start, centre, flex-end, space-between, space-around)

</details>

## Typography

The Typography property allows you to modify the Filter Bar typography.

![](https://lh5.googleusercontent.com/vMpCF-WUwsP2ozuJ8VVjIsZH2beFgS29sNEEcLLC398whMKW82OrPd5HUoGQE1U2cDFS2rkhnk2zs77gwkyj_TCUfe06AHWNxsc_Vi9HdupqnWcuatghomRLYgGAOOaMX1FlO5sSY7rlkN-4RRWaI1ul9tLHcP5ITzgNuHbEMYacD3CipuDNTIncVbdFLQ)

{% content-ref url="/pages/-MS3EZQd9uSNwpddRPpy" %}
[Typography](/design/typography.md)
{% endcontent-ref %}

## Colors

![](https://lh4.googleusercontent.com/wSSdqThZp8RmGn2Z8Z5NGnpvQXu84N73mNR9K9qZfzyMPpxqPaG4CpMxTjYqES_KmTEfdLUd9DP5uEsNI300SMZtLKf0xN4QLNtysKOrOtkZAn9ojOqgzxG1JYHTPYDjIio878jwLZsx6l8c1cPv4OXhiKG1fPEiRTW4gkcU62_z3P8Ht0XB9l5EgxphFw)

{% content-ref url="/pages/-MS3NePyz1N3xpgVuNde" %}
[Text Colour](/design/typography/text-color.md)
{% endcontent-ref %}

{% content-ref url="/pages/-MS3NhW0KLv7CIqklatT" %}
[Link Colour](/design/typography/link-color.md)
{% endcontent-ref %}

## Spacing

The Padding property allows you to specify the space that separates the Gallery Image block from its border on all sides.

{% hint style="danger" %}
Padding is not to be confused with Margin. The first adds space inside the element, the other adds space outside it.
{% endhint %}

![](https://lh6.googleusercontent.com/an9w_pZH0IV-Xfrk7EQMZzqsfCrP9EHufRVU0HSXN2szjCXjZPR8AlOIGOBORctNfD8nI0WHXI9cAj9i-YFD5Ue6X5rdOKLys-e86XHYjKCawqY22s83LO_m24FQMqtn25hmfrUjE-6MDfSoErC1MnYCeEId-ZUA8tmyZIwiUNV8H2iHQHKyEnho62_yRw)

<details>

<summary>Add padding</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open Filter tab
5. Open Padding tab&#x20;
6. Link or Unlink Padding to add space to one or all sides

</details>

<details>

<summary>Remove padding</summary>

1. Select a `gallery` block
2. Open the Block Inspector
3. Navigate to the Primary tab
4. Open Filter tab
5. Open Padding tab
6. Click dot to reset all linked or selected unlinked padding

</details>

## Border

Adds chosen border styling to the gallery block's filter bar.

![](https://lh6.googleusercontent.com/an9w_pZH0IV-Xfrk7EQMZzqsfCrP9EHufRVU0HSXN2szjCXjZPR8AlOIGOBORctNfD8nI0WHXI9cAj9i-YFD5Ue6X5rdOKLys-e86XHYjKCawqY22s83LO_m24FQMqtn25hmfrUjE-6MDfSoErC1MnYCeEId-ZUA8tmyZIwiUNV8H2iHQHKyEnho62_yRw)

{% content-ref url="/pages/-MS3EJxGwz5H7EVdOkqG" %}
[Borders](/design/borders.md)
{% endcontent-ref %}


---

# Agent Instructions: 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://docs.cwicly.com/blocks/gallery/filter.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.