Filter & Search
A category filter bar and an image search field, both filtered on the server so the counts always tell the truth.
Two features in one panel, usable together or apart. Image Filter gives visitors category chips; Image Search gives them a text field. Both narrow the gallery without reloading the page.
Before you start
Image Filter needs categories. Create them in the Edit Gallery modal first, or the bar will have nothing to show. Categories →
Image Search needs text. It matches against each item's title, caption and description, so items with none of those can never be found. Fill them in while you're in the Edit Gallery modal.
Not available on two layouts
Thumbnails and Perspective build their own item model, so the Image Filter & Search panel isn't shown for them.
Image Filter
Turn on Image Filter in the inspector's Image Filter & Search panel.
| Control | What it does | Default |
|---|---|---|
| Filter Style | Minimal (plain text chips), Button (filled buttons), Dropdown (a select — the right choice when there are many categories or on a phone). | Minimal |
| Display Count | Show how many images each category holds. | Off |
| Show 'All' | Include an "everything" chip. | On |
| Label for 'All' | Its text. | All |
| Gap Between Filters | Space between chips, responsive; px / % / em; 0–60. | 16 px |
Empty categories never appear
A category with nothing in it is dropped from the bar — a chip that can only produce an empty gallery is noise. So you can create categories freely and only the populated ones reach visitors.
Image Search
Turn on Image Search in the same panel.
| Control | What it does | Default |
|---|---|---|
| Search Bar Style | Minimal (an underline), Boxed (a bordered field), With Button (field plus a submit button). | Minimal |
| Placeholder | Show placeholder text. | On |
| Placeholder Text | Its words. | Search |
| Width | Field width, responsive; px or %. | 25 % |
"With Button" changes when search runs
Minimal and Boxed search as you type, a moment after each keystroke. With Button searches only on submit — clicking the button or pressing Enter.
That's not cosmetic. On a very large gallery, search-as-you-type means a request per pause in typing; the button gives the visitor one deliberate search. Pick the preset that matches the size of your gallery.
How matching works
The query is split on spaces and every word must match something in an item's title, caption or description. So red barn finds items mentioning both words, not either — which is usually what people expect and always what makes a long query narrow rather than widen the results.
Using both together
When both are on, three extra controls appear and the single Alignment control is replaced:
| Control | What it does | Default |
|---|---|---|
| Filter & Search Orientation | Inline (side by side) or Stacked (one above the other). | Inline |
| Filter & Search Gap | Space between them, responsive. | 16 px |
| Justify Filter & Search | Start, Center, End, Space Between, Space Around, Space Evenly. | Start |
A common arrangement: Inline, Space Between — chips on the left, search on the right.
Stack them on mobile
Inline chips plus a search field is a lot for a 375px screen. Stacked with a Dropdown filter style is the combination that survives a phone.
Styling
The Style tab covers three areas.
The filter chips. Typography, then a Normal / Hover & Active state switcher for text colour, background and border, then a state-independent Border Radius.
The active chip uses the Hover styling
There are two states, not three — hover and active share one look. That keeps "this is the one you're on" and "this is the one you're pointing at" visually consistent.
The filter area. A popover holding the area's Background Type, Filter Area Width (Full Width or Hug Content), Border, Border Radius and Inner Padding — plus a Margin below it, which defaults to 16 px at the bottom so the bar doesn't sit flush against the grid.
The search field. Placeholder typography and colour, then a Normal / Hover switcher for the search icon colour and the field's line colour and width, then Inner Padding.
Filtering with pagination
This is where a lot of gallery plugins quietly get it wrong, so it's worth stating plainly.
Filtering happens on the server, against the whole gallery:
- Unpaginated gallery. Non-matching tiles are hidden in place. No request is made, and measured layouts (Justified, Masonry) repack so no gaps are left.
- Paginated gallery. The filter is applied to the entire set, then that filtered set is paged. So Weddings means all your wedding photos, paged — not "the wedding photos that happened to be on page 1".
The counts on the chips are computed the same way, so a chip reading Weddings (23) gives you 23 images.
Things worth knowing
Filtering is free. Category membership is stored with the gallery, so filtering is an in-memory pass — no database queries, however many categories you have.
Random order and filtering coexist. With Random order on, filtering re-pages the filtered set in the same shuffle the visitor started with, rather than re-dealing.
Both work without a category. Search works with no categories at all; the filter bar works with no search. They're independent.
Troubleshooting
The filter bar is empty or missing. The gallery has no categories, or none of them has any images in it. Open the Edit Gallery modal and assign some.
Search finds nothing. The items have no title, caption or description to match. Add text in the Edit Gallery modal.
Search doesn't run until I press Enter. That's Search Bar Style → With Button. Switch to Minimal or Boxed for search-as-you-type.
Neither panel appears. You're on Thumbnails or Perspective.