{"id":9458,"date":"2019-06-03T13:43:37","date_gmt":"2019-06-03T13:43:37","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=9458"},"modified":"2024-09-18T14:57:30","modified_gmt":"2024-09-18T14:57:30","slug":"jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/","title":{"rendered":"How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block"},"content":{"rendered":"\n<p>With the help of the <em>JetEngine <\/em>plugin, you can showcase image galleries for posts using the meta fields of the \u201cGallery\u201d type. You can then customize the appearance of the grid and slider galleries in the <strong>Dynamic Field<\/strong> <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">widget<\/a>\/<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">block<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"activate-the-modules\"><strong>Activate the Modules<\/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>First, go to the <strong><em>WordPress Dashboard > JetEngine > JetEngine Dashboard > Modules<\/em><\/strong> tab and activate the <strong>Grid Gallery for Dynamic Field<\/strong> and the <strong>Slider Gallery for Dynamic Field<\/strong> toggles.\u00a0<\/p>\n\n\n\n<p>Once done, click the \u201c<strong>Save<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory-1024x640.webp\" alt=\"jetengine modules directory\" class=\"wp-image-45678\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"create-gallery-meta-field\"><strong>Create \u201cGallery\u201d Meta Field<\/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>Now the \u201cGallery\u201d meta field should be added.&nbsp;<\/p>\n\n\n\n<p>If you work with the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/custom-post-type-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Post Type<\/strong><\/a>, the new meta field can be added in the <strong><em>WordPress Dashboard > JetEngine > Post Types<\/em><\/strong> directory.\u00a0<\/p>\n\n\n\n<p>However, if you want to add a <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-add-the-custom-meta-fields-to-the-posts\/\" target=\"_blank\" rel=\"noreferrer noopener\">meta field<\/a> to the default WordPress posts, the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/meta-boxes-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">meta box<\/a> should be created in <strong><em>WordPress Dashboard > JetEngine ><\/em><\/strong><em> <\/em><strong><em>Meta Boxes<\/em><\/strong>. If so, make sure that the <strong>Meta box for <\/strong>is set to \u201cPost.\u201d<\/p>\n\n\n\n<p>Head to the <strong>Meta Fields <\/strong>tab and hit the \u201c<strong>New Meta Field<\/strong>\u201d button.<\/p>\n\n\n\n<p>Complete the <strong>Label <\/strong>field, change the <strong>Name\/ID <\/strong>if desired, and select the \u201cGallery\u201d <strong>Field type<\/strong>.<\/p>\n\n\n\n<p>Then, hit the \u201c<strong>Add\/Update Meta Box\/Post Type<\/strong>\u201d button to save the changes.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-1024x640.webp\" alt=\"gallery meta field\" class=\"wp-image-45679\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After that, you should complete the \u201cGallery\u201d meta field with images in every post. To do so, open the needed post, scroll it to the meta fields, and add pictures to the \u201cGallery\u201d meta field.\u00a0<\/p>\n\n\n\n<p>Hit the \u201c<strong>Save<\/strong>\u201d button. Repeat this process for the rest of the posts.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-completed-in-the-post.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-completed-in-the-post-1024x640.webp\" alt=\"gallery meta field completed in the post\" class=\"wp-image-45680\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-completed-in-the-post-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-completed-in-the-post-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-completed-in-the-post-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-completed-in-the-post-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-completed-in-the-post-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-completed-in-the-post.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"use-the-callback-in-the-dynamic-field-widgetblock\"><strong>Use the Callback in the Dynamic Field Widget\/Block<\/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>Now, it\u2019s time to add our gallery to the preferred page\/template. We are going to add the gallery to the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetthemecore\/how-to-add-a-single-post-page-template-with-elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Single Template<\/strong><\/a><strong> <\/strong>of the \u201cProperties\u201d <strong>CPT <\/strong>posts.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">To build and edit the <strong>Single Template<\/strong>, we use the <a href=\"https:\/\/crocoblock.com\/plugins\/jetthemecore\/\"><i>JetThemeCore<\/i><\/a> plugin.<\/p><\/div><\/div>\n\n\n\n<p>To edit a <strong>Single Template<\/strong>, we proceed to <strong><em>WordPress Dashboard &gt; Crocoblock &gt; Theme Templates <\/em><\/strong>and open the already-built template editor by pressing the \u201c<strong>Edit<\/strong>\u201d button.&nbsp;<\/p>\n\n\n\n<p>You can edit the page\/template either in Elementor or Gutenberg (Block Editor.)<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/theme-parts-directory.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/theme-parts-directory-1024x640.webp\" alt=\"theme parts directory\" class=\"wp-image-45681\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/theme-parts-directory-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/theme-parts-directory-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/theme-parts-directory-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/theme-parts-directory-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/theme-parts-directory-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/theme-parts-directory.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>In our case, we work with the Elementor editor. To showcase the post gallery, find the <strong>Dynamic Field<\/strong> widget\/block in the panel and drop it to the page. In the <strong>Content <\/strong>menu field, choose the \u201cMeta Data\u201d option in the <strong>Source<\/strong> field and the recently created meta field in the <strong>Meta Field<\/strong> dropdown menu.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetthemecore rounded overflow-hidden p-20\"><div class=\"mr-12\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M9 21C9 21.5 9.4 22 10 22H14C14.6 22 15 21.5 15 21V20H9V21ZM12 2C8.1 2 5 5.1 5 9C5 11.4 6.2 13.5 8 14.7V17C8 17.5 8.4 18 9 18H15C15.6 18 16 17.5 16 17V14.7C17.8 13.4 19 11.3 19 9C19 5.1 15.9 2 12 2Z\" fill=\"#F2D23C\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Things to know<\/div><p class=\"m-0\">In case you work with the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/custom-content-type\/\"><strong>Custom Content Type<\/strong><\/a>, you should pick the \u201cPost\/Term\/User\/Object Data\u201d <strong>Source<\/strong> and then find the \u201cGallery\u201d option under the <strong>CCT<\/strong>\u2019s title in the <strong>Object Field<\/strong> dropdown menu.<\/p><\/div><\/div>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-selected-as-the-dynamic-field-source.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-selected-as-the-dynamic-field-source-1024x640.webp\" alt=\"gallery meta field selected as the dynamic field source\" class=\"wp-image-45682\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-selected-as-the-dynamic-field-source-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-selected-as-the-dynamic-field-source-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-selected-as-the-dynamic-field-source-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-selected-as-the-dynamic-field-source-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-selected-as-the-dynamic-field-source-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-meta-field-selected-as-the-dynamic-field-source.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Enable the <strong>Filter field output<\/strong> toggle and select the \u201cImages gallery grid\u201d or \u201cImages gallery slider\u201d option in the <strong>Callback<\/strong> dropdown menu.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/images-gallery-callbacks.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/images-gallery-callbacks-1024x640.webp\" alt=\"images gallery callbacks\" class=\"wp-image-45683\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/images-gallery-callbacks-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/images-gallery-callbacks-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/images-gallery-callbacks-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/images-gallery-callbacks-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/images-gallery-callbacks-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/images-gallery-callbacks.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>Afterward, style the gallery in the <strong>Style <\/strong>tab if needed and click the \u201c<strong>Update<\/strong>\u201d button to save the changes.<\/p>\n<\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"check-the-result\">Check the Result<\/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>Open one of the pages on the front end to check if the gallery is displayed.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-on-the-front-end.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"640\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-on-the-front-end-1024x640.webp\" alt=\"gallery on the front end\" class=\"wp-image-45684\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-on-the-front-end-1024x640.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-on-the-front-end-300x188.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-on-the-front-end-768x480.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-on-the-front-end-1536x960.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-on-the-front-end-600x375.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/gallery-on-the-front-end.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n<\/div><\/div>\n\n\n\n<p>Now you know how to create a custom gallery and display the gallery for posts with <em>JetEngine<\/em>\u2019s<em> <\/em><strong>Dynamic Field<\/strong> widget\/block for the WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This tutorial describes how to display a dynamic gallery for a WordPress post or term within the grid and slider using the JetEngine Dynamic Field widget\/block.<\/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>How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block \u2014 JetEngine | Crocoblock<\/title>\n<meta name=\"description\" content=\"JetEngine\u2019s Dynamic Field widget\/block allows showing the gallery in a grid and slider form. Learn more about how to set a custom callback in the widget\/block to display a gallery for WordPress.\" \/>\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-field-widget-grid-gallery-and-slider-gallery-options-overview\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block \u2014 JetEngine | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"JetEngine\u2019s Dynamic Field widget\/block allows showing the gallery in a grid and slider form. Learn more about how to set a custom callback in the widget\/block to display a gallery for WordPress.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2024-09-18T14:57:30+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory-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=\"4 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-field-widget-grid-gallery-and-slider-gallery-options-overview\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/\",\"name\":\"How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block \u2014 JetEngine | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2019-06-03T13:43:37+00:00\",\"dateModified\":\"2024-09-18T14:57:30+00:00\",\"description\":\"JetEngine\u2019s Dynamic Field widget\/block allows showing the gallery in a grid and slider form. Learn more about how to set a custom callback in the widget\/block to display a gallery for WordPress.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-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\":\"How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block\"}]},{\"@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":"How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block \u2014 JetEngine | Crocoblock","description":"JetEngine\u2019s Dynamic Field widget\/block allows showing the gallery in a grid and slider form. Learn more about how to set a custom callback in the widget\/block to display a gallery for WordPress.","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-field-widget-grid-gallery-and-slider-gallery-options-overview\/","og_locale":"en_US","og_type":"article","og_title":"How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block \u2014 JetEngine | Crocoblock","og_description":"JetEngine\u2019s Dynamic Field widget\/block allows showing the gallery in a grid and slider form. Learn more about how to set a custom callback in the widget\/block to display a gallery for WordPress.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/","og_site_name":"Help Center","article_modified_time":"2024-09-18T14:57:30+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2024\/09\/jetengine-modules-directory-1024x640.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/","name":"How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block \u2014 JetEngine | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2019-06-03T13:43:37+00:00","dateModified":"2024-09-18T14:57:30+00:00","description":"JetEngine\u2019s Dynamic Field widget\/block allows showing the gallery in a grid and slider form. Learn more about how to set a custom callback in the widget\/block to display a gallery for WordPress.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-overview\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-dynamic-field-widget-grid-gallery-and-slider-gallery-options-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":"How to Display Grid and Slider Galleries with Dynamic Field Widget\/Block"}]},{"@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\/9458"}],"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=9458"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=9458"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=9458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}