{"id":42497,"date":"2023-11-13T12:59:17","date_gmt":"2023-11-13T12:59:17","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&#038;p=42497"},"modified":"2026-05-19T10:36:23","modified_gmt":"2026-05-19T10:36:23","slug":"creating-listing-template-using-timber-twig-view","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/","title":{"rendered":"How to Create a Listing Template Using Timber\/Twig View"},"content":{"rendered":"\n<p>With the <strong>Listing<\/strong> template, you can display posts, users, terms, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-options-page-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>relations<\/strong><\/a>, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-options-page-overview\/\"><strong>Options Pages<\/strong><\/a> data, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/query-builder-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Query Builder<\/strong><\/a> data, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/how-to-create-a-repeater-with-jetengine-repeater-usage-examples\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Repeater fields<\/strong><\/a>, <a href=\"https:\/\/crocoblock.com\/knowledge-base\/articles\/jetengine-how-to-create-a-custom-content-type\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Content Type<\/strong><\/a> items, and <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/jetengine-how-to-display-custom-content-type-items-using-rest-api\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>REST API endpoint<\/strong><\/a> items.<\/p>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/timber-library\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Timber<\/em><\/a><em> <\/em>is a WordPress plugin that allows you to write HTML using the <a href=\"https:\/\/twig.symfony.com\/doc\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Twig Template Engine<\/em><\/a>, separate from PHP files.<\/p>\n\n\n\n<p>With the Timber\/Twig view, you can create a high-performance listing template using HTML and CSS. Also, you can use additional tools, such as presets, dynamic data buttons, filters, and conditional tags, to ease the listing creation process.<\/p>\n\n\n\n<p>Refer to our video guide for a visual explanation of how to create a <strong>Listing Item<\/strong> in the Timber\/Twig view. <\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Build Dynamic Listing Grids in WordPress with JetEngine\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/jM16Uhu3JsU?start=1801&#038;feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"preparations-and-listing-template-creation\">Preparations and Listing Template Creation<\/h2>\n\n\n\n<p>First of all, proceed to the <strong><em>JetEngine &gt; JetEngine &gt; Performance <\/em><\/strong>tab, enable the <strong>Timber\/Twig Views <\/strong>toggle, and click the \u201c<strong>Save tweaks config<\/strong>\u201d button. After that, the Timber\/Twig view will be available for listings.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2.webp\" alt=\"high performant timber\/twig view\" class=\"wp-image-42501\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Then, head to the <strong><em>JetEngine &gt; Listings <\/em><\/strong>tab and hit the \u201c<strong>Add New<\/strong>\u201d button.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-new-listing-item-button.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-new-listing-item-button.webp\" alt=\"add new listing item button\" class=\"wp-image-42499\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-new-listing-item-button.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-new-listing-item-button-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-new-listing-item-button-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-new-listing-item-button-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-new-listing-item-button-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-new-listing-item-button-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Select the needed <strong>Listing source<\/strong>. As an example, you can create a listing for default WordPress posts. We picked the \u201cPosts\u201d source and the \u201cDoctors\u201d <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/custom-post-type-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Custom Post Type<\/strong><\/a>.<\/p>\n\n\n\n<p>For that, we previously <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-a-custom-post-type-based-on-jetengine-plugin\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>created the Custom Post Type<\/strong><\/a> with <a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/meta-field-types-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>custom meta fields<\/strong><\/a> and added several posts.<\/p>\n\n\n\n<p>We filled the post title with the doctor&#8217;s name, the post content with the doctor\u2019s info, and the post thumbnail with the doctor&#8217;s photo. Also, we completed custom fields with additional information, such as the doctor\u2019s specialty, practice experience, email, etc.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-with-custom-meta-fields.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-with-custom-meta-fields.webp\" alt=\"post with custom meta fields\" class=\"wp-image-42503\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-with-custom-meta-fields.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-with-custom-meta-fields-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-with-custom-meta-fields-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-with-custom-meta-fields-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-with-custom-meta-fields-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-with-custom-meta-fields-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Then, enter the <strong>Listing item<\/strong> <strong>name <\/strong>(unrequired), select the \u201cTimber\/Twig\u201d <strong>Listing view<\/strong>, and push the \u201c<strong>Create Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/creating-listing-template-with-the-timber-twig-view.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/creating-listing-template-with-the-timber-twig-view-1024x618.webp\" alt=\"creating a listing template with the timber\/twig view\" class=\"wp-image-42500\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/creating-listing-template-with-the-timber-twig-view-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/creating-listing-template-with-the-timber-twig-view-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/creating-listing-template-with-the-timber-twig-view-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/creating-listing-template-with-the-timber-twig-view-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/creating-listing-template-with-the-timber-twig-view-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/creating-listing-template-with-the-timber-twig-view.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>After creating the Listing, you\u2019ll be redirected to the Timber\/Twig editor.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/timber-twig-editor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/timber-twig-editor.webp\" alt=\"timber twig editor\" class=\"wp-image-42505\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/timber-twig-editor.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/timber-twig-editor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/timber-twig-editor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/timber-twig-editor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/timber-twig-editor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/timber-twig-editor-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"displaying-the-dynamic-and-default-data\">Displaying the Dynamic and Default Data<\/h2>\n\n\n\n<p>We will create a Listing template to display the doctors\u2019 information. Firstly, we will display the post title (doctor&#8217;s name). For that, we hit the \u201c<strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#dynamic-data\" target=\"_blank\" rel=\"noreferrer noopener\">Dynamic Data<\/a><\/strong>\u201d button and pick the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#post\" target=\"_blank\" rel=\"noreferrer noopener\">Post<\/a>\u201d option.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-default-data.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-default-data.webp\" alt=\"post default data\" class=\"wp-image-42502\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-default-data.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-default-data-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-default-data-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-default-data-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-default-data-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-default-data-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We selected the \u201cPost Title\u201d field from the drop-down menu and hit the \u201c<strong>Insert<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/select-data-to-show-post-title.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/select-data-to-show-post-title.webp\" alt=\"select data to show post title\" class=\"wp-image-42504\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/select-data-to-show-post-title.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/select-data-to-show-post-title-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/select-data-to-show-post-title-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/select-data-to-show-post-title-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/select-data-to-show-post-title-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/select-data-to-show-post-title-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>The {{ post.title }} placeholder will be inserted into the sheet. Also, it can be typed manually without using the \u201c<strong>Dynamic Data<\/strong>\u201d functionality.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-data.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-data.webp\" alt=\"post title data\" class=\"wp-image-42513\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-data.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-data-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-data-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-data-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-data-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-data-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Secondly, we will display the custom meta field value. We hit the \u201c<strong>Dynamic data<\/strong>\u201d value and chose the \u201cDynamic Data\u201d option.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-dynamic-data.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-dynamic-data.webp\" alt=\"jetengine dynamic data\" class=\"wp-image-42509\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-dynamic-data.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-dynamic-data-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-dynamic-data-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-dynamic-data-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-dynamic-data-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-dynamic-data-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We selected the \u201cMeta Data\u201d <strong>Source<\/strong> and picked the needed <strong>Meta Field<\/strong> (\u201cSpecialty\u201d Text meta field). Then, we hit the \u201c<strong>Insert<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/meta-data-source.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/meta-data-source.webp\" alt=\"meta data source\" class=\"wp-image-42510\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/meta-data-source.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/meta-data-source-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/meta-data-source-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/meta-data-source-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/meta-data-source-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/meta-data-source-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>It inserts the placeholder for the custom meta field value:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{{ jet_engine_data(args={source:'meta',meta_key:'_specialty'}) }}\n<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-jetengine-custom-field.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-jetengine-custom-field.webp\" alt=\"placeholder for jetengine custom field\" class=\"wp-image-42511\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-jetengine-custom-field.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-jetengine-custom-field-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-jetengine-custom-field-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-jetengine-custom-field-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-jetengine-custom-field-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-jetengine-custom-field-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Also, we inserted the \u201cPractice experience\u201d <strong>Number <\/strong>meta field. We added the \u201cyr. of practice\u201d custom text after the placeholder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{{ jet_engine_data(args={source:'meta',meta_key:'_practice-experience'}) }} yr. of practice\n<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-text-after-the-value.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-text-after-the-value.webp\" alt=\"custom text after the value\" class=\"wp-image-42507\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-text-after-the-value.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-text-after-the-value-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-text-after-the-value-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-text-after-the-value-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-text-after-the-value-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-text-after-the-value-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"applying-filters-to-results\">Applying Filters to Results<\/h2>\n\n\n\n<p>Next, we clicked the \u201c<strong>Dynamic data<\/strong>\u201d button, picked the \u201cPost\u201d option, and selected the \u201cPost Content\u201d field. Then, we pushed the \u201c<strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#filter-data\" target=\"_blank\" rel=\"noreferrer noopener\">Add filter to result<\/a><\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-filter-to-result.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-filter-to-result.webp\" alt=\"add filter to result\" class=\"wp-image-42506\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-filter-to-result.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-filter-to-result-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-filter-to-result-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-filter-to-result-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-filter-to-result-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/add-filter-to-result-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>This option allows changing the dynamic data or displaying it in the needed format.<\/p>\n\n\n\n<p>Since the text in the post content field is too long for the listing item, we will shorten it.<\/p>\n\n\n\n<p>For that, we opted for the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#jetengine-callback\">JetEngine Callback<\/a>.\u201d<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-callback-1.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-callback-1.webp\" alt=\"\" class=\"wp-image-42508\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-callback-1.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-callback-1-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-callback-1-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-callback-1-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-callback-1-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/jetengine-callback-1-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>From the <strong>Callback function <\/strong>drop-down menu, we picked the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/#show-the-text-from-text-and-textarea-meta-fields\" target=\"_blank\" rel=\"noreferrer noopener\">Trim string by charts or words<\/a>\u201d callback.<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters 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=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">This option appears in the list after you enable the \u201cTrim string callback\u201d toggle in the <strong><em>WordPress Dashboard &gt; JetEngine &gt; JetEngine &gt; Modules &gt; External Modules<\/em><\/strong> tab.<\/p><\/div><\/div>\n\n\n\n<p>From the <strong>Trimmed Type<\/strong> drop-down menu, you can select if you want to shorten a text to a certain number of words or characters. We selected the \u201cWords\u201d <strong>Trimmed Type<\/strong> and entered the desired number (\u201c5\u201d) into the <strong>String length<\/strong> field. Then, we hit the \u201c<strong>Insert<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-string-by-chars-or-words.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-string-by-chars-or-words.webp\" alt=\"trim string by chars or words\" class=\"wp-image-42514\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-string-by-chars-or-words.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-string-by-chars-or-words-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-string-by-chars-or-words-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-string-by-chars-or-words-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-string-by-chars-or-words-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-string-by-chars-or-words-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>It inserts such a placeholder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{{ post.content|jet_engine_callback(args={cb:'jet_engine_trim_string_callback',jet_trim_cb_type:'words',jet_trim_cb_length:'5'}) }}\n<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-with-the-jetengine-callback.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-with-the-jetengine-callback.webp\" alt=\"placeholder with the jetengine callback\" class=\"wp-image-42512\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-with-the-jetengine-callback.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-with-the-jetengine-callback-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-with-the-jetengine-callback-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-with-the-jetengine-callback-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-with-the-jetengine-callback-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-with-the-jetengine-callback-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Also, text can be shortened with the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#trim-text-by-words\" target=\"_blank\" rel=\"noreferrer noopener\">Trim text by words<\/a>\u201d and \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#trim-text-by-chars\" target=\"_blank\" rel=\"noreferrer noopener\">Trim text by chars<\/a>\u201d <em>Timber<\/em> filters.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-text-by-words-and-trim-text-by-chars-timber-filters.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-text-by-words-and-trim-text-by-chars-timber-filters.webp\" alt=\"trim text by words and trim text by chars timber filters\" class=\"wp-image-42523\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-text-by-words-and-trim-text-by-chars-timber-filters.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-text-by-words-and-trim-text-by-chars-timber-filters-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-text-by-words-and-trim-text-by-chars-timber-filters-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-text-by-words-and-trim-text-by-chars-timber-filters-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-text-by-words-and-trim-text-by-chars-timber-filters-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/trim-text-by-words-and-trim-text-by-chars-timber-filters-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We employed the &lt;div&gt; element to segment placeholders, ensuring that each of them appears on a distinct line within the listing item.<\/p>\n\n\n\n<p>Now, let\u2019s add the post thumbnail. We will achieve this using the following method: by hitting the \u201c<strong>Dynamic data<\/strong>\u201d<strong> <\/strong>button and picking the \u201cDynamic Data\u201d option. In the pop-up, we selected the \u201cMeta Data\u201d <strong>Source<\/strong> and entered the \u201c_thumbnail_id\u201d <strong>Custom Field Key<\/strong>. Then, we hit the \u201c<strong>Add filter to result<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-field-key.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-field-key.webp\" alt=\"custom field key\" class=\"wp-image-42517\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-field-key.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-field-key-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-field-key-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-field-key-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-field-key-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/custom-field-key-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We picked the \u201cJetEngine Callback.\u201d Then, we selected the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/#set-the-display-from-the-media-meta-field\" target=\"_blank\" rel=\"noreferrer noopener\">Get image by ID<\/a>\u201d from the <strong>Callback function <\/strong>drop-down menu. This option also allows us to pick the <strong>Image size<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"844\" height=\"562\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/get-image-by-ID-callback.webp\" alt=\"get image by ID callback\" class=\"wp-image-42518\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/get-image-by-ID-callback.webp 844w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/get-image-by-ID-callback-300x200.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/get-image-by-ID-callback-768x511.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/get-image-by-ID-callback-600x400.webp 600w\" sizes=\"(max-width: 844px) 100vw, 844px\" \/><\/div>\n\n\n\n<p>Then, we hit the <strong>\u201cInsert\u201d <\/strong>button and got such a placeholder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{{ jet_engine_data(args={source:'meta',custom_key:'_thumbnail_id'})|jet_engine_callback(args={cb:'wp_get_attachment_image'}) }}<\/code><\/pre>\n\n\n\n<p>The description of all <em>JetEngine <\/em>callbacks can be found <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/dynamic-field-widget-overview\/#filter-field-output-overview\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>here<\/strong><\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-the-post-thumbnail.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-the-post-thumbnail.webp\" alt=\"placeholder for the post thumbnail\" class=\"wp-image-42522\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-the-post-thumbnail.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-the-post-thumbnail-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-the-post-thumbnail-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-the-post-thumbnail-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-the-post-thumbnail-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/placeholder-for-the-post-thumbnail-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conditional-tags\">Conditional Tags<\/h2>\n\n\n\n<p>Now, let\u2019s observe the \u201c<strong><a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#conditional-tags\" target=\"_blank\" rel=\"noreferrer noopener\">Conditional Tags<\/a><\/strong>\u201d button.&nbsp;<\/p>\n\n\n<div class=\"note-banner d-flex border-bold border-jetsmartfilters 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=\"M1 21H23L12 2L1 21ZM13 18H11V16H13V18ZM13 14H11V10H13V14Z\" fill=\"#FA5450\"\/><\/svg><\/div><div class=\"d-flex flex-column\"><div class=\"text-900 mb-12\">Warning<\/div><p class=\"m-0\">To use the <em>JetEngine<\/em> enhanced conditions, enable the <strong>Dynamic Visibility<\/strong> toggle in the <strong><em>WordPress Dashboard &gt; JetEngine &gt; JetEngine<\/strong><\/em> tab.<\/p><\/div><\/div>\n\n\n\n<p>The way the Conditional Tags&#8217; operate is much like the <em>JetEngine <\/em><a href=\"https:\/\/crocoblock.com\/knowledge-base\/features\/dynamic-visibility-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Dynamic Visibility<\/strong><\/a><strong> <\/strong>feature, displaying elements when the specified conditions are met.<\/p>\n\n\n\n<p>Conditional logic in Twig is available with such a construction:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% if statement_to_check %}\n&lt;!-- Paste your HTML here --&gt;\n{% endif %} }}\n<\/code><\/pre>\n\n\n\n<p>To learn more about the conditional logic, proceed to the <a href=\"https:\/\/twig.symfony.com\/doc\/2.x\/tags\/if.html\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><strong>Twig documentation<\/strong><\/a>.&nbsp;<\/p>\n\n\n\n<p>Now, let\u2019s add a custom label that will appear in the listing Item if the value in the \u201cPractice experience\u201d <strong>Number <\/strong>field is more than \u201c10.\u201d<\/p>\n\n\n\n<p>Initially, we hit the \u201c<strong>Conditional Tags<\/strong>\u201d<strong> <\/strong>button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tags-button.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tags-button.webp\" alt=\"conditional tags button\" class=\"wp-image-42516\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tags-button.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tags-button-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tags-button-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tags-button-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tags-button-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tags-button-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We picked the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#general\" target=\"_blank\" rel=\"noreferrer noopener\">Greater than<\/a>\u201d <strong>Condition<\/strong>. Then, we entered the field name into the <strong>Field<\/strong>, entered \u201c10\u201d into the <strong>Value<\/strong>, chose the \u201cCurrent listing item object\u201d <strong>Context<\/strong>, and set the \u201cNumeric\u201d <strong>Data type<\/strong>. Eventually, we pressed the \u201c<strong>Insert<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/greater-than-condition.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"618\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/greater-than-condition-1024x618.webp\" alt=\"greater than condition\" class=\"wp-image-42519\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/greater-than-condition-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/greater-than-condition-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/greater-than-condition-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/greater-than-condition-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/greater-than-condition-600x362.webp 600w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/greater-than-condition.webp 1824w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/div>\n\n\n\n<p>It inserted such a construction:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% if jet_engine_show_if(args={\"jedv_condition\":\"greater-than\",\"jedv_field\":\"_practice-experience\",\"jedv_value\":\"10\",\"jedv_context\":\"current_listing\",\"jedv_data_type\":\"numeric\"}) %}\n&lt;!-- Paste your HTML here --&gt;\n{% endif %}\n<\/code><\/pre>\n\n\n\n<p>Instead of &lt;!&#8211; Paste your HTML here &#8211;&gt; we typed \u201cMore than 10 years of experience!\u201d<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tag-twig-construction-with-custom-label.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tag-twig-construction-with-custom-label.webp\" alt=\"conditional tag twig construction with custom label\" class=\"wp-image-42515\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tag-twig-construction-with-custom-label.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tag-twig-construction-with-custom-label-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tag-twig-construction-with-custom-label-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tag-twig-construction-with-custom-label-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tag-twig-construction-with-custom-label-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/conditional-tag-twig-construction-with-custom-label-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>After inputting all essential constructions into the <strong>HTML<\/strong> sheet, we can hit the \u201c<strong>Reload preview<\/strong>\u201d button to display the result in the <strong>Preview <\/strong>area. It shows only the default post data; the <em>JetEngine <\/em>data can be checked on the page with the <strong>Listing Grid <\/strong>or on the front end.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-preview-in-timber-twig-editor.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-preview-in-timber-twig-editor.webp\" alt=\"listing preview in the timber\/twig editor\" class=\"wp-image-42520\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-preview-in-timber-twig-editor.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-preview-in-timber-twig-editor-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-preview-in-timber-twig-editor-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-preview-in-timber-twig-editor-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-preview-in-timber-twig-editor-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-preview-in-timber-twig-editor-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"css-style-settings\">CSS Style Settings<\/h2>\n\n\n\n<p>Now, let\u2019s explore the CSS style settings.<\/p>\n\n\n\n<p>For that, we added a \u201cclass\u201d attribute with the \u201cdoctor-name\u201d value to the {{ post.title }} placeholder:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a class=\"doctor-name\"&gt;{{ post.title }}&lt;\/a&gt; \n<\/code><\/pre>\n\n\n\n<p>In the CSS sheet, we typed:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>selector .doctor-name {\n\tfont-size: 18px;\n}\n<\/code><\/pre>\n\n\n\n<p>We used the \u201cselector\u201d statement before the CSS selector to make it unique for the current listing.<\/p>\n\n\n\n<p>After reloading the preview, we can see that changes are applied to the post title (doctor\u2019s name).<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-with-the-CSS-style.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-with-the-CSS-style.webp\" alt=\"post title with the CSS style\" class=\"wp-image-42528\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-with-the-CSS-style.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-with-the-CSS-style-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-with-the-CSS-style-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-with-the-CSS-style-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-with-the-CSS-style-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/post-title-with-the-CSS-style-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"conditional-tags-with-css\">Conditional Tags with CSS<\/h2>\n\n\n\n<p>The conditional tags can also be applied to the style settings.<\/p>\n\n\n\n<p>To check it, let\u2019s add a border to the image if the listing item\u2019s position in the <strong>Listing Grid<\/strong> is an even number.<\/p>\n\n\n\n<p>We hit the \u201c<strong>Conditional Tags<\/strong>\u201d<strong> <\/strong>button, selected the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#listings\" target=\"_blank\" rel=\"noreferrer noopener\">Is odd item<\/a>\u201d <strong>Condition<\/strong>,<strong> <\/strong>and pushed the \u201c<strong>Insert<\/strong>\u201d<strong> <\/strong>button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-in-the-listing-grid-conditional-tag.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-in-the-listing-grid-conditional-tag.webp\" alt=\"is odd item in the listing grid conditional tag\" class=\"wp-image-42527\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-in-the-listing-grid-conditional-tag.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-in-the-listing-grid-conditional-tag-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-in-the-listing-grid-conditional-tag-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-in-the-listing-grid-conditional-tag-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-in-the-listing-grid-conditional-tag-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-in-the-listing-grid-conditional-tag-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We received such a structure:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% if jet_engine_show_if(args={\"jedv_condition\":\"listing-odd\"}) %}\n&lt;!-- Paste your HTML here --&gt;\n{% endif %}\n<\/code><\/pre>\n\n\n\n<p>We copied the post thumbnail placeholder and pasted it instead of &lt;!&#8211; Paste your HTML here &#8211;&gt;:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% if jet_engine_show_if(args={\"jedv_condition\":\"listing-odd\"}) %}\n{{ jet_engine_data(args={source:'meta',custom_key:'_thumbnail_id'})|jet_engine_callback(args={cb:'wp_get_attachment_image'}) }}\n{% endif %}\n<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-conditional-structure-with-the-post-thumbnail-placeholder.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-conditional-structure-with-the-post-thumbnail-placeholder.webp\" alt=\"is odd item conditional structure with the post thumbnail placeholder\" class=\"wp-image-42526\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-conditional-structure-with-the-post-thumbnail-placeholder.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-conditional-structure-with-the-post-thumbnail-placeholder-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-conditional-structure-with-the-post-thumbnail-placeholder-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-conditional-structure-with-the-post-thumbnail-placeholder-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-conditional-structure-with-the-post-thumbnail-placeholder-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-odd-item-conditional-structure-with-the-post-thumbnail-placeholder-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>Then, we hit the \u201c<strong>Conditional Tags<\/strong>\u201d button again, selected the \u201c<a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/timber-twig-listing-view-overview\/#listings\">Is even item<\/a>\u201d <strong>Condition<\/strong>, and pushed the \u201c<strong>Insert<\/strong>\u201d button.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-in-the-listing-grid-conditional-tag.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-in-the-listing-grid-conditional-tag.webp\" alt=\"is even item in the listing grid conditional tag\" class=\"wp-image-42525\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-in-the-listing-grid-conditional-tag.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-in-the-listing-grid-conditional-tag-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-in-the-listing-grid-conditional-tag-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-in-the-listing-grid-conditional-tag-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-in-the-listing-grid-conditional-tag-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-in-the-listing-grid-conditional-tag-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>We received such a structure:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% if jet_engine_show_if(args={\"jedv_condition\":\"listing-even\"}) %}\n&lt;!-- Paste your HTML here --&gt;\n{% endif %}\n<\/code><\/pre>\n\n\n\n<p>We cut the post thumbnail placeholder and pasted it instead of &lt;!&#8211; Paste your HTML here &#8211;&gt;. Also, we added a \u201cclass\u201d attribute with the value of \u201ceven-item\u201d to it:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{% if jet_engine_show_if(args={\"jedv_condition\":\"listing-even\"}) %}\n&lt;a class=\"even-item\"&gt;{{ jet_engine_data(args={source:'meta',custom_key:'_thumbnail_id'})|jet_engine_callback(args={cb:'wp_get_attachment_image'}) }}&lt;\/a&gt;\n{% endif %}\n<\/code><\/pre>\n\n\n\n<p>At last, we typed such a style into the <strong>CSS <\/strong>sheet:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>selector .even-item {\n\tdisplay: flex;\n\tborder: 1px solid;\n\tpadding: 5px;\n}\n<\/code><\/pre>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-conditional-structure-with-the-post-thumbnail-placeholder.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-conditional-structure-with-the-post-thumbnail-placeholder.webp\" alt=\"is even item conditional structure with the post thumbnail placeholder\" class=\"wp-image-42524\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-conditional-structure-with-the-post-thumbnail-placeholder.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-conditional-structure-with-the-post-thumbnail-placeholder-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-conditional-structure-with-the-post-thumbnail-placeholder-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-conditional-structure-with-the-post-thumbnail-placeholder-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-conditional-structure-with-the-post-thumbnail-placeholder-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/is-even-item-conditional-structure-with-the-post-thumbnail-placeholder-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>To preserve the alterations, we hit the\u201c<strong>Save<\/strong>\u201d button.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"observing-results-in-the-listing-grid\">Observing Results in the Listing Grid<\/h2>\n\n\n\n<p>To display the listing template in the <strong>Listing Grid<\/strong>, you can create a page in the WordPress block, <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Elementor<\/em><\/a>, or <a href=\"https:\/\/bricksbuilder.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\"><em>Bricks<\/em><\/a> editor. We used the WordPress editor.<\/p>\n\n\n\n<p>For that, we went to the <strong><em>WordPress Dashboard &gt; Pages &gt; Add New <\/em><\/strong>tab, placed the <a href=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/listing-grid-block-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Listing Grid<\/strong> block<\/a>, and selected the recently created <strong>Listing <\/strong>from the drop-down menu.<\/p>\n\n\n\n<p>The Listing template in the <strong>Listing Grid<\/strong> displays the values from the meta fields we inserted into the <strong>HTML <\/strong>sheet. Also, CSS styles are applied to the post titles and the images in every even Listing item.<\/p>\n\n\n\n<div class=\"wp-block-image size-large\"><a href=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-template-created-with-TimberTwig-view.webp\"><img loading=\"lazy\" decoding=\"async\" width=\"1824\" height=\"1100\" src=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-template-created-with-TimberTwig-view.webp\" alt=\"listing template created with Timber\/Twig view\" class=\"wp-image-42521\" srcset=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-template-created-with-TimberTwig-view.webp 1824w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-template-created-with-TimberTwig-view-300x181.webp 300w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-template-created-with-TimberTwig-view-1024x618.webp 1024w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-template-created-with-TimberTwig-view-768x463.webp 768w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-template-created-with-TimberTwig-view-1536x926.webp 1536w, https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/listing-template-created-with-TimberTwig-view-600x362.webp 600w\" sizes=\"(max-width: 1824px) 100vw, 1824px\" \/><\/a><\/div>\n\n\n\n<p>That\u2019s all. Now you know how to create the Listing Template with Timber\/Twig view, available with the <em>JetEngine <\/em>plugin for your WordPress website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>From this tutorial, you will learn how to build a Listing template with the Timber\/Twig view.<\/p>\n","protected":false},"author":8,"featured_media":0,"template":"","format":"standard","builder-category":[],"article-category":[388],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.9 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to Create a Listing Template Using Timber\/Twig View | Crocoblock<\/title>\n<meta name=\"description\" content=\"Learn how to build a Listing template with the Timber\/Twig view. Display values from meta fields using UI components and apply filters and conditions to them available with the JetEngine plugin.\" \/>\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\/creating-listing-template-using-timber-twig-view\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Listing Template Using Timber\/Twig View | Crocoblock\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a Listing template with the Timber\/Twig view. Display values from meta fields using UI components and apply filters and conditions to them available with the JetEngine plugin.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/\" \/>\n<meta property=\"og:site_name\" content=\"Help Center\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-19T10:36:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2.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=\"13 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\/creating-listing-template-using-timber-twig-view\/\",\"url\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/\",\"name\":\"How to Create a Listing Template Using Timber\/Twig View | Crocoblock\",\"isPartOf\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/#website\"},\"datePublished\":\"2023-11-13T12:59:17+00:00\",\"dateModified\":\"2026-05-19T10:36:23+00:00\",\"description\":\"Learn how to build a Listing template with the Timber\/Twig view. Display values from meta fields using UI components and apply filters and conditions to them available with the JetEngine plugin.\",\"breadcrumb\":{\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/#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 Create a Listing Template Using Timber\/Twig View\"}]},{\"@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 Create a Listing Template Using Timber\/Twig View | Crocoblock","description":"Learn how to build a Listing template with the Timber\/Twig view. Display values from meta fields using UI components and apply filters and conditions to them available with the JetEngine plugin.","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\/creating-listing-template-using-timber-twig-view\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Listing Template Using Timber\/Twig View | Crocoblock","og_description":"Learn how to build a Listing template with the Timber\/Twig view. Display values from meta fields using UI components and apply filters and conditions to them available with the JetEngine plugin.","og_url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/","og_site_name":"Help Center","article_modified_time":"2026-05-19T10:36:23+00:00","og_image":[{"url":"https:\/\/crocoblock.com\/knowledge-base\/wp-content\/uploads\/2023\/11\/high-performant-timber-twig-view-2.webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/","url":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/","name":"How to Create a Listing Template Using Timber\/Twig View | Crocoblock","isPartOf":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/#website"},"datePublished":"2023-11-13T12:59:17+00:00","dateModified":"2026-05-19T10:36:23+00:00","description":"Learn how to build a Listing template with the Timber\/Twig view. Display values from meta fields using UI components and apply filters and conditions to them available with the JetEngine plugin.","breadcrumb":{"@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-listing-template-using-timber-twig-view\/#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 Create a Listing Template Using Timber\/Twig View"}]},{"@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\/42497"}],"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\/8"}],"wp:attachment":[{"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/media?parent=42497"}],"wp:term":[{"taxonomy":"builder-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/builder-category?post=42497"},{"taxonomy":"article-category","embeddable":true,"href":"https:\/\/crocoblock.com\/knowledge-base\/wp-json\/wp\/v2\/article-category?post=42497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}