Back to contents

JetEngine. How to display Media files with Dynamic Repeater widget

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

JetEngine plugin provides an opportunity to show media files on the page and allows users to download them easily and quickly with the help of the Dynamic Repeater widget. We are going to introduce you a detailed guide based on the example of the travel website, particularly how to display pdf files using JetEngine functionality.

Displaying media files

1 Step – Creating a meta box

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

tour details meta box

2 Step — Adding a 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

3 Step — Enriching a 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 the 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 the detailed information about the particular tour. Save the changes by clicking the Update button in the right corner.

filling the tour program meta field

4 Step — Creating a 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

5 Step — Setting the 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 the 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

6 Step — Viewing the listing on the frontend

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

tour program pdf file

Well done! Now you can provide users with downloadable media files with the help of JetEngine plugin.