{"id":42590,"date":"2023-11-21T11:25:02","date_gmt":"2023-11-21T11:25:02","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=42590"},"modified":"2024-02-29T13:59:26","modified_gmt":"2024-02-29T13:59:26","slug":"creating-custom-listing-layouts-using-twig-and-extramural-components","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/creating-custom-listing-layouts-using-twig-and-extramural-components\/","title":{"rendered":"How to Create Custom Listing Layouts Using Twig and Extramural Components"},"content":{"rendered":"\n

Within the Timber\/Twig view, you can create a Listing template using HTML and CSS and additional tools, such as presets, dynamic data buttons, filters, and conditional tags. <\/p>\n\n\n\n

To avoid building a listing from the ground up, you can enhance it with superb layouts using extramural components. For example, you can find such components in this article<\/strong><\/a>.<\/p>\n\n\n

<\/svg><\/div>
Warning<\/div>

Be careful when copying and pasting extramural components, as they could provide the wrong result. Pay close attention to each part of the copied code and make necessary edits. Further, we will present examples highlighting elements that might require corrections.<\/p><\/div><\/div>\n\n\n\n

Creating a Listing Template Within the Timber\/Twig View<\/h2>\n\n\n\n

First, we proceeded to the JetEngine > JetEngine > Performance <\/em><\/strong>tab, enabled the Timber\/Twig Views <\/strong>toggle, picked and installed the Timber<\/em><\/a> plugin, and clicked the \u201cSave tweaks config<\/strong>\u201d button. After that, the Timber\/Twig view was available for listings.<\/p>\n\n\n\n

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

Then, we headed to the JetEngine > Listings <\/em><\/strong>tab and hit the \u201cAdd New<\/strong>\u201d button.<\/p>\n\n\n\n

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

As the Listing source<\/strong>, posts, users, terms, relations<\/strong><\/a>, Options Pages<\/strong><\/a> data, Query Builder<\/strong><\/a> data, Repeater fields<\/strong><\/a>, Custom Content Type<\/strong><\/a> items, and REST API endpoint<\/strong><\/a> items can be chosen.<\/p>\n\n\n\n

We picked the \u201cPosts\u201d Listing source <\/strong>and set a Custom Post Type<\/strong><\/a> in the following field, but a listing can be created for the default WordPress posts as well.<\/p>\n\n\n\n

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

Choosing the Desired Layout for the Listing Template<\/h2>\n\n\n\n

We selected a layout<\/strong><\/a> with the hover effect from the article<\/strong><\/a> with a selection of components.<\/p>\n\n\n\n

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

Since the listing template defines the layout of one item, we removed all unnecessary elements, like the info banner, wrapper component, and numbering, from the HTML <\/strong>area and copied only the first card layout:<\/p>\n\n\n\n

<div class=\"card-grid-space\">\n    <a class=\"card\" href=\"https:\/\/codetheweb.blog\/2017\/10\/06\/html-syntax\/\" style=\"--bg-img: url(https:\/\/images1-focus-opensocial.googleusercontent.com\/gadgets\/proxy?container=focus&resize_w=1500&url=https:\/\/codetheweb.blog\/assets\/img\/posts\/html-syntax\/cover.jpg)\">\n      <div>\n        <h1>HTML Syntax<\/h1>\n        <p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax\u2026<\/p>\n        <div class=\"date\">6 Oct 2017<\/div>\n        <div class=\"tags\">\n          <div class=\"tag\">HTML<\/div>\n        <\/div>\n      <\/div>\n    <\/a>\n  <\/div>\n<\/code><\/pre>\n\n\n\n
In the CSS<\/strong> sheet, we removed the \u2018.info\u2019 and \u2018.cards-wrapper\u2019 rules since they had been applied to the deleted elements in the HTML <\/strong>sheet. Also, we eliminated the \u2018body,\u2019 \u2018a,\u2019 \u2018@media,\u2019 and \u2018@import\u2019 rules for providing style isolation, avoiding style conflicts, and reducing unnecessary overheads that might slow down the website.<\/p>\n\n\n\n
Then, we replaced the \u2018Heebo\u2019 and \u2018Open Sans\u2019 font families with \u2018Roboto.\u2019<\/p>\n\n\n
<\/svg><\/div>
Warning<\/div>
Pay attention to the font families in the copied CSS code. We recommend using font families that are integrated with your WordPress theme.<\/p><\/div><\/div>\n\n\n\n
\"roboto<\/figure>\n\n\n\n
Pasting HTML and CSS into the Corresponding Areas<\/h2>\n\n\n\n
We pasted the codes into the HTML <\/strong>and CSS <\/strong>sheet accordingly.<\/p>\n\n\n\n
We hit the \u201cReload preview<\/strong>\u201d button and obtained a result that contained static data that needed to be replaced with JetEngine<\/em> dynamic data.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n\n\n\n
In the HTML <\/strong>area, we replaced spaces with tabs to eliminate errors.<\/p>\n\n\n\n
\"extramural<\/div>\n\n\n\n
In the CSS<\/strong> sheet, we entered the \u2018selector\u2019 statement before each CSS selector to apply CSS styles only to the current listing so they wouldn\u2019t impact the whole website.<\/p>\n\n\n
<\/svg><\/div>
Warning<\/div>
Pay attention to the hierarchy; some lines contain two selectors to which you need to apply the \u2018selector\u2019 statement, for example:<\/p><\/div><\/div>\n\n\n\n
selector .card:before, selector .card:after {\n<\/code><\/pre>\n\n\n\n
\"selector<\/div>\n\n\n\n
Also, we changed the \u2018width: 15em;\u2019 style to \u2018width: 100%;\u2019 for the \u2018.card\u2019 rule that defines the card-like container\u2019s style. We did this to avoid problems while resizing. Also, the \u2018width: 15em;\u2019 style might be simply removed.<\/p>\n\n\n\n
\"width<\/div>\n\n\n\n
Replacing Static Data with Dynamic<\/h2>\n\n\n\n
Firstly, we needed to display the post thumbnail, so we edited a code:<\/p>\n\n\n\n
<a class=\"card\" href=\"{{ jet_engine_url(args={}) }}\" style=\"--bg-img: url({{ jet_engine_url(args={source:'_thumbnail_url'}) }})\">\n<\/code><\/pre>\n\n\n\n
\"HTML<\/div>\n\n\n\n
We deleted the URL from the \u2018href\u2019 attribute, hit the \u201cDynamic data<\/strong><\/a>\u201d button, and selected the \u201cDynamic URL<\/a>\u201d option.<\/p>\n\n\n\n
\"dynamic<\/div>\n\n\n\n
We picked the \u201cPermalink\u201d option as the Source <\/strong>and pushed the \u201cInsert<\/strong>\u201d button. In that way, we inserted the tag:<\/p>\n\n\n\n
{{ jet_engine_url(args={}) }}\n<\/code><\/pre>\n\n\n\n
\"permalink<\/div>\n\n\n\n
Then, we inserted the \u2018{{ jet_engine_url(args={source:’_thumbnail_url’}) }}\u2019 tag into the \u2018style=”–bg-img: url()”\u2019 CSS variable instead of the URL. <\/p>\n\n\n\n
We achieved that by hitting the \u201cDynamic data<\/strong>\u201d button, selecting the \u201cDynamic URL\u201d option again, picking the \u201cThumbnail URL\u201d as the Source<\/strong>, and pushing the \u201cInsert<\/strong>\u201d button.<\/p>\n\n\n\n
\"thumbnail<\/div>\n\n\n\n
Eventually, we got such a code to display the post thumbnail:<\/p>\n\n\n\n
<a class=\"card\" href=\"{{ jet_engine_url(args={}) }}\" style=\"--bg-img: url({{ jet_engine_url(args={source:'_thumbnail_url'}) }})\">\n<\/code><\/pre>\n\n\n\n
\"code<\/div>\n\n\n\n
Next, we edited the code for the post title:<\/p>\n\n\n\n
<h1>HTML Syntax<\/h1>\n<\/code><\/pre>\n\n\n\n
Since the <h1> element would disturb the semantic hierarchy on the page, we replaced it with the <div> element.<\/p>\n\n\n\n
Also, we added the \u2018class\u2019 attribute with the \u2018title\u2019 value.<\/p>\n\n\n\n
Then, we deleted the \u2018HTML Syntax\u2019 text, hit the \u201cDynamic data<\/strong>\u201d button, picked the \u201cPost<\/a>\u201d option, selected the \u201cPost Title\u201d data, and pushed the \u201cInsert<\/strong>\u201d button.<\/p>\n\n\n\n
\"post<\/div>\n\n\n\n
We obtained such a placeholder:<\/p>\n\n\n\n
<div class=\"title\">{{ post.title }}<\/div>\n<\/code><\/pre>\n\n\n\n
Also, we found the \u2018selector .card h1 {\u2018 line in the CSS <\/strong>sheet and replaced \u2018h1\u2019 with the \u2018.title\u2019 class:<\/p>\n\n\n\n
selector .card .title {\n<\/code><\/pre>\n\n\n\n
\"placeholder<\/div>\n\n\n\n
Then, we replaced the static text in this code:<\/p>\n\n\n\n
<p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax\u2026<\/p>\n<\/code><\/pre>\n\n\n\n
\"HTML<\/div>\n\n\n\n
For that, we hit the \u201cDynamic data<\/strong>\u201d button, picked the \u201cPost\u201d option, and selected the \u201cPost Content\u201d data. <\/p>\n\n\n\n
\"post<\/div>\n\n\n\n
Then, we pressed the \u201cAdd the filter to result<\/strong><\/a>\u201d button, picked the \u201cTrim text by words<\/a>\u201d option, typed the \u201c20\u201d Number of words<\/strong>, set \u201c…\u201d in the More string <\/strong>field, and clicked the \u201cInsert<\/strong>\u201d button.<\/p>\n\n\n\n
\"trim<\/div>\n\n\n\n
We received this element:<\/p>\n\n\n\n
<p>{{ post.content|excerpt('20','...') }}<\/p>\n<\/code><\/pre>\n\n\n\n
\"placeholder<\/div>\n\n\n\n
Then, we edited the code for the post date:<\/p>\n\n\n\n
<div class=\"date\">6 Oct 2017<\/div>\n<\/code><\/pre>\n\n\n\n
\"HTML<\/div>\n\n\n\n
We hit the \u201cDynamic data<\/strong>\u201d button, picked the \u201cPost\u201d option, and selected the \u201cPost Date\u201d data. <\/p>\n\n\n\n
\"post<\/div>\n\n\n\n
Then, we pressed the \u201cAdd the filter to result<\/strong>\u201d button, picked the \u201cJetEngine Callback\u201d option, selected the \u201cFormat date<\/a>\u201d callback, and pressed the \u201cInsert<\/strong>\u201d button.<\/p>\n\n\n\n
The description of all JetEngine <\/em>callbacks can be found here<\/a>.<\/p>\n\n\n\n
\"format<\/div>\n\n\n\n
We obtained such an element:<\/p>\n\n\n\n
<div class=\"date\">{{ post.post_date|jet_engine_callback(args={cb:'jet_engine_date'}) }}<\/div>\n<\/code><\/pre>\n\n\n\n
\"placeholder<\/div>\n\n\n\n
Then, we replaced the static text in this code with the term name of the custom taxonomy<\/strong><\/a> assigned to the CPT:<\/p>\n\n\n\n
<div class=\"tag\">HTML<\/div>\n<\/code><\/pre>\n\n\n\n
We hit the \u201cDynamic data<\/strong>\u201d button, picked the \u201cPost\u201d option, and selected the \u201cPost Terms\u201d data. Then, we pressed the \u201cAdd the filter to result<\/strong>\u201d button, picked the \u201cJetEngine Callback\u201d option, selected the \u201cGet term name<\/a>\u201d callback, pressed the \u201cInsert<\/strong>\u201d button, and received this:<\/p>\n\n\n\n
<div class=\"tag\">{{ post.terms|jet_engine_callback(args={cb:'jet_get_term_name'}) }}<\/div>\n<\/code><\/pre>\n\n\n\n
\"placeholder<\/div>\n\n\n\n
When we hit the \u201cReload preview<\/strong>\u201d button, we saw the entire result except for the picture because the JetEngine<\/em> dynamic data can be checked only on the page with the Listing Grid <\/strong>or on the front end.<\/p>\n\n\n\n
\"listing<\/a><\/div>\n\n\n\n
Eventually, we get such a code in the HTML <\/strong>area:<\/p>\n\n\n\n