JetEngine Gallery Image Slider in Bricks

This Pro tutorial provides the steps for populating the images from a JetEngine Gallery-type of custom field into a Slider (Nestable) Bricks element's query loop.

Step 1

Go to JetEngine → Meta Boxes.

Add a new meta box for your post type having a Gallery field.

Step 2

Edit your posts and populate the gallery for each.

Step 3

Create and edit the single template for your post type.

Add a Section and inside its Container, a Slider (Nestable) element.

Delete Slide 2 and Slide 3.

Select Slide 1 and turn on query loop.

Set Post Type to Media.

For showing the gallery image (whether as source of an Image element or as background), use:

{post_id}

For showing the gallery image's title, use:

{echo:get_the_title({post_id})}

For other image data, refer to Media File Attachment Data in Bricks tutorial.

Step 4

Let's add a custom PHP function that returns an associative array of gallery image IDs and the count of the same.

We shall use the count later with the dynamic data's :array_value filter to ensure that the Section gets output only if there is at least 1 image in the gallery.

Add the following in child theme's functions.php (do not include the opening PHP tag if adding near the end) or a code snippets plugin:

This is a BricksLabs Pro tutorial.

For full access login below or create your BricksLabs Pro account

Instant access to 390+ Bricks code tutorials with BricksLabs Pro