Filterable Gallery

The Filterable Gallery module shows images in a grid or masonry layout. Visitors filter the images by category with no page reload. Use it for portfolios, product galleries and project showcases.

Images and filters are managed in the Media Library, not in child items. Each image supplies its own title, description and filter tags.

How to add the Filterable Gallery module

Add a section and row, then add the Filterable Gallery module.
In the Media Library, open each image and fill in Torque Gallery - Tags (Ex: Branding, Print). Separate several tags with commas. Add a Title and Description if you want a caption.
In the module, open the Content tab, go to General and use Choose Images to pick the images.
Set the layout, filter bar and pagination, then style the gallery.

Content Tab

General

Choose Images: The images that appear in the gallery.
Image Size: Thumbnail, Medium, Medium Large, Large or Full. Default is Full.
Gallery Type: Grid keeps square tiles. Masonry keeps natural image heights. Default is Grid.
Columns: 1 to 6. Default is 4. You can set a different value for tablet and phone.
Spacing: The gap between items in pixels. Default is 20.

Lightbox & Links: What happens when an image is clicked: No Link, Media File, Attachment Page, Lightbox or Custom Links. Default is Lightbox. Custom Links uses the Torque Gallery - Link field on each image in the Media Library.
Lightbox Actions: A pipe-separated list of toolbar actions: zoom|share|slideShow|fullScreen|download|thumbs.

Filter Bar

Hide Filters: Hides the whole filter bar.
Hide "All" Filter: Hides the filter that shows every image.
Text For "All" Filter: The label of that filter. Default is "All".

Captions

Hide Caption: Hides the caption overlay.
Hide Title: Hides the image title.
Hide Description: Hides the image description. On by default, so turn it off to show descriptions.

Pagination

Show Pagination: Pages through the gallery. Off by default.
Items Per Page: Default is 8.

Design Tab

Overlay: Overlay Color and Opacity for the hover effect on each image.
Image and Items: Border options for the image and for each gallery item.
Caption Text: Font styling for the title and description.
Filter Bar: Alignment, Bottom Spacing, Filter Spacing, Filter Padding, Background Color, Active Background Color, and borders for normal and active filters.
Filter Bar Text: Font styling for the filter labels.
Pagination: Alignment, Pager Padding, Pager Spacing, and Background, Text and Border colors for normal and active pagers.

Tip

Give an image several tags, for example "Branding, Web", so it appears under each category when visitors switch filters.