{"id":35588,"date":"2025-10-06T09:51:51","date_gmt":"2025-10-06T09:51:51","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=35588"},"modified":"2025-10-06T12:27:28","modified_gmt":"2025-10-06T12:27:28","slug":"dynamic-repeater-widget-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-repeater-widget-overview\/","title":{"rendered":"Dynamic Repeater Widget Overview"},"content":{"rendered":"\n

The Dynamic Repeater<\/strong> widget helps display the data of a \u201cRepeater<\/a>\u201d meta field for posts, terms, users, Custom Content Type (CCT)<\/strong> items<\/a>, options page<\/a>, ACF<\/em> \u201cRepeater\u201d field, or Query Builder<\/strong><\/a>. The widget also offers HTML formatting options for customizing the layout.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

The Dynamic Repeater<\/strong> widget pulls the data dynamically. Therefore, this widget should be used on the Single Page of the object or in the object\u2019s Listing template<\/strong><\/a>.<\/p><\/div><\/div>\n\n\n\n

For example, if there is a \u201cRepeater\u201d meta field in a \u201cUser\u201d Meta Box<\/strong><\/a>, a Dynamic Repeater<\/strong> can be used in the Listing <\/strong>for users or on the Single User Profile Page<\/strong><\/a>.<\/p>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n

Source<\/h2>\n\n\n\n

The first Source <\/strong>field in the Dynamic Repeater<\/strong> widget is used to select a \u201cRepeater\u201d meta field to display in the widget. In the corresponding selector, the repeater meta fields are divided by the source: posts, taxonomies, CCTs<\/strong>, users, ACF<\/em> fields, options, and Query Builder<\/strong>.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

The \u201cRepeater\u201d meta field created only by the JetEngine<\/em> or ACF<\/em> plugin can be processed in the widget.<\/p><\/div><\/div>\n\n\n\n

\"dynamic<\/figure>\n\n\n\n

Item Format<\/h2>\n\n\n\n
\n

The Item format<\/strong> field defines the layout of a repeater item using HTML, combining static content with dynamic values.<\/p>\n\n\n\n

Dynamic values are inserted using the \u201cRepeater\u201d fields macros, which are the field names wrapped in percentage signs \u2014 e.g., %text_rep%, %website_link%, and %media_rep%.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

These macros can be used as the Item Format<\/strong> and combined with HTML tags (e.g., <span> or <div>).<\/p>\n\n\n\n

\"span<\/a><\/div>\n\n\n\n

Other HTML tags, attributes, or inline styles can also be used as needed.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

The JetEngine<\/em><\/a> <\/em>plugin provides a list of special macros with certain functions.<\/p>\n\n\n\n

Macros for media<\/h3>\n\n\n\n

%media-field|img_url_by_id% \u2014 a macro that transforms the ID of an image into the URL of an image.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Note that \u201cmedia-field\u201d needs to be substituted with the \u201cMedia<\/a>\u201d Name\/ID<\/strong> from your website.<\/p><\/div><\/div>\n\n\n\n

For the %media_rep% field, the result is %media_rep|img_url_by_id%.<\/p>\n\n\n\n

It will provide a link to the image, which can be used as a source for HTML\u2019s <img> tag.<\/p>\n\n\n\n

The full result is <img src=\u201d%media_rep|img_url_by_id%\u201d>, which renders the actual image.<\/p>\n\n\n\n

\"macro<\/a><\/div>\n\n\n\n

If the \u201cMedia\u201d field in a \u201cRepeater\u201d field has \u201cMedia URL\u201d as a Value format<\/strong>, the macro of the media field in the <img> source can be completed like this:<\/p>\n\n\n\n

 <img src=\u201d%media_rep%\u201d><\/p>\n\n\n\n

\"media<\/a><\/div>\n\n\n\n

%media-field|img_alt_by_id% \u2014 displays an alternative text for an image. This macro can be used in addition to the <img> tag that outputs an image:<\/p>\n\n\n\n

<img src=\u201d%media_rep|img_url_by_id%\u201d alt=%media-rep|img_alt_by_id%><\/div><\/p>\n\n\n\n

%media-field|file_url_by_id% \u2014 displays the link of the attachment by its ID. It can be used for a \u201cMedia\u201d meta field with the \u201cMedia ID\u201d Value format<\/strong>.<\/p>\n\n\n\n

This file can be downloaded using the following snippet:<\/p>\n\n\n\n

<a href=\u201d%file-repeater|file_url_by_id%\u201d download>Download the file!<\/a>, where \u201cfile-repeater\u201d needs to be substituted with the required meta field name.<\/p>\n\n\n\n

On the front end, the file will be downloaded by clicking on the link.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Macro for gallery<\/h3>\n\n\n\n

%gallery-field-name|img_gallery_grid% \u2014 macro that renders multiple images from a \u201cGallery<\/a>\u201d meta field of the \u201cRepeater,\u201d where \u201cgallery-field-name\u201d should be changed to the \u201cGallery\u201d Name<\/strong>.<\/p>\n\n\n\n

The output for the \u201cGallery\u201d meta field with the \u201cMedia ID\u201d Value format <\/strong>will be like this:<\/p>\n\n\n\n

%gallery_rep|img_gallery_grid%<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Macros for posts<\/h3>\n\n\n\n

%post_id|post_url_by_id% \u2014 retrieves the URL of the post by its ID from a \u201cPosts<\/a>\u201d meta field.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

The macro does not work with Multiple<\/strong> selections in the \u201cPosts\u201d meta field.<\/p><\/div><\/div>\n\n\n\n

\"posts<\/a><\/div>\n\n\n\n

This macro in a <a> tag creates a link to a post from the \u201cPosts\u201d meta fields: <\/p>\n\n\n\n

<a href=\u201d%posts_rep|post_url_by_id%\u201d>%posts_rep|post_title_by_id%<\/a><\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

%post-field|post_title_by_id% \u2014 allows getting the name of the post by its ID. It can also be used for the \u201cPosts\u201d meta field unless a Multiple <\/strong>switcher is enabled in the \u201cPosts\u201d meta field.<\/p>\n\n\n\n

In the <a href=\u201d%posts-repeater|post_url_by_id%\u201d>%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 <\/strong>of a post\u2019s link.<\/p>\n\n\n\n

%post-field|post_link_by_id% \u2014 an alternative to the previous two macros. The macro allows getting the linked title of the post.<\/p>\n\n\n\n

%post-field|post_titles_by_ids% \u2014 gets the titles of posts from the \u201cPosts\u201d meta field with the Multiple <\/strong>toggle activated.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Macro for dates<\/h3>\n\n\n\n

%date-field|format_date% or %date-field|format_date(F j, Y)% \u2014 output a date in the Dynamic Repeater<\/strong> widget, where \u201cdate-field\u201d is the name of the date\/time\/datetime meta field in the \u201cRepeater\u201d, and \u201cF j, Y\u201d is the date format, which can be changed according to the needs.<\/p>\n\n\n\n

The full list of date formats can be found in WordPress documentation<\/a>.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Macro for checkbox values<\/h3>\n\n\n\n

%checkbox-field|render_acf_checkbox% \u2014 helps display the value from the ACF<\/em> \u201cCheckbox\u201d meta field. <\/p>\n\n\n\n

The \u201cCheckbox<\/a>\u201d meta field values from the JetEngine <\/em>plugin can also be displayed if the Save as array <\/strong>toggle is enabled.<\/p>\n\n\n\n

\"save<\/a><\/div>\n\n\n\n

The \u201cCheckbox\u201d field values are shown after writing the name of the \u201cCheckbox\u201d meta field in the macro.<\/p>\n\n\n\n

\"repeater<\/a><\/div>\n\n\n\n

Macro for embedding a URL (video)<\/h3>\n\n\n\n

A video can be displayed by its link saved in the \u201cText\u201d field. <\/p>\n\n\n\n

\"video<\/a><\/div>\n\n\n\n

Currently, we recommend using the Dynamic Field<\/strong><\/a> <\/strong>widget. <\/p>\n\n\n\n

The \u201cRepeater Field\u201d Source <\/strong>should be selected, and the name of the \u201cText\u201d meta field should be entered in the Object field \/ Meta field \/ Repeater key \/ Component prop <\/strong>bar.<\/p>\n\n\n\n

To display the link as a video, the Filter field output<\/strong> should be enabled, and the \u201cEmbed URL\u201d option should be selected as the Callback<\/strong><\/a>. After those actions, the video will be displayed appropriately.<\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n

These were all macros for the Dynamic Repeater<\/strong>\u2019s Item Format<\/strong> field to display data in various formats.<\/p>\n\n\n\n

Macro for icons<\/h3>\n\n\n\n

Icons can be selected with the “Iconpicker<\/a>” meta field.<\/p>\n\n\n\n

\"\"<\/a><\/div>\n<\/div><\/div>\n\n\n\n

<i class=”%icons_rep%”><\/i> <\/strong>helps to show the icon. The ‘icons_rep’ should be replaced with the meta field name.<\/p>\n\n\n\n

\"icon<\/a><\/div>\n\n\n\n

Other Settings<\/h2>\n\n\n\n

The other settings in the Dynamic Repeater<\/strong> widget are as follows:<\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n