Dynamic Repeater Widget Overview
This overview explains the settings of the Dynamic Repeater widget from the JetEngine plugin and how it can be used.
The Dynamic Repeater widget helps display the data of a “Repeater” meta field for posts, terms, users, Custom Content Type (CCT) items, options page, ACF “Repeater” field, or Query Builder. The widget also offers HTML formatting options for customizing the layout.
For example, if there is a “Repeater” meta field in a “User” Meta Box, a Dynamic Repeater can be used in the Listing for users or on the Single User Profile Page.
Source
The first Source field in the Dynamic Repeater widget is used to select a “Repeater” meta field to display in the widget. In the corresponding selector, the repeater meta fields are divided by the source: posts, taxonomies, CCTs, users, ACF fields, options, and Query Builder.
Item Format
The Item format field defines the layout of a repeater item using HTML, combining static content with dynamic values.
Dynamic values are inserted using the “Repeater” fields macros, which are the field names wrapped in percentage signs — e.g., %text_rep%, %website_link%, and %media_rep%.
These macros can be used as the Item Format and combined with HTML tags (e.g., <span> or <div>).
Other HTML tags, attributes, or inline styles can also be used as needed.
For example, the %media_rep% field stores an image ID. On the edit post page, it shows an image, but in the editor, it displays the ID number.
To display the actual image, the macro should be wrapped in an <img> tag, and additional attributes should be used, like src with helper macros to render the image properly.
The JetEngine plugin provides a list of special macros with certain functions.
Macros for media
%media-field|img_url_by_id% — a macro that transforms the ID of an image into the URL of an image.
For the %media_rep% field, the result is %media_rep|img_url_by_id%.
It will provide a link to the image, which can be used as a source for HTML’s <img> tag.
The full result is <img src=”%media_rep|img_url_by_id%”>, which renders the actual image.
If the “Media” field in a “Repeater” field has “Media URL” as a Value format, the macro of the media field in the <img> source can be completed like this:
<img src=”%media_rep%”>
%media-field|img_alt_by_id% — displays an alternative text for an image. This macro can be used in addition to the <img> tag that outputs an image:
<img src=”%media_rep|img_url_by_id%” alt=%media-rep|img_alt_by_id%></div>
%media-field|file_url_by_id% — displays the link of the attachment by its ID. It can be used for a “Media” meta field with the “Media ID” Value format.
This file can be downloaded using the following snippet:
<a href=”%file-repeater|file_url_by_id%” download>Download the file!</a>, where “file-repeater” needs to be substituted with the required meta field name.
On the front end, the file will be downloaded by clicking on the link.
Macro for gallery
%gallery-field-name|img_gallery_grid% — macro that renders multiple images from a “Gallery” meta field of the “Repeater,” where “gallery-field-name” should be changed to the “Gallery” Name.
The output for the “Gallery” meta field with the “Media ID” Value format will be like this:
%gallery_rep|img_gallery_grid%
Macros for posts
%post_id|post_url_by_id% — retrieves the URL of the post by its ID from a “Posts” meta field.
This macro in a <a> tag creates a link to a post from the “Posts” meta fields:
<a href=”%posts_rep|post_url_by_id%”>%posts_rep|post_title_by_id%</a>
%post-field|post_title_by_id% — allows getting the name of the post by its ID. It can also be used for the “Posts” meta field unless a Multiple switcher is enabled in the “Posts” meta field.
In the <a href=”%posts-repeater|post_url_by_id%”>%posts-repeater|post_title_by_id%</a> snippet, the %posts-repeater|post_title_by_id% macro is used to show the post title as a Label of a post’s link.
%post-field|post_link_by_id% — an alternative to the previous two macros. The macro allows getting the linked title of the post.
%post-field|post_titles_by_ids% — gets the titles of posts from the “Posts” meta field with the Multiple toggle activated.
Macro for dates
%date-field|format_date% or %date-field|format_date(F j, Y)% — output a date in the Dynamic Repeater widget, where “date-field” is the name of the date/time/datetime meta field in the “Repeater”, and “F j, Y” is the date format, which can be changed according to the needs.
The full list of date formats can be found in WordPress documentation.
Macro for checkbox values
%checkbox-field|render_acf_checkbox% — helps display the value from the ACF “Checkbox” meta field.
The “Checkbox” meta field values from the JetEngine plugin can also be displayed if the Save as array toggle is enabled.
The “Checkbox” field values are shown after writing the name of the “Checkbox” meta field in the macro.
Macro for embedding a URL (video)
A video can be displayed by its link saved in the “Text” field.
Currently, we recommend using the Dynamic Field widget.
The “Repeater Field” Source should be selected, and the name of the “Text” meta field should be entered in the Object field / Meta field / Repeater key / Component prop bar.
To display the link as a video, the Filter field output should be enabled, and the “Embed URL” option should be selected as the Callback. After those actions, the video will be displayed appropriately.
These were all macros for the Dynamic Repeater’s Item Format field to display data in various formats.
Macro for icons
Icons can be selected with the “Iconpicker” meta field.
<i class=”%icons_rep%”></i> helps to show the icon. The ‘icons_rep’ should be replaced with the meta field name.
Other Settings
The other settings in the Dynamic Repeater widget are as follows:
- Item HTML Tag — allows selecting an HTML tag that wraps a repeater item in the markup. The options are “DIV,” “tr,” and “li.”
- DIV — a tag that defines a division or a section in an HTML document;
- tr — a tag that defines a row in an HTML table. This tag should be selected when items in the Dynamic Repeater widget need to be shown in a table format. It can be used together with the Before Items Markup and After Items Markup options;
- li — defines a list item. This tag should be selected when items in the Dynamic Repeater widget are to be shown in a list format. Like the <tr> option, it can also be combined with the Before Items Markup and After Items Markup settings.
- Items delimiter — a field that allows adding an HTML tag or a character that separates the items;
- Before items markup and After items markup — fields that allow adding HTML markup before and after the items.
For example, to build an unordered list, the “li” Item HTML Tag should be selected, and opening <ul> and closing </ul> tags should be entered in the Before Items Markup and After Items Markup text areas, respectively.
Another example is for repeater items in a table format. The “tr” tag is selected as an Item HTML Tag, and the <table> and </table> tags are added as the Before items markup and After items markup.
In the Item Format field, <td> and </td> tags are also added to define which fields should be presented in the table data cells.
- Add counter to repeater items — if enabled, each repeater item will have a consecutive number assigned to it;
- Add leading zero before counter items — if enabled, it adds a zero before the counters;
- Text after counter number — adds some text or needed characters after the counter;
- Position — defines a counter position concerning the repeater item. The selector includes the following options: “Above items,” “At the left of the items,” and ‘‘At the right of the items”;
- Hide if value is empty — if enabled, removes the widget from a page if it has no items to display;
- Context — allows selecting an object from which the data should be pulled. The available options are:
- Default Object — shows data for the current page or listing template;
- Current User (global) — shows data of the currently logged-in user;
- Current User (for current scope) — displays data according to the user currently proceeding (e.g., in the user listing);
- Queried User — shows data for the user mentioned in the URL (the user ID, username, or nicename in the URL);
- Current Post Author — shows the meta field value of the user who is the author of the currently opened post;
- Default WordPress Object (for current page) — shows the data of the current global object for the current page defined by WordPress. For instance, on a Single Page/Single Post, it will be the current post, even in the listing added to this page;
- Current CCT item author — shows the data in the meta field of the user who is the author of the currently opened CCT item. It can be used in the Listing template for CCT.
That’s all about the settings of the Dynamic Repeater widget available for Elementor Page Builder and WordPress website with the JetEngine plugin.