How to Design Filterable Image Gallery?

Image Gallery Widget provides the feature to create a filterable gallery. Here are the steps –

Step 1 –  Enable Filterable Image Gallery option.

• This option is available only for Grid / Masonry layout.
• The setting can be found under Content (tab) > Grid / Masonry > Filterable Image Gallery.
• Enabling this option will display all categories created for images. See how to create categories in the next step.
• “All” Tab Label is a label to the main category, where all images in the gallery will be displayed. Edit it if required.

Step 2 – Set categories for Images.

• The category names that are set to images will display as Filterable Tabs title.
• In above screenshot BRANDING, DESIGN, PHOTOGRAPHY, WEB are categories.
• You can directly assign categories to the image.
• 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 with the settings under Style (tab) >  Filterable Tabs.

Manage Filterable Tabs on Responsive Devices

Under Grid / Masonry / Justified tab, you get an option for Responsive Support. Enabling this option will display all Filterable Tabs as a dropdown on the responsive devices. If you have a number of filterable tabs, enable this option. It will stack all tabs and display them as a drop-down.

Note: If you have enabled a Filterable Gallery for justified layout, and not able to see images under filterable tabs. Then check if Last Row Layout option for justified image gallery is set to Hide. Set it to Justify to display images under filterable tabs.