Dynamic Image widget of JetEngine plugin is a useful tool, which allows to pull an image from the meta field to display it in the pages build with the Elementor page builder. Let’s go through its settings.
Open your page with Elementor page builder, find the Dynamic Image widget and drop it in the working area.
Open the Content tab and let’s take a look at the features.
- Source. Here you can set the source from which the thumbnail image will be pulled. All the meta fields that contain media are listed in this drop-down menu. You can set the source by typing the meta field’s ID into the Custom meta field/repeater key text field;
- Image Size. Specify the size of the image by choosing one of the options in this drop-down list;
- Linked image. In case you want to make the image clickable, enable this toggle. In the Link Source drop-down list, you can select the link that will be applied to the image. If you want to pull out the link from another meta field, enter its ID in the Custom meta field/repeater key text area. Enable the Open in new window option so that the link opens in a new window in your browser. Also, specify the relationship between the image and the linked page with the help of Add “rel” attr option;
- Alignment. Here you can set the alignment for the dynamic image;
- Hide if value is empty. Enable this toggle in order to hide the field if it’s not filled with data;
- Fallback image. This image will be shown if the meta field of the post doesn’t include data. You can upload the picture in JPG, GIF, or PNG formats;
- Context. This drop-down offers you to define the Source of the image even more specifically.
Open the Style tab and customize the only two available options – Border Type and Border Radius of the image.
When everything is set click the “Update” button below to save the changes.
Great! Use knowledge from this tutorial by using the JetEngine Dynamic Image widget.