Back to contents

JetEngine: How to Create a Gallery Using Dynamic Repeater Widget

useful information

In this tutorial we present the way how to display a gallery using the Dynamic Repeater widget.

JetEngine plugin allows creating a gallery and displaying it using unique macros. With the help of the Dynamic Repeater widget you will be able to show your images on the website. We are going to present an example based on the displaying images from the repeater meta field of the Tour custom post type.

Creating and displaying a gallery

1 Step – Creating a meta box
First of all, we go to the JetEngine > Meta Boxes section in the WP Dashboard and create a meta box with repeater meta field.

gallery repeater meta field

2 Step — Enriching a repeater field

Then, open the Tour custom post type and enrich the repeater field of the post with the media files.

fill in the repeater fields

3 Step — Creating a listing with JetEngine

Now we create a listing in the JetEngine > Listing block in the WP Dashboard. Specify the Listing source: Posts and the From post type: Tour.

tour listing

4 Step — Using a Dynamic Repeater widget

When Elementor editor opens, we find the Dynamic Repeater widget and drop it in the appropriate section on the page for displaying the images from the gallery repeater field.

dynamic repeater widget

5 Step — Setting the widget

In the Content block of the widget’s settings we select the created repeater field in the Source field and insert the %gallery|img_gallery_grid% macros in the box below specifying our name of the repeater meta field (repeater_gallery) instead of the gallery.

dynamic repeater widget settings

6 Step — Showing a gallery on the page

After that, we proceed to edit the page, where we would like to show the gallery, in Elementor and add the Listing Grid widget on the page. In the Listing option we choose the created listing: Tour listing and apply varied style settings.

listing grid widget

7 Step — View at the frontend

Save the changes and let’s look at the page at the frontend.

listing at the frontend

Great! Now you know how to showcase a gallery with the help of JetEngine Dynamic Repeater widget.