How to create filters with IsotopeJS in Bricks (Part 2): Dynamic Image Galleries

This tutorial series will review how to create a dynamic filterable image gallery using the IsotopeJS library‘s features in Bricks.

Table of Contents

Requirements

  • All the settings in place from PART 1

Create a custom taxonomy for your media attachment

The idea here is to create an easy way to categorize your images. We could use ACF/Metabox/Pods/etc… in order to create a custom field and assign it to our images, but today we’ll go the CORE WordPress way using a custom taxonomy that we’ll call filter_categories.

You can use plugins such as CPT UI to create the new taxonomy, but again in this tutorial, we’ll go the WordPress way and create the taxonomy manually inside the functions.php file of our child theme. Paste the following code:

// register new taxonomy called Filter Categories

function bl_add_filter_categories_taxonomy() {
  $labels = array(
      'name'              => 'Filter Categories',
      'singular_name'     => 'Filter Category',
      'search_items'      => 'Search Filter Categories',
      'all_items'         => 'All Filter Categories',
      'parent_item'       => 'Parent Filter Category',
      'parent_item_colon' => 'Parent Filter Category:',
      'edit_item'         => 'Edit Filter Category',
      'update_item'       => 'Update Filter Category',
      'add_new_item'      => 'Add New Filter Category',
      'new_item_name'     => 'New Filter Category Name',
      'menu_name'         => 'Filter Category',
  );

  $args = array(
      'labels' => $labels,
      'hierarchical' => 'true',
      'query_var' => 'true',
      'public' => 'false',
      'rewrite' => 'true',
      'show_admin_column' => 'true',
      'update_count_callback' => '_update_generic_term_count',
  );

  register_taxonomy( 'filter_categories', 'attachment', $args );
}
add_action( 'init', 'bl_add_filter_categories_taxonomy' );

Now if you should see the new taxonomy inside your dashboard:

Let’s add some terms:

And assign each term to our images:

The Bricks Setup

The Filter Container & Buttons

Assuming all the previous DOM tree is in place, we’ll need to make some changes in order to make the filters dynamic.

Here is our new filter container structure:

As you can see, we keep the All button static the same way we configured it in the past tutorial, but we replaced the static buttons (Red, Green, Yellow) with a query loop div. The idea is to loop inside the taxonomy and create a filter button for each term inside the taxonomy. So here is the query loop settings:

And the content of each button will be the term Name:

The function needs to be inserted both as the content AND the data-filter attribute:

That should be it for the filters, you should now see them popping up inside the Builder:

The Isotope Container

Now we need to render the images dynamically. Thanks to the 1.5RC update, we can loop inside our media attachment. That’s exactly what we need. Let’s replace our static .isotope-selector items by a query loop div:

And let’s set the query loop to loop inside our attachment, but only if the image has been assigned to one of our terms. If the image has no term assigned, it will be ignored:

We are almost done with our query loop. The only tricky step is to dynamically associate the data-filter attribute with the image terms. Unfortunately, there is no Bricks function that can do that natively, so let’s create a custom function in our functions.php file:

// Get all the terms associated to each images
function bl_get_terms_from_filter_categories(){

	$term_obj_list = get_the_terms( get_the_ID(), 'filter_categories' );
	$terms_string = join(', ', wp_list_pluck($term_obj_list, 'name'));

	return $terms_string;
}

and echo the function inside our data-filter attribute:

Now that our query loop is done, let’s insert an image element inside it, and assign the source as the {post_id}:

And that’s it, you should now see the images popping up in the builder:

Note that in our example we added a custom caption overlay. This is totally optional, but if you’re curious to know how to do that, just remember that the caption text is the {post_excerpt} of your media query loop. So we can use a basic/rich text element and set the content to {post_excerpt} and it will return the caption text you set inside your media file.

Here is the final DOM tree of our example:

Conclusions

If everything worked, here is the result you should see on the frontend:

The cool thing is it also works great with the Image lightbox feature: if you click on any image of the gallery, the lightbox will open and you’ll be able to slide between images just like you would do with the native gallery element of Bricks. The downside is the images shown in the lightbox are not filtered by isotopeJS, it will show every image of the query loop.

I hope you liked this tutorial. Let’s catch up for the next one!

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

7 comments

  • Константин

    1.8 image request stopped working.

    • A
      David Browne

      Hi, I haven't been through this tutorial but I know that with Bricks v1.8 they changed the lazy loading slightly, try disabling Bricks' lazy loading to see if that's the cause.

  • Konstantin

    Hello, thanks for sharing your knowledge with us. Please look, I made the request correctly in Media Query Loop? Everything works, but just in case).
    I'm attaching a screenshot from the link: https://cloud.mail.ru/public/oPZy/KnLun9vdW
    (I use a translator).

  • François-Pierre Thibault

    Crazy stuff here, will try it for filtering jobs listing cpt.

    Any way to use dropdown instead of buttons?

    Thank you

    • Maxime Beguin

      Hey François-Pierre,

      The next part will be dedicated on how to apply multiple filters such as radios buttons, checkboxes, slider and text search. I usually prefer radios bottons over select fields, and checkboxes instead of multi select, but if this doesn’t fit your workflow and badly need the select field, I can integrate that as well. Let me know!

  • thanks for the tutorial - doesn't seem to work for me - clicking on one of the category buttons nothing happens - at what point should the isotope javascript be loaded - don't see any reference to it?

    • Maxime Beguin

      Hey MJ, sounds like the scripts are not correctly enqueued. Could you share a live link and describe how did you enqueue your scripts?

Leave a Reply to Maxime Beguin (Cancel Reply)