# Listázási sablon Timber/Twig nézettel

> Listázási sablon készítése HTML-lel, CSS-sel és Twig-jelölőkkel, dinamikus adatok, szűrők, feltételes címkék, és kész elrendezések átvétele.

A Timber egy WordPress-bővítmény, amellyel HTML-t írhatsz a Twig sablonmotorral, a PHP-fájloktól elkülönítve. A JetEngine Timber/Twig nézetében HTML-lel és CSS-sel készíthetsz gyors listázási sablont, amelyet előbeállítások, dinamikus adat gombok, szűrők és feltételes címkék segítenek. A sablon forrása lehet bejegyzés, felhasználó, kifejezés, kapcsolat, beállítóoldal adata, Lekérdezéskészítő, ismétlő mező, egyéni tartalomtípus vagy REST API végpont.

Előfeltétel: a Timber bővítmény telepítve és aktiválva, az aktív JetEngine.

## Előkészítés

1. Nyisd meg a **JetEngine → JetEngine → Teljesítmény** fület, kapcsold be a **Timber/Twig nézetek** kapcsolót, telepítsd a javasolt Timber bővítményt, és kattints a beállítások mentésére.
2. Ezután a **JetEngine → Listázások/komponensek** oldalon az **Új elem hozzáadása** gomb ablakában a **Listázási nézet** listában megjelenik a **Timber/Twig**.

![A Teljesítmény fül](./kepek/teljesitmeny.webp)

*A Teljesítmény fül* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine)

A képen a **Timber/Twig nézetek** kapcsoló a Teljesítmény fülön látható.

## A sablon létrehozása

1. Kattints az **Új elem hozzáadása** gombra.
2. Válaszd ki a forrást (például **Bejegyzések**) és a bejegyzéstípust. A példában a „Doktorok” egyéni bejegyzéstípus elemei szerepelnek: a cím a doktor neve, a tartalom a bemutatkozása, a kiemelt kép a fotója, a metamezők pedig a szakterület, a gyakorlat éveinek száma és az e-mail-cím.
3. Add meg a **Listázási elem nevét** (nem kötelező), a **Listázási nézet** legyen **Timber/Twig**, és kattints a **Listázási elem létrehozása** gombra.
4. Megnyílik a Timber/Twig szerkesztő a HTML- és a CSS-területtel és az előnézettel.

## Dinamikus és alapadatok

A **Dynamic data** gombbal illeszthetsz be adatot.

- **Post**: a bejegyzés alapadatai. Válaszd ki például a **Post Title** elemet, és kattints az **Insert** gombra: a `{{ post.title }}` jelölő kerül be. Kézzel is begépelheted.
- **Dynamic Data**: válaszd a **Meta Data** forrást és a metamezőt (például a „Szakterület” szöveg mezőt). Ez ilyen jelölőt ad: `{{ jet_engine_data(args={source:'meta',meta_key:'_specialty'}) }}`. A jelölő után saját szöveget is írhatsz, például „év gyakorlat”.

Az elemeket `<div>` elemekkel tagold, hogy a jelölők külön sorba kerüljenek.

## Szűrők az eredményre

Az **Add filter to result** gombbal a dinamikus adatot átalakíthatod vagy a kívánt formában jelenítheted meg.

A hosszú bejegyzéstartalom rövidítéséhez:

1. Válaszd a **Post → Post Content** adatot, majd az **Add filter to result** gombot.
2. Válaszd a **JetEngine Callback** lehetőséget, és a **Callback function** listából a **Trim string by charts or words** visszahívást. Ez a lehetőség csak akkor jelenik meg, ha a **JetEngine → JetEngine → Modulok → Külső modulok** fülön bekapcsoltad a **Trim String visszahívás** modult.
3. A **Trimmed Type** lehet **Words** vagy karakterek; a **String length** a hossz (például 5).
4. **Insert**.

Eredmény: `{{ post.content|jet_engine_callback(args={cb:'jet_engine_trim_string_callback',jet_trim_cb_type:'words',jet_trim_cb_length:'5'}) }}`. A szöveg a Timber **Trim text by words** és **Trim text by chars** szűrőivel is rövidíthető.

A kiemelt kép beillesztése:

1. **Dynamic data → Dynamic Data**, forrás **Meta Data**, a **Custom Field Key** értéke `_thumbnail_id`.
2. **Add filter to result → JetEngine Callback**, a visszahívás **Get image by ID**, itt a kép méretét is kiválaszthatod.
3. **Insert**. Eredmény: `{{ jet_engine_data(args={source:'meta',custom_key:'_thumbnail_id'})|jet_engine_callback(args={cb:'wp_get_attachment_image'}) }}`

## Feltételes címkék

A **Conditional Tags** gomb a JetEngine **Dinamikus láthatóság** funkciójához hasonlóan működik: az elemet csak a feltétel teljesülésekor jeleníti meg. A JetEngine kibővített feltételeihez kapcsold be a **Dinamikus láthatóság** modult. A Twig általános szerkezete:

```twig
{% if feltetel %}
<!-- ide jön a HTML -->
{% endif %}
```

Példa: egy címke csak akkor jelenik meg, ha a „Gyakorlat évei” szám nagyobb 10-nél.

1. Kattints a **Conditional Tags** gombra.
2. Válaszd a **Greater than** feltételt, a **Field** a mező neve, az **Value** 10, a **Context** **Current listing item object**, a **Data type** **Numeric**.
3. **Insert**. A beszúrt szerkezet:

```twig
{% 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"}) %}
<!-- ide jön a HTML -->
{% endif %}
```

A megjegyzés helyére írd be: „Több mint 10 év tapasztalat!”. A **Reload preview** gomb az előnézetet frissíti, de az előnézetben csak az alap bejegyzésadatok látszanak. A JetEngine-adatokat a Listing Grid oldalán vagy a frontenden ellenőrizheted.

## CSS

A stílusokat a CSS-területbe írd. Az osztály a HTML-ben:

```html
<a class="doctor-name">{{ post.title }}</a>
```

A CSS-ben a szelektor elé tedd a `selector` kulcsszót, hogy a szabály csak erre a listázásra vonatkozzon:

```css
selector .doctor-name {
    font-size: 18px;
}
```

A feltételes címkék a stílusoknál is használhatók. Például egy szegélyt kaphat a kép, ha az elem helyzete páros:

1. A **Conditional Tags** gombbal válaszd az **Is odd item** feltételt, és illeszd be: `{% if jet_engine_show_if(args={"jedv_condition":"listing-odd"}) %}`. A megjegyzés helyére másold be a kép jelölőjét.
2. Válaszd az **Is even item** feltételt (`"jedv_condition":"listing-even"`), és ide a kép jelölőjét tedd, egy `even-item` osztályú `<a>` elembe.
3. A CSS-be:

```css
selector .even-item {
    display: flex;
    border: 1px solid;
    padding: 5px;
}
```

Mentsd a változásokat a **Mentés** gombbal.

## A sablon a Listing Gridben

Hozz létre oldalt a blokkszerkesztővel, Elementorral vagy Bricksszel. A blokkszerkesztőben az **Oldalak → Új oldal** oldalon add hozzá a **Listing Grid** blokkot, és válaszd ki a sablont. A rács a metamezők értékeit mutatja, a CSS-stílusok a címeken és a páros elemek képein érvényesek.

## Kész elrendezések használata

Ha nem akarsz mindent a nulláról felépíteni, kész kártyaelrendezést is átvehetsz (például egy webes CSS-kártya gyűjteményből), de a bemásolt kódot gondosan át kell nézni. A példában ezek történtek:

1. A HTML-ből csak az első kártyát tartottuk meg, az információs szalagot, a burkoló elemet és a számozást töröltük, mert a sablon egyetlen elem elrendezése.
2. A CSS-ből töröltük a törölt elemekre vonatkozó szabályokat (`.info`, `.cards-wrapper`), valamint a `body`, `a`, `@media` és `@import` szabályokat a stílusok elszigetelése, az ütközések és a felesleges terhelés elkerülése érdekében.
3. A betűcsaládokat a sablon témájához igazítottuk. Érdemes a WordPress-témába integrált betűtípust használni.
4. A HTML-ben a szóközöket tabulátorra cseréltük a hibák elkerülésére.
5. Minden CSS-szelektor elé beírtuk a `selector` szót, a kettős szelektoroknál mindkettő elé:

```css
selector .card:before, selector .card:after {
```

6. A `.card` szabályban a `width: 15em;` értéket `width: 100%;` értékre cseréltük (vagy törölhető), hogy az átméretezés ne okozzon gondot.

### A statikus adat cseréje dinamikusra

- **A hivatkozás és a háttérkép**: az `href` attribútum URL-jét töröltük, a **Dynamic data → Dynamic URL** lehetőséggel a **Permalink** forrást illesztettük be (`{{ jet_engine_url(args={}) }}`). A `--bg-img` változó URL-je helyére a **Dynamic URL** **Thumbnail URL** forrása került. Eredmény:

```html
<a class="card" href="{{ jet_engine_url(args={}) }}" style="--bg-img: url({{ jet_engine_url(args={source:'_thumbnail_url'}) }})">
```

- **A cím**: az `<h1>` elemet `<div>` elemre cseréltük, hogy ne zavarja az oldal szemantikus hierarchiáját, `title` osztállyal, a szöveg helyére a **Post → Post Title** került (`<div class="title">{{ post.title }}</div>`). A CSS-ben a `selector .card h1 {` sort `selector .card .title {` sorra írtuk át.
- **A szöveg**: a **Post → Post Content** adat, az **Add filter to result** gombbal a **Trim text by words** szűrő, 20 szó, a **More string** mezőben „...”. Eredmény: `<p>{{ post.content|excerpt('20','...') }}</p>`.
- **A dátum**: **Post → Post Date**, szűrőként a **JetEngine Callback** **Format date** visszahívása. Eredmény: `<div class="date">{{ post.post_date|jet_engine_callback(args={cb:'jet_engine_date'}) }}</div>`.
- **A címke**: a bejegyzéstípushoz rendelt egyéni taxonómia kifejezésének neve: **Post → Post Terms**, szűrőként a **Get term name** visszahívás. Eredmény: `<div class="tag">{{ post.terms|jet_engine_callback(args={cb:'jet_get_term_name'}) }}</div>`.

A **Reload preview** gomb után a kép kivételével minden látszik, mert a JetEngine dinamikus adatai csak a Listing Grid oldalon vagy a frontenden ellenőrizhetők. A **Listing Grid** blokkot az oldalon kiválasztva a rács a bejegyzések képét, címét, szövegét, dátumát és kifejezését mutatja, a frontenden pedig a hover hatás is működik.