Back to contents

JetEngine: How to Display a Video in Listing Template for Repeater Field

 

Let’s see how to showcase your videos stored in Repeater meta fields on a Single Post page in the form of a grid.

Let’s assume you have a list of videos in each of your custom posts, and you need to show them with a Listing Grid widget from JetEngine plugin. It can be done with the help of Dynamic Meta field and a Listing for Repeater. Let’s overview the details of the process.

Backend preparations

1 Step — Create a CPT with a Repeater meta field

First thing, create a Custom Post Type. In our tutorial we’ll have a CPT “Tours”. More detailed information can be found in our CPT creation tutorial.

Once you’ve got your CPT done, you need to create a Repeater meta field where we’ll embed our links for videos. A comprehensive guide is presented in this tutorial.

In this step, we’ll create a new Repeater meta field for our Touts CPT.

repeater field

So, we created a Repeater meta field type with a Text item inside. On the next stage we’ll be able to add links to YouTube videos to that Text field within the Repeater meta field. You can add as many text items as you need.

repeater field details

2 Step — Complete the Repeater fields within the posts

Now edit each of your posts in your CPT (Tours in our example), and paste the links to the videos into the Repeater fields. Here’s our example:

video in repeater

Managing the Listing Template

3 Step — New listing for Repeater source

Go to JetEngine> Listings>Add New.

new listing

Now select the Repeater Field as a source for this Listing. Fill in the next parameters attentively:

listing for repeater
  • From post type – your CPT for which you created the repeater field;
  • Repeater source contains three options:
  1. JetEngine – if you created a repeater meta field via JetEngine;
  2. JetEngine Options page – if you want to pull data from the previously created Options Page in JetEngine; 
  3. ACF — if you created a repeater meta field via ACF plugin.
  • Repeater field — specify the name of your Repeater meta field;
  • Listing item name — give a name to a Listing;
  • Listing view — select either to operate with the listing in Elementor or Blocks editor (Gutenberg).

Let’s take a look at the Elementor page Builder as a source. Keep in mind that the settings can be then handled by clicking on the gear-shaped button in the left bottom corner of the menu.

listing item settings

4 Step — Adjust Elementor Settings

On the previous step you successfully created a Listing for Repeater.  Now you’re transferred to the Elementor editor page. Let’s see how to show videos that we added to a Repeater meta field. Drag and drop the Dynamic Field widget.

dynamic field video

In the Source field, select the “Repeater Field” option. Also, specify the repeater’s meta field in the Custom meta field/repeater key field. In our example, we displayed the “video” repeater key. In order for the link we put on the backend could be shown as a video itself, we need to toggle on the Filter Field Output and select the Embed URL option. Only after those actions, the video will be displayed in an appropriate way.

dynamic field elementor

5 Step — Working with the Listing Grid widget on a Single Post template

NOTE.
Listing Grid with the Repeater listing template can be displayed only on the Single Post page

We’ve adjusted the Listing Template and it’s time to display it in the Listing Grid widget. Edit your Single template (created either in JetThemeCore or in Elementor Pro) in Elementor and drop the Listing Grid widget.

listing grid widget

Type in the name of the Listing for Repeater you previously created for the Repeater meta field and set up the number of columns, posts, and other parameters.

listing grid

To check how your Listing Grid for Repeater Listing looks on the front-end, open any Post in a new tab and see that it displays the grid of the videos added accordingly.

single post repeater listing

Wishing you good luck with your projects with Crocoblock!