Filterable Happy Files Gallery in Bricks Builder using WP Grid Builder

I struggled to find the perfect ‘client friendly’ solution to create an easy to maintain way of creating a filterable gallery using Happyfiles folders.

I use Happyfiles Pro on all sites since its launch. I honestly don’t know how I managed media libraries before. Clients love it too as it lets them tame the media files beast!

This solution uses WP Gridbuilder pro. I am not sure if the free version allows for this as I only use the Pro version to do the filtering.

1. Start by setting up your Happyfiles folder structure and adding your media.

2. Then create your facet in WP GridBuilder pro.

3. Edit the page where you want the filterable gallery to show, adding the following elements; section > facet > container > block (for the query) > image.

Style the container to control the gallery – I use Automatic CSS so I added the following classes to lay it our responsively:

4. Add a query loop to the block, setting the following query: > media > images.

You want to query the ‘post_id’ and set the lightbox ID to a unique value so you can scroll through images.

You then need to specify the Taxonomy as Folder (Attachment) and specify the parent folder name under Terms, include children (otherwise it will only output images in the parent folder)

5. For large galleries, it may be best to change the qty per page to 60 then add in a facet for pagination.

Note: Tony Crockford from the Inner Circle helped me with some styling as Bricks Builder can add some defaults to images. Additionally there were lots of the images on this project that were very small and I wanted them all to appear in an even grid.

Here’s the css I added to my stylesheet which made everything even:

/* replace first selector with your ID (add as class) of block and then ID of image element (add as class).brxe-image */
.brxe-enxqyq .brxe-hbgoku.brxe-image {
    min-height: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: contain;
    width: auto;
    
}

That’s it. Simple when you know how but it’s a great way for clients to easily maintain filterable gallery content just by managing content in the media library.