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

Related Tutorials..

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

How to create filters with IsotopeJS in Bricks (Part 4): AJAX filter and infinite loops, Sorting, List view and Disable animations

This tutorial will explain how to enable the AJAX filter with an infinite scroll query loop container, how to add a sorting function, how to…
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…
Pro
Dynamic Post-specific Templates in Bricks using Meta Box/ACF Select Field

Dynamic Post-specific Templates in Bricks using Meta Box/ACF Select Field

Update on 23 Aug 2023: Added steps for ACF. Bricks builder v1.8.4 introduced an pretty useful filter called bricks/active_templates that flew under the radar. This…
Pro
Current Post’s Terms in Bricks

Current Post’s Terms in Bricks

Updated on 15 Jan 2024 This Pro tutorial provides the steps to set up a grid of terms (like categories) that the current post is…
Pro
MB Favorite Posts in Bricks

MB Favorite Posts in Bricks

This tutorial explores using MB Favorite Posts in Bricks, including outputting the list of favorites via a query loop.
Categories:
How to apply a custom query var to multiple query loops in Bricks

How to apply a custom query var to multiple query loops in Bricks

In this tutorial, we'll learn how to apply a PHP filter to modify the query var of multiple query loops in a single function Introduction…
Categories: