Help Center

How to Display Media Files with the Dynamic Repeater Widget

How to Display Media Files with the Dynamic Repeater Widget

Continue reading this tutorial if you want to learn how to display varied media files using JetEngine Dynamic Repeater widget.

Creating Meta Box

First of all, we create the Tour Details meta box, enable it for the Tour custom post type, and set the needed adjustments in the General Settings tab in the JetEngine > Meta Boxes block in the WordPress Dashboard.

tour details meta box

Adding Meta Field

Now we add necessary meta fields by clicking the New Meta Field button in the Meta fields tab below. One of the custom meta fields is called the Tour program. We specify its label, name/ ID, and select the Field object type. In the Field type, we choose the Repeater option and add the Image repeater field.

the tour program

Enriching Meta Field with Content

Then, we proceed to edit the Tour program custom meta field of the posts included in the Tour custom post type. Click the Edit button under a certain post, and the settings window will occur right here. In the Tour Details block, we find the Tour program field and add the pdf file with detailed information about the particular tour. Save the changes by clicking the Update button in the right corner.

filling the tour program meta field

Creating Listing with JetEngine

The next step is creating the Tours new listing, which is enriched with relevant information about the tour using JetEngine dynamic widgets. We add the Dynamic Image widget for displaying the image, the Dynamic Link, and the Dynamic Field for showing the name and price of the tour.

listing

To showcase the tour program, we use the Dynamic Repeater widget. In the Content block of the widget’s settings, we select the Source “The tour program” (the name of the custom meta field) and insert the macros: <a href=%img|file_url_by_id% target=”_blank” rel=”noopener noreferrer”>The tour program </a> “, where img – the repeater field name and the tour program – the text, which will be displayed in the listing.

dynamic repeater widget

Setting Listing Grid Widget

The last step is to display the listing via the Listing Grid widget. Open the Tours page in Elementor and drop the widget to a certain section. In the Content > General block of the widget’s settings, we select the created listing in the Listing field and adjust other needed adjustments.

listing grid

Viewing Listing on Frontend

Save the changes and view the listing on the front end. Click the The tour program field, and the program will be downloaded in a pdf format.

Now you can provide users with downloadable media files with the help of 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.