6th Jun '24
/
4 comments

Meta Box Image Advanced Galleries using lightGallery in Bricks

Meta Box Image Advanced Galleries using lightGallery in Bricks

This Pro tutorial answers the question posted in the comments section of our previous Dynamic Galleries with Thumbnails and Captions in Lightbox using lightGallery in Bricks tutorial wherein the images to be shown in custom galleries using lightGallery are the ones in an Image Advanced-type of sub field inside a Group-type Meta Box field.

Each row of the Group field are to be shown as an accordion item for which we shall use BricksExtras' Pro Accordion element.

The benefit of using lightGallery over the built-in Gallery element of Bricks is that it gives us complete control with advanced features like captions inside the lightbox. When custom galleries are needed, this is the library to use.

Let's take an example where we have a tour Custom Post Type.

Tour Fields:

A specific Tour post being edited in the WP post editor:

After implementing the tutorial, on the front end:

After an image is clicked:

We shall ensure that the for each row of the Group field, gallery parent element is rendered only if the Image Advanced sub field is not empty.

Step 1

Install and activate BricksExtras.

Enable Pro Accordion module in its settings.

Step 2

Let's create a custom function that returns true or false depending on whether the Image Advanced sub field is populated or not.

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 630 Bricks code tutorials with BricksLabs Pro

Related Tutorials..

Pro
Limit the Number of Posts in a Bricks Query Loop of Relationship Type

Limit the Number of Posts in a Bricks Query Loop of Relationship Type

Updated on 12 Dec 2023 Bricks Query Loop popup does not have a control for setting the number of posts to be output when the…
Pro
Hierarchical Posts with Nested Query Loops in Bricks

Hierarchical Posts with Nested Query Loops in Bricks

Learn how to set up nested query loops in Bricks to show hierarchical posts with child posts grouped under their corresponding parent posts
Categories:
How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

How to create filters with IsotopeJS in Bricks (Part 3): apply multiple filters

This tutorial will review how to apply multiple filters to an isotope container using the IsotopeJS library‘s features in Bricks.
Pro
WordPress Posts using WP REST API in Bricks

WordPress Posts using WP REST API in Bricks

The steps to display posts from any WordPress site that has WP REST API enabled in Bricks builder using a custom query type.
Categories:
Querying Posts by Date Field to Exclude Past Events with ACPT Plugin

Querying Posts by Date Field to Exclude Past Events with ACPT Plugin

In the Bricks' Facebook group, a user asked: Meta query? What am I missing?Hi all, really need a little guidance on this one. I have…
Categories:
Pro
Conditionally outputting an element in a Query Loop based on date-type custom field

Conditionally outputting an element in a Query Loop based on date-type custom field

This Pro tutorial shows how to output an element in a Bricks' query loop only if the value of a date-type of custom field for…
Categories:
Pro
Query Loop in Bricks

Query Loop in Bricks

This Pro tutorial walks you through the steps to use the Query Loop feature in Bricks to display a responsive grid of posts using CSS…
Categories:
Pro
Dynamically Displaying Connected Content Offer Images in Bricks using Meta Box Relationship

Dynamically Displaying Connected Content Offer Images in Bricks using Meta Box Relationship

Consider the following scenario from a recent project I worked on. CPT 1: project CPT 2: content-offer Taxonomy for Projects: remodel-typeSample term names: Backyard Cottages…