{"id":52085,"date":"2026-06-22T05:32:06","date_gmt":"2026-06-22T05:32:06","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=52085"},"modified":"2026-06-22T05:32:09","modified_gmt":"2026-06-22T05:32:09","slug":"how-to-display-images-on-front-end","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-display-images-on-front-end\/","title":{"rendered":"How to Display Images on the Front End"},"content":{"rendered":"\n

JetEngine <\/em>offers two types of custom fields for displaying images: \u201cMedia<\/a>\u201d and \u201cGallery<\/a>.\u201d Both fields allow storing the images as the image array, image URL (string), or image ID (integer). They allow saving graphical file formats (e.g., PNG, JPG, and WebP) and restricting the MIME types. The \u201cGallery\u201d meta field adds multiple images to the posts and products as a gallery.<\/p>\n\n\n\n

Both \u201cMedia\u201d and \u201cGallery\u201d fields can be used in the <\/strong>Custom Post Type<\/strong><\/a> <\/strong>or Meta Boxes<\/strong><\/a>. JetEngine <\/em>provides several options for displaying images from these fields \u2014 this article explains how to make each of them work.\u00a0<\/p>\n\n\n\n

Create a Field for Images<\/h2>\n\n\n\n
\n

In WordPress Dashboard > JetEngine > Post Types\/Meta Boxes<\/em><\/strong> directory, select the needed CPT <\/strong>or Meta Box<\/strong> where you need to add the field for images. In the Meta fields<\/strong> section, click the \u201cNew Meta Field<\/strong>\u201d button.<\/p>\n\n\n\n

Set the field\u2019s Label<\/strong>, Name<\/strong>, and select the \u201cMedia\u201d Field type<\/strong>. Set the desired Value format<\/strong> and restrictions if needed.<\/p>\n\n\n\n

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

All the same settings are needed for the \u201cGallery\u201d field, except the \u201cGallery\u201d option for the Field type<\/strong> dropdown.<\/p>\n\n\n\n

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

Save the changes.<\/p>\n<\/div><\/div>\n\n\n\n

Add Image to the Field<\/h2>\n\n\n\n
\n

Then, proceed to the post, Custom Content Type<\/strong><\/a> Item, user, or product where you need to add the image. Click the \u201cChoose Media<\/strong>\u201d button in order to add the images from the Media Library or your device.<\/p>\n\n\n\n

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

Ensure that changes are saved.<\/p>\n<\/div><\/div>\n\n\n\n

Displaying an Image<\/h2>\n\n\n\n
\n

JetEngine <\/em>lets you dynamically display uploaded images on the front end in several ways. The most convenient and flexible method is using the Dynamic Image<\/strong><\/a> widget\/block\/element, which is designed specifically for media output and gives full control over image appearance and behavior.<\/p>\n\n\n\n

You can also display images via the Dynamic Field<\/strong><\/a> widget or use dynamic tags<\/a> to set images as section or container backgrounds in Elementor and Bricks.<\/p>\n\n\n\n

In this tutorial section, we will start with the most recommended approach for the JetEngine <\/em>image field dynamic setup \u2014 the Dynamic Image<\/strong> widget\/block\/element.<\/p>\n\n\n\n

Display an Image with the Dynamic Image<\/h3>\n\n\n\n
\n

The Dynamic Image<\/strong> widget\/block\/element allows you to output images stored in JetEngine <\/em>\u201cMedia\u201d meta fields dynamically. This method is useful when you need full control over image size, styling, responsiveness, links, lazy loading, and other display settings.<\/p>\n\n\n\n

To display an image dynamically, open the page, template, or post in the editor (we use Elementor in this case) and add the Dynamic Image<\/strong> widget to the canvas.<\/p>\n\n\n\n

In the widget settings, open the General <\/strong>tab and select the previously created \u201cMedia\u201d meta field in the Source <\/strong>dropdown.<\/p>\n\n\n\n

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

After selecting the field, the image uploaded to that meta field for the single post\/CCT<\/strong> item<\/strong>\/user will appear automatically on the front end.<\/p>\n\n\n\n

The Dynamic Image<\/strong> widget also provides additional customization options, including:<\/p>\n\n\n\n