{"id":10111,"date":"2019-06-17T12:47:14","date_gmt":"2019-06-17T12:47:14","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=10111"},"modified":"2025-05-26T20:41:31","modified_gmt":"2025-05-26T20:41:31","slug":"jetengine-dynamic-image-widget-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/","title":{"rendered":"Dynamic Image Widget Overview"},"content":{"rendered":"\n<p>The<strong> Dynamic Image<\/strong> widget\/block\/element is available after the <a href=\"https:\/\/crocoblock.com\/plugins\/jetengine\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetEngine<\/em><\/a><em> <\/em>plugin is installed and activated. \u00a0It can be added to <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/creating-custom-post-type-archive-template-with-jetengine-listing-grid\/\" target=\"_blank\" rel=\"noreferrer noopener\">single or archive templates<\/a> and create <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-listing-template-for-post-types\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Listing Items<\/strong><\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamic-image-widget-in-elementor\"><strong>Dynamic Image Widget in Elementor<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The<strong> Dynamic Image<\/strong> widget can be found in Elementor and put on the page where needed. Among the settings tabs are <strong>Content<\/strong>, <strong>Style<\/strong>, and <strong>Advanced<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-settings\"><strong>Content Settings<\/strong><\/h3>\n\n\n\n<p>The <strong>Content Settings<\/strong> are presented by the following drop-downs, toggles, and text fields:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget-1024x640.webp\" alt=\"content settings of the dynamic image widget\" class=\"wp-image-46878\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p><\/p>\n\n\n\n<ul>\n<li><strong>Source<\/strong> \u4e00 a drop-down list that allows selecting the source of the image, i.e., the \u201cPost thumbnail,&#8221; &#8220;User avatar,&#8221; featured image of products, or <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/custom-post-type-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Post Type (CPT)<\/strong><\/a> images;<\/li>\n\n\n\n<li><strong>Custom field\/repeater key\/component control<\/strong> \u4e00 a text field intended to insert the meta field ID, meta field name, or component control. If used, the field value prevails over the <strong>Source<\/strong> value;<\/li>\n\n\n\n<li><strong>Image URL Prefix<\/strong> \u4e00 a text field intended to add a prefix to the image URL (for example, for the cases when the source contains only part of the URL);<\/li>\n\n\n\n<li><strong>Image Resolution<\/strong> \u4e00 a drop-down list that allows selecting the necessary size of the image (i.e., &#8220;Thumbnail \u2013 150 x 150,&#8221; &#8220;Medium \u2013 300 x 300,&#8221; &#8220;Medium Large \u2013 768 x 0,&#8221; &#8220;Large \u2013 1024 x 1024,&#8221; and more);<\/li>\n\n\n\n<li><strong>Custom Image Alt<\/strong> \u4e00 a text field that allows typing an alt text for the image or taking it from meta fields using the <strong>Dynamic Tag<\/strong>;<\/li>\n\n\n\n<li><strong>Add Image Caption<\/strong> \u4e00 a toggle that, if enabled, turns on the <strong>Image<\/strong><strong>Caption Position<\/strong> drop-down and <strong>Image Caption Text <\/strong>field:\n<ul>\n<li><strong>Image<\/strong> <strong>Caption Position<\/strong> \u4e00 a drop-down that allows setting the \u201cBefore\u201d or \u201cAfter\u201d position of the caption text;<\/li>\n\n\n\n<li><strong>Image Caption Text<\/strong> \u4e00 a text field that allows typing an image caption text or taking it from meta fields using the <strong>Dynamic Tag<\/strong>;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Lazy Load<\/strong> \u4e00 a toggle that optimizes the image download speed;<\/li>\n\n\n\n<li><strong>Linked Image<\/strong> \u4e00 a toggle that, if enabled, makes the image clickable. It turns on the following fields and toggles:\n<ul>\n<li><strong>Link Source<\/strong> \u4e00 a drop-down menu to select a link applied to the image. The drop-down menu shows \u201cPermalinks,\u201d meta field data associated with the current <strong>CPT<\/strong> (here, Properties (Copy), user info, and more;<\/li>\n\n\n\n<li><strong>Custom field\/repeater\/component control<\/strong> \u4e00 a text field intended to insert the meta field ID, meta field, or component control. If data is inserted, the field value prevails over the <strong>Meta Field <\/strong>value;<\/li>\n\n\n\n<li><strong>Link URL Prefix<\/strong> \u4e00 a text field to type a URL shown before the image on the front end;<\/li>\n\n\n\n<li><strong>Open in new window<\/strong> \u4e00 a toggle that, if enabled, opens the link of the image in a new window;<\/li>\n\n\n\n<li><strong>Add to \u201crel\u201d attr<\/strong> \u4e00 a drop-down menu that allows adding a relation between the linked image and a page as \u201cAuthor,\u201d \u201cBookmark,\u201d \u201cHelp,\u201d and more;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Alignment<\/strong> (responsive) \u4e00 a switcher that sets the image on the \u201cStart,\u201d \u201cCenter,\u201d \u201cEnd,\u201d or \u201cStretch\u201d on the different devices (desktop, tablet, portrait, or mobile);<\/li>\n\n\n\n<li><strong>Hide if value is empty<\/strong> \u4e00 a toggle that hides the image if it is not filled with data;<\/li>\n\n\n\n<li><strong>Fallback Image<\/strong> \u4e00 a field that allows adding an image to be shown if the meta field of the post doesn\u2019t include data. Users can upload the picture in JPG, GIF, or PNG formats;<\/li>\n\n\n\n<li><strong>Context<\/strong> \u4e00 a drop-down menu that allows you to select the source of the image more specifically, i.e., \u201cDefault Object,\u201d \u201cCurrent Object,\u201d \u201cCurrent User,\u201d and more.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"style-settings\"><strong>Style Settings<\/strong><\/h3>\n\n\n\n<p>The <strong>Style Settings<\/strong> manage the <strong>Image<\/strong> and <strong>Caption<\/strong> text options. In particular, the <strong>Image<\/strong> tab allows setting the Width, <strong>Max Width<\/strong>, and <strong>Height<\/strong> and selecting the <strong>Border Type<\/strong> and <strong>Border Radius<\/strong>; in turn, the <strong>Caption<\/strong> tab includes the <strong>Color<\/strong>, <strong>Typography<\/strong>, <strong>Max Width<\/strong>, <strong>Caption Text<\/strong> <strong>Alignment<\/strong>, <strong>Padding<\/strong>, <strong>Margin<\/strong>, <strong>Border Type<\/strong>, and <strong>Border Radius<\/strong> settings.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-widget-1024x640.webp\" alt=\"style settings of the dynamic image widget\" class=\"wp-image-46874\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"advanced-settings\"><strong>Advanced Settings<\/strong><\/h3>\n\n\n\n<p>This tab includes settings and displays tabs referring to the installed plugins (such as <a href=\"https:\/\/crocoblock.com\/plugins\/jettricks\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetTricks<\/em><\/a>, <a href=\"https:\/\/crocoblock.com\/plugins\/jetpopup\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetPopup<\/em><\/a>,<em> <\/em><a href=\"https:\/\/crocoblock.com\/plugins\/jetwoobuilder\/\" target=\"_blank\" rel=\"noreferrer noopener\"><em>JetWooBuilder<\/em><\/a>, etc.).<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/advanced-settings-of-the-dynamic-image-widget.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/advanced-settings-of-the-dynamic-image-widget-1024x640.webp\" alt=\"advanced settings of the dynamic image widget\" class=\"wp-image-46881\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/advanced-settings-of-the-dynamic-image-widget-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/advanced-settings-of-the-dynamic-image-widget-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/advanced-settings-of-the-dynamic-image-widget-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/advanced-settings-of-the-dynamic-image-widget-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/advanced-settings-of-the-dynamic-image-widget-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/advanced-settings-of-the-dynamic-image-widget.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamic-image-block-in-block-editor\"><strong>Dynamic Image Block in Block Editor<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The block can be found in the search bar and inserted where needed. Among the <strong>Dynamic Image<\/strong> block settings tabs are <strong>General<\/strong>, <strong>Layout<\/strong>, <strong>Caption<\/strong>, and <strong>Advanced<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"general-settings\"><strong>General settings<\/strong><\/h3>\n\n\n\n<p>The <strong>General <\/strong>tab of settings is presented by the following fields:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/general-settings-of-the-dynamic-image-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/general-settings-of-the-dynamic-image-block-1024x640.webp\" alt=\"general settings of the dynamic image block\" class=\"wp-image-46877\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/general-settings-of-the-dynamic-image-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/general-settings-of-the-dynamic-image-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/general-settings-of-the-dynamic-image-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/general-settings-of-the-dynamic-image-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/general-settings-of-the-dynamic-image-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/general-settings-of-the-dynamic-image-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>SOURCE<\/strong> \u4e00 a drop-down list that allows selecting the source of the image, i.e., the \u201cPost thumbnail,&#8221; \u201cUser avatar,\u201d featured image of the products, etc.;<\/li>\n\n\n\n<li><strong>OR SET MANUALLY<\/strong> \u4e00 a text field to type a custom\/meta field name, repeater key, component control name, etc. If added, the field value prevails over the <strong>SOURCE<\/strong> value;<\/li>\n\n\n\n<li><strong>IMAGE URL PREFIX<\/strong> \u4e00 a text field intended to add a prefix to the image URL (for example, for the cases when the source contains only part of the URL).<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"layout-settings\">Layout settings<\/h3>\n\n\n\n<p>The <strong>Layout <\/strong>tab of settings is presented by the following fields:<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/layout-settings-of-the-dynamic-image-block-1024x640.webp\" alt=\"layout settings of the dynamic image block\" class=\"wp-image-48082\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/layout-settings-of-the-dynamic-image-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/layout-settings-of-the-dynamic-image-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/layout-settings-of-the-dynamic-image-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/layout-settings-of-the-dynamic-image-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/layout-settings-of-the-dynamic-image-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2019\/06\/layout-settings-of-the-dynamic-image-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/div>\n\n\n\n<p><\/p>\n\n\n\n<ul>\n<li><strong>IMAGE SIZE<\/strong> \u4e00 a drop-down menu that allows selecting the necessary size of the image (i.e., \u201cThumbnail \u2013 150 x 150,\u201d \u201cMedium \u2013 300 x 300,\u201d \u201cMedium Large \u2013 768 x 0,\u201d \u201cLarge \u2013 1024 x 1024,\u201d and more);<\/li>\n\n\n\n<li><strong>ASPECT RATIO<\/strong> \u4e00 a drop-down menu that allows the display of the image with the needed size ratio, for example, \u201cOriginal,\u201d \u201c1:1,\u201d \u201c3:2,\u201d \u201c16:9,\u201d and more;<\/li>\n\n\n\n<li><strong>IMAGE WIDTH<\/strong> and <strong>IMAGE HEIGHT<\/strong> \u4e00 the text field that allows specifying the required image parameters in px and %;<\/li>\n\n\n\n<li><strong>SCALE<\/strong> \u4e00 a field that is displayed if the ASPECT RATIO option is set (except the \u201cOriginal\u201d one) and includes the following buttons:\n<ul>\n<li><strong>COVER<\/strong> \u4e00 a button that, if selected, allows the&nbsp; image to fill the entire container, even if it has to be stretched or cropped slightly on one side;<\/li>\n\n\n\n<li><strong>CONTAIN<\/strong> \u4e00&nbsp; a button that, if selected, allows the image to be shown with the background, even if it leaves space on the sides.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CUSTOM IMAGE ALT<\/strong> \u4e00 a text field that allows typing an alt text for the image;<\/li>\n\n\n\n<li><strong>Lazy load<\/strong> \u4e00 a toggle that optimizes the image download speed;<\/li>\n\n\n\n<li><strong>Linked image<\/strong> \u4e00 a toggle that, if enabled, makes the image clickable. It turns on the following fields and toggles:\n<ul>\n<li><strong>SOURCE<\/strong> \u4e00 a drop-down menu to select a link applied to the image. The drop-down menu shows meta fields associated with the current <strong>CPT<\/strong>, user data, and more;<\/li>\n\n\n\n<li><strong>OR SET MANUALLY<\/strong> \u4e00 a text field intended to insert the meta field ID, meta field name, and component control name. If data is inserted, the field value prevails over the <strong>Meta Field <\/strong>value;<\/li>\n\n\n\n<li><strong>LINK URL PREFIX<\/strong> \u4e00 a text field to type a URL shown before the image on the front end;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Open in new window<\/strong> \u4e00 a toggle that, if enabled, opens the link of the image in a new window;<\/li>\n\n\n\n<li><strong>ADD \u201cREL\u201d ATTR<\/strong> \u4e00 a drop-down menu that allows adding a relation between the linked image and a page as \u201cAuthor,\u201d \u201cBookmark,\u201d \u201cHelp,\u201d and more;<\/li>\n\n\n\n<li><strong>Hide if value is empty<\/strong> \u4e00 a toggle that hides the image if it\u2019s not filled with data;<\/li>\n\n\n\n<li><strong>Select Image<\/strong> \u4e00 a button that allows selecting the image to be shown if the meta field of the post doesn\u2019t include data. Users can upload the picture in JPG, GIF, or PNG formats;<\/li>\n\n\n\n<li><strong>CONTEXT <\/strong>\u4e00 a drop-down menu that allows you to define the source of the image more specifically, i.e., \u201cDefault Object,\u201d \u201cCurrent Object,\u201d \u201cCurrent User,\u201d and more.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<h3 class=\"wp-block-heading\" id=\"caption-settings\"><strong>Caption settings<\/strong><\/h3>\n\n\n\n<p>The <strong>Caption<\/strong> settings are activated by the <strong>Add Image Caption<\/strong> toggle:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/caption-and-advanced-settings-of-the-dynamic-image-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/caption-and-advanced-settings-of-the-dynamic-image-block-1024x640.webp\" alt=\"caption and advanced settings of the dynamic image block\" class=\"wp-image-46880\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/caption-and-advanced-settings-of-the-dynamic-image-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/caption-and-advanced-settings-of-the-dynamic-image-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/caption-and-advanced-settings-of-the-dynamic-image-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/caption-and-advanced-settings-of-the-dynamic-image-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/caption-and-advanced-settings-of-the-dynamic-image-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/caption-and-advanced-settings-of-the-dynamic-image-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>IMAGE<\/strong> <strong>CAPTION POSITION<\/strong> \u4e00 a drop-down field that allows set the \u201cBefore,\u201d or \u201cAfter\u201d position of the caption text;<\/li>\n\n\n\n<li><strong>IMAGE CAPTION TEXT<\/strong> \u4e00 a text field for typing an image caption text.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"advanced-settings\"><strong>Advanced settings<\/strong><\/h3>\n\n\n\n<p>The <strong>Advanced<\/strong> setting is presented by <strong>ADDITIONAL<\/strong><strong> CSS CLASS(ES)<\/strong>, a text field intended to add the CSS class(es) for this block.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"dynamic-image-element-in-the-bricks-theme\"><strong>Dynamic Image Element in the Bricks theme<\/strong><\/h2>\n\n\n\n<div class=\"wp-block-group is-layout-constrained wp-block-group-is-layout-constrained\"><div class=\"wp-block-group__inner-container\">\n<p>The element can be found in the search bar and then drag-n-dropped where needed. Among the <strong>Dynamic Image<\/strong> element settings are the <strong>CONTENT<\/strong> and <strong>STYLE<\/strong> tabs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"content-settings\"><strong>Content settings<\/strong><\/h3>\n\n\n\n<p>The following settings are included in the <strong>Content<\/strong> settings:<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-element.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-element-1024x640.webp\" alt=\"content settings of the dynamic image element\" class=\"wp-image-46879\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-element-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-element-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-element-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-element-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-element-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-element.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<ul>\n<li><strong>Source<\/strong> \u4e00 a drop-down list that allows selecting the source of the image, i.e., the \u201c Post thumbnail,&#8221; \u201cUser avatar,\u201d featured image of the products, etc.;<\/li>\n\n\n\n<li><strong>Custom field\/repeater key\/component control<\/strong> \u4e00 a text field intended to insert or select the dynamic data (the meta field ID, meta field name, component control name.) If added, the field value prevails over the <strong>Source<\/strong> value;<\/li>\n\n\n\n<li><strong>Image URL prefix <\/strong>\u4e00 a text field intended to add or select the prefix to the image URL from the dynamic data (for example, for the cases when the source contains only part of the URL);<\/li>\n\n\n\n<li><strong>Dynamic image size<\/strong> \u4e00 a drop-down menu that allows selecting the necessary size of the image (i.e., \u201cThumbnail \u2013 150 x 150,\u201d \u201cMedium \u2013 300 x 300,\u201d \u201cMedium Large \u2013 768 x 0,\u201d \u201cLarge \u2013 1024 x 1024,\u201d and more);<\/li>\n\n\n\n<li><strong>Alignment<\/strong> (responsive) \u4e00 a drop-down list that sets the image on the \u201cStart,\u201d \u201cCenter,\u201d \u201cEnd\u201d, or \u201cStretch\u201d on the different devices (desktop, tablet,&nbsp; portrait, or mobile);<\/li>\n\n\n\n<li><strong>Add image caption<\/strong> \u4e00 a toggle that, if enabled, turns on the <strong>Image<\/strong><strong>Caption Position<\/strong> drop-down and <strong>Image Caption Text <\/strong>field:\n<ul>\n<li><strong>Image<\/strong> <strong>Caption Position<\/strong> \u4e00 a drop-down that allows setting the \u201cBefore\u201d or \u201cAfter\u201d position of the caption text;<\/li>\n\n\n\n<li><strong>Image Caption Text<\/strong> \u4e00 a text field that allows typing the image caption text or selecting the text from the dynamic data;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Linked Image<\/strong> \u4e00 a toggle that, if enabled, makes the image clickable. It turns on the following fields and toggles:\n<ul>\n<li><strong>Link source<\/strong> \u4e00 a drop-down menu to select a link applied to the image. The drop-down menu shows meta fields associated with the current <strong>CPT<\/strong> (here, Properties (Copy), user settings, options, and more;<\/li>\n\n\n\n<li><strong>Custom field\/repeater\/component control<\/strong> \u4e00 a text field intended to type the needed data or select the meta field ID, meta field, component control from the <strong>Dynamic Data<\/strong>;&nbsp;<\/li>\n\n\n\n<li><strong>Link URL Prefix<\/strong> \u4e00 a text field intended to type the URL or select the dynamic data<strong> <\/strong>shown before the image on the front end;<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Open in new window<\/strong> \u4e00 a toggle that, if enabled, opens the link of the image in a new window;&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Add \u201crel\u201d attr<\/strong> \u4e00 a drop-down menu that allows adding a relation between the linked image and a page as \u201cAuthor,\u201d \u201cBookmark,\u201d \u201cHelp,\u201d and more;<\/li>\n\n\n\n<li><strong>Fallback image<\/strong> \u4e00 a set of controls that includes the <strong>SELECT IMAGE<\/strong> button and text fields to insert\/select the dynamic data and <strong>Custom URL<\/strong>, respectively;<\/li>\n\n\n\n<li><strong>Context<\/strong> \u4e00 a drop-down menu that allows for defining the source of the image more specifically, i.e., \u201cDefault Object,\u201d \u201cCurrent Object,\u201d \u201cCurrent User,\u201d and more.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"style-settings\"><strong>Style settings<\/strong><\/h3>\n\n\n\n<p>This tab can be used to edit the layout, typography, background, and other style settings of the element.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-block.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-block-1024x640.webp\" alt=\"style settings of the dynamic image block\" class=\"wp-image-46875\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-block-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-block-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-block-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-block-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-block-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/style-settings-of-the-dynamic-image-block.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>That\u2019s it. Now you know how to manage the <strong>Dynamic Image<\/strong> widget\/block\/element settings of the <em>JetEngine <\/em>WordPress<em> <\/em>plugin to configure image displaying.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to manage the Dynamic Image widget\/block\/element settings of the JetEngine plugin to configure image displaying in the Elementor\/Block Editor\/Bricks theme.<\/p>\n","protected":false},"author":11,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[390],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Dynamic Image Widget Overview \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to manage the Dynamic Image widget\/block\/element settings of the JetEngine plugin to configure image displaying in the Elementor\/Block Editor\/Bricks theme.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dynamic Image Widget Overview \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to manage the Dynamic Image widget\/block\/element settings of the JetEngine plugin to configure image displaying in the Elementor\/Block Editor\/Bricks theme.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2025-05-26T20:41:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget-1024x640.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/\",\"name\":\"Dynamic Image Widget Overview \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-17T12:47:14+00:00\",\"dateModified\":\"2025-05-26T20:41:31+00:00\",\"description\":\"Learn how to manage the Dynamic Image widget\/block\/element settings of the JetEngine plugin to configure image displaying in the Elementor\/Block Editor\/Bricks theme.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Articles\",\"item\":\"https:\/\/crocoblock.com\/knowledge-base\/articles\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dynamic Image Widget Overview\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"name\":\"Help Center\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#organization\",\"name\":\"Help Center\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"contentUrl\":\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg\",\"caption\":\"Help Center\"},\"image\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dynamic Image Widget Overview \u2014 JetEngine | Crocoblock","description":"Learn how to manage the Dynamic Image widget\/block\/element settings of the JetEngine plugin to configure image displaying in the Elementor\/Block Editor\/Bricks theme.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/","og_locale":"en_US","og_type":"article","og_title":"Dynamic Image Widget Overview \u2014 JetEngine | Crocoblock","og_description":"Learn how to manage the Dynamic Image widget\/block\/element settings of the JetEngine plugin to configure image displaying in the Elementor\/Block Editor\/Bricks theme.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/","og_site_name":"Help Center","article_modified_time":"2025-05-26T20:41:31+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/01\/content-settings-of-the-dynamic-image-widget-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/","name":"Dynamic Image Widget Overview \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-17T12:47:14+00:00","dateModified":"2025-05-26T20:41:31+00:00","description":"Learn how to manage the Dynamic Image widget\/block\/element settings of the JetEngine plugin to configure image displaying in the Elementor\/Block Editor\/Bricks theme.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-image-widget-overview\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/crocoblock.com\/knowledge-base\/"},{"@type":"ListItem","position":2,"name":"Articles","item":"https:\/\/crocoblock.com\/knowledge-base\/articles\/"},{"@type":"ListItem","position":3,"name":"Dynamic Image Widget Overview"}]},{"@type":"WebSite","@id":"https:\/\/crocoblock.com\/knowledge-base\/#website","url":"https:\/\/crocoblock.com\/knowledge-base\/","name":"Help Center","description":"","publisher":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/crocoblock.com\/knowledge-base\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/crocoblock.com\/knowledge-base\/#organization","name":"Help Center","url":"https:\/\/crocoblock.com\/knowledge-base\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/","url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","contentUrl":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2025\/04\/invert-crocoblock-logo.svg","caption":"Help Center"},"image":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article\/10111"}],"collection":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/types\/article"}],"author":[{"embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/users\/11"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=10111"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=10111"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=10111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}