2nd Feb '26
/
0 comments

How to add a Class to all Images in Bricks Galleries

Images output by Bricks Gallery have these classes by default (generally):

image bricks-lazy-load-isotope bricks-layout-inner css-filter

When using Perfmatters' Lazy Loading, Gallery images will collapse into each other.

Targeting the Gallery images using the default classes is not a good idea because they are generic.

This Pro tutorial shows how the bricks/element/settings filter can be used to add a custom class of bricks-gallery-image to fix the above problem.

After adding the PHP code and specifying our custom class (w/o the dot at the front) in Perfmatters' settings,

:

After implementing the tutorial, Gallery images will have these classes in the frontend:

image bricks-lazy-load-isotope bricks-layout-inner css-filter bricks-gallery-image

Add the following in child theme's functions.php (w/o the opening PHP tag) or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 618 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Filtering a Bricks Terms query on Term archive pages

Filtering a Bricks Terms query on Term archive pages

On product category archives, how to show product type names but only those that the current product category has.
How to Add a Custom Control Field to an Element in Bricks

How to Add a Custom Control Field to an Element in Bricks

In this tutorial, we'll learn how to add a custom control field to an element and dynamically change a CSS property inside the builder. Introduction…
Categories:
Tags:
Pro
How to programmatically add a class to an element in Bricks

How to programmatically add a class to an element in Bricks

This Pro tutorial shows how a dynamic class can be added to a query loop element in Bricks programmatically. Let's take an example where posts…
Pro
Conditionally Hiding Bricks Filters based on Select Filter Value

Conditionally Hiding Bricks Filters based on Select Filter Value

How show or hide Bricks' filter based on the selection made by another filter.
Categories:
Tags: