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..

Bricks Query Loop – Posts Authored by Logged in User

Bricks Query Loop – Posts Authored by Logged in User

How to display only the posts authored by the currently logged-in user in a query loop.
Categories:
How to add a layout toggle on query loops in Bricks

How to add a layout toggle on query loops in Bricks

In this tutorial, we’ll show you how to change the layout of your query loop container based on the click of an icon toggle sitting…
Categories:
Adding Icon on Gallery Images in Bricks

Adding Icon on Gallery Images in Bricks

When lightbox is enabled for the images in Image Gallery element, it is probably a good idea to add a visual indicator to tell the…
Categories:
How to Show Future Events in Bricks

How to Show Future Events in Bricks

One of the common requirements in WordPress is being able to filter the events (or could be posts of any post type) to only those…
Categories:
Pro
Meta Box Group Subfield Text’s Slug as Query Loop Item ID in Bricks

Meta Box Group Subfield Text’s Slug as Query Loop Item ID in Bricks

In the BricksLabs Facebook group a user asks: I have a metaBox custom field called 'section_title' inside a clonable metabox group called 'about_section' How can…
Categories:
Tags:
Pro
Ordering Meta Box group rows by a sub field in Bricks

Ordering Meta Box group rows by a sub field in Bricks

In the BricksLabs Facebook group a user asks: Any idea how to set the sort order of a cloneable group in the query? In this…
Pro
Posts Grouped by Taxonomy Terms in Bricks using BricksExtras’ Dynamic Table and Pro Tabs

Posts Grouped by Taxonomy Terms in Bricks using BricksExtras’ Dynamic Table and Pro Tabs

How to output any post type, with the taxonomy terms as Tab titles and posts inside tables with sortable columns.
Pro
HappyFiles Folder Images via Meta Box Taxonomy Field in Bricks Image Gallery

HappyFiles Folder Images via Meta Box Taxonomy Field in Bricks Image Gallery

How to set the source of Bricks’ Image Gallery element on a post to images in the selected HappyFiles Folder(s) via a Meta Box Taxonomy…