Help Center

How to Display a Video in Listing Template for Repeater Field

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 the JetEngine plugin. It can be done with the help of the Dynamic Meta field and a Listing for Repeater. Let’s overview the details of the process.

Backend Preparations

Create CPT with 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 Tours CPT.

repeater field

So, we created a Repeater meta field type with a Text item inside. In 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

Complete repeater fields within 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

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

Adjust Elementor settings

In 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

Working with listing grid widget on single post template

Things to know

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

That’s it; now you know how to display video in the Listing Grid with the Repeater field by using the JetEngine plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.