AJAX Search for Galleries

Why a gallery needs its own search field

Search puts a text field above the items. Half a second after the visitor stops typing, the gallery reloads with the items that match and the pagination drops back to the first page. The half second is deliberate, so a word typed at speed costs one request rather than one per letter. Nothing outside the block reloads, and the term lands in the address as ?vp_search=word.

The alternative is the category filter, and for a small gallery the filter wins. Six categories as buttons are faster to read than a field is to type into. Search earns its place when the collection is large enough that nobody reads the whole category list, or when people arrive knowing a word that sits in an image title but in no category name. Both share the top row in the demo above. If categories cover what you need, the filterable and sortable gallery does the same job with the free plugin.

What the field matches, and what it ignores

What gets searched depends on the content source, and two of the four sources ignore the field completely. The full table is in the Search element documentation.

• Posts, projects and any other post type go through the WordPress search, which covers title, content and excerpt.
• Media galleries are matched against the Title and Description fields in each image’s settings. Any word of the query may match, case insensitive.
• Taxonomy and social feed galleries are not searched. Leave the element out of those blocks.
• Placeholder Text is the only setting the element carries. It defaults to “Type to search…”.
• The field belongs to Layout Elements, in the Start row beside Filter and Sort. That row is what carries the alignment, Left, Center, Right or Between.
• A searched view on an ordinary page is marked noindex, follow, so result pages do not compete with the page itself.

Three steps to a searchable gallery

1. Select the gallery block and open the Layout panel. The Start position, above the items, takes Filter, Sort and Search. Click the plus there and choose Search, and its settings open in a modal.
2. Replace the default Placeholder Text with a line that names the collection. “Search 400 interiors” says more than “Type to search…” does. The same modal ends with a Remove Search link.
3. Add Filter to the Start position too if the items carry categories, then set the alignment. The alignment dropdown appears once the position holds an element, and Between spreads the two to opposite edges of the row.

Search is Pro, filtering is not

The free plugin on WordPress.org already does AJAX. Filter, Sort and all three pagination types, paged, load more and infinite scroll, fetch their items without taking the visitor off the page. Pro adds the field itself, and AJAX Cache and Preload, which speeds up the free elements too. The full table is on free versus Pro, and the licences are on pricing.

• The Filter, Sort and Pagination elements are free, and so are the vp_filter, vp_sort and vp_page parameters that make each view linkable.
• Search is the one element in that row a licence pays for.
• AJAX Cache and Preload is a Pro setting on the General settings screen, on by default once the licence is active.
• Pro carries the free plugin inside it, so you install one plugin rather than two.

Search questions from support

Why does the search take a moment to update?

Each pause in typing sends a request to the server, and the wait is your site’s normal time to build a page. A page cache does not shorten it, because these are POST requests. AJAX Cache and Preload answers them with a stripped page that renders only the gallery, keeps the response in the browser for the visit, and fetches the next page before anyone asks for it. The note on why filtering takes time covers the same delay on the free elements.

Can visitors link to a search result?

Yes. The term sits in the address as ?vp_search=word, and filter, sort and page carry parameters of their own, so any state of the gallery is a URL somebody can send on. Open one in a new tab and the gallery loads already searched. The FAQ on linking to a filtered view lists all four parameters.

How many results fit on one page?

The same Items Per Page as the unsearched gallery, set in Content Source, General Settings. It defaults to 6, and the masonry demo above is set to 7. All Items puts every match on one page, which disables the pagination in practice. Where Items Per Page lives covers the Portfolio page, which takes its number from the plugin settings instead.