How to use gallery filters in WordPress with Modula

Gallery filters let visitors sort a large WordPress gallery by subject. You create the filters in the gallery, give each image one or more of them, and a filter bar appears above the gallery.

Clicking a filter shows only the images that carry it. Images without a filter show only under All.

Note: Filters need Modula Pro, and every plan includes them. They are not available for the Freeform, Parallax, BnB, Slider, Showcase, Story and Video gallery types. See Gallery Types.

Create the gallery filters

1. Go to Modula → Galleries and open your gallery.
2. Click Filters in the left rail.
3. Type a name in New filter.
4. Click Add.
5. Repeat for every filter you need, for example Landscapes, Architecture and Street.
6. To remove a filter, click the × next to its name.

The changes are saved on their own. While the Filters section is open, the preview shows only the filter bar and a box marked Gallery. This lets you see where the bar sits. Open any other section to see your images again.

Give filters to images

Now tell Modula which images belong to each filter. You can do this one image at a time, or for many images at once.

One image at a time

1. Click an image in the preview.
2. Click Edit image on it. The image panel opens on the left.

3. Under Filters, click + Add and pick a filter. Add as many as you like. Click × on a filter to take it off the image.

   

4. Use the arrows at the top of the panel to go to the next image.

Many images at once

Use the small bar above the preview. Select multiple changes it so you can pick the images and give them filters in one table.

1. Click Select multiple.

2. Click the images in the preview. The filter bar is hidden while you select.

   The bar above the preview now shows Done selecting and Select all. It also shows how many images are selected, with Clear next to that. Last comes Bulk edit with the number of images, for example Bulk edit (3).

   

3. Click Bulk edit (3). To work on every image instead, click Bulk edit without selecting anything.

4. In the Filters column, click + Add on each row and pick the filters.

   

5. Click Save all and close.
6. Click Done selecting.

Note: No button gives a filter to all selected images in one click. You pick the filters row by row in the Filters column.

For more about the table, see how to bulk edit your images.

Filter bar settings

Once your images have filters, you can change how the filter bar looks and works. You find these settings in the Filters section.

• “All” label: The text of the filter that shows every image. It is All by default.
• Show the filter bar: Turn it off to hide the bar while you keep the filters on the images.
• Alignment: Inherit follows your theme. You can also pick Left, Center or Right.
• Where the bar sits: Top, Bottom, Left, Right, Top and bottom or Left and right of the gallery.
• Selected by default: The filter that is active when the page loads. Leave it on All to show every image first.
• Show as a dropdown: Shows the filters as a drop-down list instead of a row of links.
• Hide the All option: Removes the All filter from the bar.
• Show image count on each filter: Shows how many images carry each filter, for example Landscapes (4).
• Color and Color on hover: The color of the filter links.
• Collapse on phones: On phones the filters hide behind a button, which visitors tap to open them. Button text sets its label, which is Filter by by default. Switch the preview to the phone view to check it.
• Dropdown on phones: Shows the filters as a drop-down list on phones only.

CSS is the code that styles a web page. To change the font or spacing of the filter links with CSS, see how to add custom code to Modula filters.