Divi filterable media gallery

Feb 27, 2021 | Divi Media Gallery, Tutorials | 0 comments

Display a filterable grid of media with masonry layout

In this tutorial, we will showcase the filterable capabilities include in the Divi Media Gallery plugin. It is possible to create a filterable grid of media items and display the grid in a masonry layout using our module.

  1. First, you will need to add the Divi Multimedia Grid module to the page.
  2. Open the module settings and under the Content Tab -> Content Toggle, click on the Select Media Items button.
  3. Select the media items you want to display, it is possible to select any media type.
  4. Then to activate the filterable functionality go to Content Tab -> Filters Toggle and activate the Filter Media Items option.
  5. Activate the Filter By Taxonomies Terms option.
  6. And on the Filter Taxonomies field select which taxonomies you want to show filter buttons, the module will show then filter buttons including all terms of all selected media items.

We are working to include other options to filter by, but for now, it is only available to filter by taxonomies terms. Divi Multimedia Grid registers two taxonomies for the attachment post type (items on the media library), Media Category and Media Tag, and you can set terms to each attachment from the media editor page. But you can register your own taxonomies for the attachment post type using a plugin like CPTUI or use code on your child theme functions.php file, in either case, we are more than happy to help you set up your use case just send us a message.

And that’s it. Now you have a filterable grid of media items. You can change the number of columns and gaps for each screen size on the module settings Desing Tab -> Layout Options.

Update: As of version 1.1.1 we have added options to changes the names of the (All) button for each taxonomy, you can add a comma separate string of texts with the (All text) for each taxonomy on the Filter All Texts option.

Update: As of version 1.1.2 it is also possible to select multiple buttons on each taxonomy filter level. And select the relation between those selected filters on each level and the relation between the taxonomy levels. For that, you can use the new Multiselect, Multiselect Relation, and Multilevel Relation options.

See the live demo here.


Submit a Comment

Your email address will not be published.

Share This