Filterable and Sortable Gallery

How filtering and sorting change the gallery

The filter is a list of the categories your items already carry. Pick one and the gallery fetches only those items over AJAX, while the rest of the page stays put. Sort sits in the same row. It reorders what is on screen by date or by title, and both elements write their choice into the address bar, so a visitor can hand someone else the exact view they were looking at.

The alternative is one gallery block per category, or a separate archive page for each. That holds up with three categories that never change. A filter earns its place when an image belongs to two categories at once, or when people are comparing categories rather than hunting for one. The gallery above pairs both elements with Load More pagination, so the filter narrows the set and the button walks through what is left.

Categories, sort options and defaults

The filter builds its own list from the items in the block, and the Filter element itself has three settings.

• Style is Minimal by default and prints text links. Classic prints buttons, Dropdown a select, which is what the demo above uses.
• Display Count is off by default. Turned on, it prints the item count next to each name, taken from the block’s unfiltered query.
• All Button Text holds the word All. Clear the field and the All item disappears from the row.
• In a Media gallery the categories are typed into each image. They are matched by slug, so Cats and cats collapse into one.
• In a post based gallery it lists taxonomies whose name contains category, plus product_cat and jetpack-portfolio-type. Tags go into Settings, General, Filter Taxonomies as comma separated slugs, for example portfolio_tag.
• Sort offers five fixed options: Default sorting, date newest, date oldest, title A-Z and title Z-A. Its own Style defaults to Dropdown.
• Both belong to Layout Elements and both are allowed in the Start row only. That row takes an alignment of Left, Center, Right or Between, and pagination goes in the End row.

Setting up the top row in three steps

1. Open Layout in the block sidebar. The panel has three positions. Click the plus on Start, above the items, and add Filter. Its settings open in a modal that ends with a Remove Filter link.
2. Click the plus on Start again and add Sort. A position holding an element also gets an alignment dropdown. Between spreads the two over the width, filter on the left and sort on the right.
3. Click the plus on End and add Pagination. The page size is Items Per Page in Content Source, General Settings, which defaults to 6. The demo above uses the Load More type.

What a license adds to the filter row

Nothing in the two sections above needs Pro. Both elements ship in the free plugin on WordPress.org, they reload over AJAX there, and paged, Load More and infinite pagination come with them. The whole split is in the free versus Pro table, and the license tiers are on the pricing page. Four things on this row are paid.

• A Search element for the same Start position, reloading the gallery half a second after typing stops. It has its own AJAX search demo.
• AJAX Cache and Preload, on by default with Pro under Settings, General. It caches the reloads and prefetches a filter link when the pointer hovers it.
• Filter by author and by publishing date range. These are query conditions deciding which items the block holds, not something the visitor clicks.
• The infinite scroll extras: hold the first automatic load until the button is clicked, pause after every 2 to 20 pages, and a Threshold Distance of 10 to 800 px, 400 by default.

Questions from support about filters

Why does the filter show only All?

Because no term qualified. In a Media gallery that means no image has categories yet. In a post based gallery it means no term of a category-like taxonomy has published posts. Empty terms are dropped, and when nothing survives the filter is not printed at all.

Can visitors link to a filtered view?

Yes. Filter, sort, search and page all sit in the address as vp_filter, vp_sort, vp_search and vp_page. The Portfolio page uses pretty URLs instead. Filtered and sorted views on ordinary pages are marked noindex, so they do not compete with the page they came from.

Why does filtering take a second?

Every click fetches the new items from the server, so the wait is your server’s response time for one page. A page cache does not shorten it, because these are POST requests. Pro answers them with a page that renders the gallery and nothing else, which removes most of the delay.