Dynamic Field widget of JetEngine plugin helps you to display the content either from meta fields or the post/term data, for posts and taxonomies listing templates. This widget pulls the data from the specified source and displays it using the set style and content settings.
Customizing Dynamic Field widget
Step 1 – Drag and drop the Dynamic Field widget on the needed page and let’s look through the content settings in the Elementor panel.
Step 2 – First, navigate to the Content accordion block and look at the Source option. Here in the dropdown, you can see a list of available sources where the date will be pulled out from (Post/Term Data or Meta Data).
Step 3 – The Object Field allows you to select the field which you need to pull information from. You can also enter the ID of a certain meta field in the Or enter meta field key text area if you have chosen the Meta Data option in Step 2.
Step 4 – Go to the Field Icon drop-down, where you can select the icon to be displayed next to this field.
Step 5 – Specify the HTML tag in the corresponding field for the meta field.
Step 6 – Toggle the Hide if value is empty option to Yes in case you want to hide the field if it’s not filled.
While deciding whether to enable this option the or not, there is an opportunity to add the value which will appear in case the meta field or other source is empty or even doesn’t exist at all.
This value will show the website visitors that information will be completed as soon as possible. Also, it’s a great possibility to set the same value for almost all items inside the listing at once.
Step 7 – Enable the Filter field output option to display the data directly from the database. It happens that the content can’t be displayed without any filters (e.g., to display the date you’ll need Format Data callback, to display an image you’ll need to use Get Image by ID callback, etc).
Step 8 – There are 8 callback types which we’ll look through.
- Use the Format date callback to show the date pulled from the database using Date or Time meta fields.
- The Get post/page link callback allows you to pull the link to the post or the page in the event that you have added the term ID in the Text meta field.
- Select the Get term link option in order to set the displaying for the term link in case you’ve added the term ID in the Text meta field.
- If you select the Embed URL callback, you are able to embed the URL link (e.g. if you want to embed a video from youTube, etc.).
- Choose the Multiple select field values so that you are able to showcase several selected option when you’re using Select meta field. Don’t forget to specify the delimiter afterward.
- Get Image by ID callback option displays the image from the database instead of its number value when using Media meta field.
- Use the Images Gallery Grid callback option to display gallery added using Gallery meta field.
- The last callback is Images Gallery Slider which you can use whenever you need to display the images slider added using Gallery meta field. Note, that you should enable Grid and Slider gallery option in JetEngine > Modules Manager first.
Step 9 – If we have the meta field, which is empty or even doesn’t exist at all for several items, then the text from the fallback will appear. It will be the same for each item in the current listing.
Step 10 – Proceed to the Customize field input option and toggle it to Yes in order to add the text before and after the value that is pulled from the meta field.
Step 11 – Open the Style tab in the Elementor panel and customize your widget with the help of the basic styling options.
Now you are a professional when it comes to the Dynamic Field widget! Well done!