Opens in a new tab
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 633 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Featured Image Fallback in Bricks

Featured Image Fallback in Bricks

This Pro tutorial shows bricks/element/settings filter of Bricks builder can be used to specify the ID of an image in the WordPress Media Library that…
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
Conditionally Excluding Elements from Bricks Editor

Conditionally Excluding Elements from Bricks Editor

In the past, we shared How to Exclude Elements from Bricks Editor. This Pro tutorial shows how specific elements can be excluded selectively based on…