Back to contents

JetEngine: Dynamic Image Widget Overview

In this tutorial, we will look through the features of the Dynamic Image widget by JetEngine.

Dynamic Image widget of JetEngine plugin is a useful tool, which allows to pull a thumbnail image or an image from the meta field to display it in the pages build with Elementor.

Viewing Dynamic Image widget

Step 1 – Open your page with Elementor page builder, find the Dynamic Image widget and drop it in the working area.

gallery meta field

Step 2 – Open the Content tab > Content accordion block and in the first dropdown you can see the Source dropdown. Here you can set the source from which you need to pull the thumbnail image (e.g., Thumbnail, Post Thumbnail).

Content settings of Dynamic Image widget

Step 3 – You can also pull out the image from the custom post with the help of its ID which you have to enter in the Or enter custom meta field key text field.

Step 4 – Specify the size of the image by clicking one of the options in the Image Size dropdown.

Step 5 – In case you want to make the image clickable, toggle the Linked image option to Yes.

Linked image option

Step 6 – Move down to the Link Source dropdown and select the link that will be applied for the image (e.g.permalink).

Step 7 – In the event that you want to pull out the link from the custom post, enter its ID in the next Or enter post meta field key text area.

Step 8 – Enable the Open in new window option so that the link opens in a new window in your browser.

Step 9 – Specify the relationship between the image and the linked page with the help of Add “rel” attr option.

Step 10 – Set the alignment for the dynamic image item in the Alignment option.

Step 11 – Use the Hide if value is empty option in order for the field to be hidden if it’s not filled.

Hide if value is empty option

Step 12 – Add a Fallback image in JPG, GIF or PNG formats that will be displayed if the device, software or browser that the image is displayed on doesn’t support HTML5.

Step 13 – Open the Style tab and customize the only two available options – Border Type and Border Radius.

style settings of Dynamic Image widget

Step 14 – When everything is set click the Update button below to save the changes.

Great! Use knowledge from this tutorial by using JetEngine functionality.