30th Sep '25
/
1 comment

Bricks Image Gallery element with Image limit

Update: You may want to see and follow the newer Limiting the Number of Images in Bricks Image Gallery Element tutorial instead.

In the Bricks Facebook group a user asks:

Hello, is it possible to limit the number of images from the gallery (ACF Gallery) when loading them dynamically?

For example: I have created a post type called Gallery. Here I have created individual galleries, each containing an ACF Gallery field. On the archive page, I list these galleries using a Query loop (title + ACF gallery), but I want the ACF gallery to return only 3 images on the archive page (normally the gallery has 10 or more images).

Since there is no PHP filter to limit the number of images output by the built-in Image Gallery element in Bricks, we can duplicate the element's code and modify it to add a custom image limit text input control. This Pro tutorial shows how.

If Bricks is currently active, upload the official Bricks child theme and activate it. This can be done at any time - even if the site is fully built without affecting anything.

Edit child theme's functions.php.

Step 1

Locate

/** * Register custom elements */ add_action( 'init', function() { $element_files = [ __DIR__ . '/elements/title.php', ]; foreach ( $element_files as $file ) { \Bricks\Elements::register_element( $file ); } }, 11 );

Change it to

/** * Register custom elements */ add_action( 'init', function() { $element_files = [ __DIR__ . '/elements/title.php', __DIR__ . '/elements/image-gallery-custom.php', ]; foreach ( $element_files as $file ) { \Bricks\Elements::register_element( $file ); } }, 11 );

Step 2

Create a file named image-gallery-custom.php in the elements directory having the following code:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Get access to all 610 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

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

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. Requirements Create a custom taxonomy for your…
Pro
Limiting the Number of Images in Bricks Image Gallery Element

Limiting the Number of Images in Bricks Image Gallery Element

How we can use Bricks' render_tag() as a simpler way to limit the image count in any Gallery element.
Pro
ACPT Gallery Field Query Loop in Bricks

ACPT Gallery Field Query Loop in Bricks

How we can output images from ACPT‘s Gallery field for posts as a grid using a query loop.
Categories:
Pro
Configuring Image Gallery dynamic source in Bricks

Configuring Image Gallery dynamic source in Bricks

Let's say you have a custom field created with ACF Pro of the type Gallery called "Property Gallery" for posts of "Property" CPT. In the…
Draft Status Control for Sections in Bricks

Draft Status Control for Sections in Bricks

Update on 26 Jun 2025: This is now built into Bricks since Bricks 2.0 (beta). See my tweet. Laurent Drapeau shared code in the Bricks…
Categories:
Tags:
Pro
Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Displaying Gallery of SureCart Product Images with Bricks’ Query Loop

Custom query loop for looping through SureCart product images.
Categories:
Tags: