Design Filterable Photo Gallery with UABB

Photo Gallery module from UABB provides the feature to add filters for images. Filterable tabs will display above the gallery. Clicking on the tab will display related images. Here is the process to create filterable photo galley –

Step 1 – Enable Filterable Image Gallery option.

• This option is available only for both Grid and Masonry layout.
• The setting can be found under General > Filterable Photo Gallery.

Step 2 – Set categories for Images. These will act as Tabs title.

• The category names that are set to images will display as Filterable Tabs title.
• You can assign categories to the image from media library settings. See how to set categories for images?
• For example – If image A has assigned to categories BRANDING and DESIGN. While image B has assigned to categories PHOTOGRAPHY and WEB. Then Filterable Tabs will automatically display all 4 categories. On clicking on any of the tab will display related images.

Step 3 – Customize Filterable Tabs.

• Category names will automatically display as Filterable Tabs.
• That means if you assign 5 different categories to images, then 5 Filterable Tabs for all those categories will be created.
• You can completely customize Filterable Tabs from Style and Typography options.