How to Use Filters in Modula

Depending on the number of images in your photo galleries, it might make sense to allow your website visitors to easily sort through them. When using Modula, this can easily be done using the built-in filter functionality. At the end of the article you see what settings are available and demos for each one.

To create filters simply use the edit area above and click add new filters as required until you’ve added all of the filters that you wish to use for this gallery.

Let’s use ‘sunflowers’, ‘dark’, ‘fruits’, and ‘clouds’ as an example of four filters. Now, as you can see above, we’ve already created the filters, but we haven’t assigned any images to them so they’ll still appear empty at the moment.

How to assign filters to individual images

To assign a filter to an image all you need to do is click the edit icon to the left of the image delete button and then scroll all the way down to the ‘filters’ section as shown below:

You can add as many filters or no filters to an image. If you do not add a filter to an image then it will only appear in the ‘All’ filter on your website’s front-end view of your Modula gallery.

As you can see, now when we click ‘sunflowers’ on the front-end of our website, Modula will only display the images that have been assigned with that filter respectively. 

How to add filters to multiple images (using the bulk edit option)

You may find Modula’s bulk edit option easier when you’re trying to add filters to a large number of images at the same time – here’s how!

When you click the bulk edit button in the bottom right-hand corner of the gallery edit area, you’ll be taken to the screen shown below:

Here you can easily select the images you wish to apply a filter to by clicking or by alternatively using the Select All, Deselect All, and Toggle Selection buttons to the left.

Then proceed to select the filters you wish to add to all of the selected images on the right, as shown below:

And, simply click on the suitable filters so you can hit save!

Last but not least do not forget to update your gallery so the changes are saved!

The ‘Filters’ area has a bunch of options to customize your filters. Here are all the options below:

• Drop-down filters – if turned on it will display filters on the page as a drop-down menu.
• Reload page on filter click – when turned on it will reload the page on each filter click.
• Hide ‘All’ filter – turn this on to hide the ‘All’ filter that displays before your first filter. The ‘All’ filter displays all images.
• Text for ‘All’ filter – enter here the text you want to replace ‘All’ with.
• Filter link style – over 20 filter styles to replace the default one. You can hover over the live preview to see the new style in action. The filter styles are: 

1. Antonio
2. Ariel
3. Caliban
4. Ceres
5. Cordelia
6. Ferdinand
7. Francisco
8. Horatio
9. Invulner
10. Iris
11. Juno
12. Luce
13. Maria
14. Miranda
15. Prospero
16. Sebastian
17. Shylock
18. Stephano
19. Tantalid
20. Trinculo
21. Valentine
22. Viola

• Filter link color– change the color off the filter text/link
• Filter link hover color – the color the filter has on hover 
• Default active filter – this is the filter that will be active when the gallery is loaded on the page. It’s by default set to ‘All’ so visitors can see all images. It can be switched to another filter and then the gallery will load filtered by the select option.
• Filter positioning – from here you select the position of your filters. They can be:

1. Top
2. Bottom
3. Left
4. Right
5. Top and bottom
6. Left and right

• Filters text align – the alignment of the filter text. It can be:

1. Center
2. Left
3. Right

• Collapsible filters – if turned on will collapse filters (works only on mobile). You can also change the collapsible action text from the default one: filter by.
• Mobile dropdown filters: Check to enable Dropdown Filters on mobile only.