# Timber/Twig nézet: a szerkesztő és a funkciók áttekintése

> A Timber/Twig listázási nézet beállításai: lista forrásai, szerkesztő, dinamikus adatok, szűrők és feltételes címkék teljes leírása.

A listázási sablon a **Listing Grid** elemeinek elrendezését és megjelenését határozza meg. A Timber egy WordPress-bővítmény, amellyel a Twig sablonmotorral írhatsz HTML-t, a PHP-fájloktól elválasztva. A Timber/Twig nézettel HTML-ből és CSS-ből építhetsz sablonokat, előbeállítások, dinamikus adat gombok, szűrők és feltételes címkék segítségével. A megoldás rugalmas, gyors, és tiszta HTML- és CSS-szerkezetet ad.

Előfeltétel: telepített és aktív Timber bővítmény, aktív JetEngine. Egy lépésről lépésre követhető példát a [Listázási sablon Timber/Twig nézettel](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-timber-twig/) fejezetben találsz.

Ahhoz, hogy Timber/Twig nézettel listázási sablont készíthess, kapcsold be a **Timber/Twig nézetek** kapcsolót a **JetEngine → JetEngine → Teljesítmény** fülön.

![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 listák oldala

A **JetEngine → Listázások/komponensek** oldalon látod az összes listázási elemet, amelyet a különböző szerkesztőkkel (Elementor, blokkszerkesztő, Bricks, Timber) készítettél. Az **Új elem hozzáadása** gombra kattintva egy ablak nyílik, ahol új listázási sablont hozhatsz létre.

![A listázási elem beállítása ablak](./kepek/listazas-6-uj-elem.webp)

*A listázási elem beállítása ablak* (https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-engine)

A képen az ablak mezői látszanak: **Lista forrása**, **Bejegyzéstípusból**, **Listázási elem neve** és **Listázási nézet**.

### A lista forrása

A **Lista forrása** választható értékei:

| Forrás | Mit jelent |
|---|---|
| **Bejegyzések** | A JetEngine-nel létrehozott egyéni bejegyzéstípusok, valamint az alap WordPress-bejegyzések, oldalak, médiafájlok és WooCommerce-termékek. Választás után a **Bejegyzéstípusból** listában add meg a típust. |
| **Query Builder** | A Lekérdezéskészítővel létrehozott egyéni lekérdezés szűkített adatai. Válaszd ki forrásként a lekérdezést. |
| **Kifejezések** | Az egyéni taxonómiák, az alap WordPress-kategória és a WooCommerce termékkategóriák kifejezései, amelyekhez metaboxot is rendelhetsz. A **From taxonomy** listában add meg a taxonómiát. |
| **Felhasználók** | A felhasználók alapmezői (azonosító, bejelentkezési név, becenév, e-mail-cím stb.) és az egyéni metaboxok mezői. |
| **Ismétlő mező** | Egy ismétlő metamező elemei. A bejegyzéstípus listában válaszd ki, melyikhez rendelted az ismétlőt. A **Repeater source** értéke **JetEngine**, **JetEngine Options Page** vagy **ACF** lehet. A következő sorban a **Repeater field** (JetEngine vagy ACF forrásnál) vagy a **Repeater option** (beállítóoldalnál) mezőt töltsd ki. |
| **User Appointments** | JetAppointment mellett érhető el: a felhasználó időpontfoglalásainak adatai (dátum, idő, szolgáltatás és szolgáltató neve). |
| **Egyéni tartalomtípus** | A **From content type** listában válaszd ki a tartalomtípust. Csak akkor érhető el, ha az **Egyedi tartalomtípusok** modul be van kapcsolva az **Alapértelmezett modulok** fülön. |
| **Custom Content Type Repeater Field** | Az egyéni tartalomtípus ismétlő mezője; a megjelenő listában választod ki. |
| **REST API Endpoint** | Egy másik weboldalon lévő egyéni tartalomtípus elemei. A **From API endpoint** listában válaszd ki a végpontot. Csak akkor érhető el, ha a **REST API-listázások** modul be van kapcsolva. |
| **JetReviews** | A JetReviews bővítménnyel készített vélemények és hozzászólások. |

### Listázási elem neve és nézete

- **Listázási elem neve**: a sablon megkülönböztetésére szolgál; üresen is hagyhatod, ilyenkor a név magától generálódik.
- **Listázási nézet**: négy szerkesztő közül választhatsz: Elementor, blokkszerkesztő, Bricks és Timber/Twig. Az alapérték a blokkszerkesztő. Az Elementort és a Timbert bővítményként kell telepíteni és aktiválni, a Bricksnek témaként telepítettnek kell lennie.

A **Listázási elem létrehozása** gomb létrehozza a sablont, és megnyitja a szerkesztőoldalt a kiválasztott nézetnek megfelelően.

## A Timber/Twig szerkesztő

Ha a **Listázási nézet** értéke **Timber/Twig**, a sablonszerkesztő oldala jelenik meg, kezdetben üresen.

- Az oldal tetején a listázási elem nevét adhatod meg vagy módosíthatod. Mellette a **Settings** gomb a lista forrásának beállításait nyitja meg, a **Save** gomb menti a sablont.
- A **Preview width** beállítás a **Settings** és a **Save** alatt az előnézet szélességét adja meg %, px vagy vw egységben. Az alapérték 50%, vagyis az oldal fele.
- Bal oldalon a listázási elem neve alatt a **Presets** gomb van. Az előbeállítás kiválasztásával alkalmazod a sablonra. A HTML-lap a lista tartalmának szerkezetét, a CSS a stílusokat mutatja, a **Preview** az eredményt.

Az előbeállításokat bejegyzések megjelenítésére tervezték, ezért más forrásoknál az előnézet hibás eredményt adhat.

Az előnézet a HTML módosítása után nem frissül magától, hogy ne legyen hibás a megjelenítés és ne terhelje a szervert. A változások alkalmazásához kattints a **Reload preview** gombra az előnézet fölött. A CSS módosításai azonnal érvényesülnek, ha a kapcsolódó HTML már megjelent az előnézetben.

A HTML-szerkesztő a Twig nyelv minden szerkezetét elfogadja, tehát kézzel is írhatsz kódot. A HTML- és CSS-szerkesztő támogatja az Emmet szintaxist: a rövidítés a **Tab** billentyűvel bomlik ki kóddá.

A HTML-lap fölött három gomb áll: **Dynamic data**, **Filter data** és **Conditional Tags**. Ezekkel húzhatsz dinamikus tartalmat a HTML-be.

## Dynamic data

A gombbal kétféle adatot illeszthetsz be: JetEngine-adatot és alapadatot (WordPress). Így az egyéni JetEngine-mezők és az alap WordPress-mezők értékét is megjelenítheted. A kiválasztás után az ablak tetején lévő **All Functions** hivatkozással térhetsz vissza a lehetőségek listájához.

### Dynamic Data

A forrásból húzza ki az adatot. Beállításai:

- **Source**: a forrás.
  - **Post/Term/User/Object Data**: a bejegyzés, kifejezés, felhasználó vagy objektum alapmezőiből veszi a tartalmat (például hozzászólások, időpontok, JetFormBuilder-űrlapmezők, JetReviews, egyéni lekérdezések, kapcsolatok). A mezőt az **Object Field** listából választod, vagy a nevét a **Custom Field Key** mezőbe írod.
  - **Meta Data**: a JetEngine-nel létrehozott metamezők egyikéből veszi az adatot. A **Meta Field** listából választod, vagy a nevét a **Custom Field Key** mezőbe írod.
  - **Query Variable**: a keresési találatok oldalán használható. A **Variable Name** értéke ilyenkor „s”.
  - **Options**: a beállítóoldalhoz létrehozott metamezők közül választhatsz.
- **Fallback**: ha az érték üres, az itt megadott szöveg látszik helyette.
- **Context**: az adatforrás pontosabb megadása, a **Source** értékével együtt működik. A lehetőségek a beállításoktól függően:
  - **Default Object**: az aktuális listázási sablon adatai a lista forrásbeállítása szerint.
  - **Current User (global)**: annak a felhasználónak az adatai, akinek az oldalt létrehozták.
  - **Current User (for current scope)**: az éppen feldolgozott felhasználó adatai. Például egy felhasználókat felsoroló listában arra a felhasználóra kattintva, nem a bejelentkezettre vonatkoznak.
  - **Queried User**: a bejelentkezett vagy az URL-ben azonosítóval megadott felhasználó adatai.
  - **Current Post Author**: az éppen megnyitott bejegyzés szerzőjének adatai.
  - **Default WordPress Object (for current page)**: mindig az oldalra a WordPress által meghatározott globális objektum adatai. Egyedi bejegyzés oldalán ez mindig az aktuális bejegyzés, még akkor is, ha az oldalra tett listába lépsz.
  - **Current CCT item author**: az aktuális egyéni tartalomtípus-elem szerzőjének adatai; hasznos a tartalomtípus listázási sablonjában.
  - **Related Items From…**: a létrehozott kapcsolat adatai.

Az ablak végén két gomb áll: az **Add filter to result** (a **Filter data** gombhoz hasonló) és az **Insert**, amely beilleszti az adatot a HTML-be.

### Dynamic URL

Képeket és webcímeket húz be előre meghatározott forrásokból.

- **Source**:
  - **Thumbnail URL**: a kiemelt kép webcíme.
  - **Image URL by Image ID**: a kép címe az azonosítójából. A **Custom Field Name** mezőbe a metamező nevét is beírhatod.
  - **Permalink**: bármely mezőt kattinthatóvá tesz. Ha például a **Custom Field Name** mezőbe egy egyéni bejegyzéstípus metamezőjének nevét írod, a rácsról az elem egyedi oldalára viszi a látogatót.
  - **Profile Page**: a **Profile Page** listában kiválasztott **Account** vagy **User Single** aloldalra irányít.
  - **Options**: a JetEngine beállítóoldalaival működik. Az **Option** listában a mező értékéből veszi a hivatkozást; a mező nevét a **Custom Field Name** mezőbe is beírhatod.
  - Egyéb metamezők: az általad létrehozott metamezők automatikusan megjelennek a listában, a hivatkozás a kiválasztott mező értékéből jön.
- **Fallback**: üres érték esetén ez a szöveg látszik.
- **Context**: ugyanazok a lehetőségek, mint a **Dynamic Data** esetén.

### Data Store Button

Adattárakba (például kedvencek, könyvjelzők, nemrég megtekintettek) tehetsz elemeket és vehetsz ki belőlük néhány kattintással.

- **Store**: a létrehozott adattár.
- **Label**: a gomb felirata a frontenden.
- **Icon**: SVG formátumú ikon; a Font Awesome ikonjának HTML-kódját is bemásolhatod.
- **Reload listing grid on success**: sikeres művelet után újratölti a **Listing Gridet** az adattár aktuális elemeivel.
- **Action after an item added to store**: mi történjen az elem adattárba kerülése után:
  - **Remove from the store button**: gomb jelenik meg az elem eltávolítására; a felirata és ikonja testre szabható.
  - **Switch button status**: átváltja a gomb állapotát; megadhatsz feliratot, ikont és azt az oldal-URL-t, ahová a látogató kerül az elem hozzáadása után.
  - **Hide button**: elrejti a gombot a frontenden, miután a látogató hozzáadta az elemet.
- **Context**: azt adja meg, melyik azonosító kerüljön az eltárolt elemhez. A lehetőségek megegyeznek a **Dynamic Data** környezeteivel: **Default Object**, **Current User (global)**, **Current User (for current scope)**, **Queried User**, **Current Post Author**, **Default WordPress Object (for current page)**, **Current CCT item author**.

### Post

A bejegyzések alap metamezőit jeleníti meg, például **ID**, **Post Title**, **Post Author ID**, **Post Date**. A **Select data to show** listában választod ki. Az egyéni metaboxszal felvett metamezők értékeit is megjelenítheted.

### User

A WordPress felhasználói alapmezőit (**ID**, **Display Name**, **Email** stb.), valamint a felhasználókhoz rendelt egyéni metamezőket jeleníti meg.

## Filter data

A **Filter data** gomb a **Dynamic data** mellett található, és a szűrőkhöz ad hozzáférést. A szűrőkkel bármely dinamikus adatot átalakíthatsz. A HTML-ben egy elemhez több szűrőt is kombinálhatsz, az elem végén a „|” jel után:

```twig
{{ post.date|jet_engine_callback(args={cb:'jet_engine_date'})|time_ago() }}
```

### JetEngine Callback

Különböző adattípusokat jeleníthetsz meg vele: dátumot és időt, hivatkozásokat, jelölőnégyzet-értékeket, számokat és így tovább. A szükséges visszahívást a **Callback function** listából választod, az **Insert** gomb beilleszti a HTML-be. Az **All Filters** hivatkozással térsz vissza a szűrők listájához.

### Resize Image

Átméretezi a kép szélességét és magasságát. Csak képek URL-jével működik, azonosítóval nem.

- **Image width** és **Image height**: a méret pixelben.
- **Crop starting position**: honnan induljon a vágás: **Default**, **Center**, **Top**, **Bottom**, **Left** vagy **Right**.

### Trim text by words

A szöveget a megadott **Number of words** szóra rövidíti, például a bejegyzés kivonatához. A **More string** mezőbe azt a szöveget írd (például „Tovább…”), amely akkor jelenik meg, ha a szöveget levágta.

### Trim text by chars

A szöveget a megadott **Number of characters** karakterszámra rövidíti. A **More string** mező ugyanúgy működik.

### Array to list

Olyan metamezőn használd, amely értéklistát tárol (például jelölőnégyzet).

- **First delimiter**: elválasztójel (például vessző), amelyet az utolsó kivételével minden elem után használ.
- **Second delimiter**: az utolsó elem elé kerülő elválasztó.

### Time Ago

Egy dátumot „időmúlva” formában ír ki, vagyis emberbarát módon mondja meg, mennyi ideje történt valami, vagy mennyi idő múlva fog.

- **Date to calculate difference to**: a dátum `strtotime()` által értelmezhető formában, például `2023-11-01 15:30:00` (ÉÉÉÉ-HH-NN és ÓÓ:PP:MM).
- **Format of the past dates**: a múltbeli dátumok formátuma. Az alapérték `%s ago`, ahol a `%s` helyére az érték kerül.
- **Format of the future dates**: a jövőbeli dátumok formátuma. Az alapérték `%s from now`.

## Conditional Tags

A **Conditional Tags** gombbal a Twig feltételes logikáját használhatod:

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

A működése a JetEngine **Dinamikus láthatóság** funkciójához hasonló: az elemet csak akkor jeleníti meg, ha a feltétel teljesül. Ha a **Dinamikus láthatóság** modul ki van kapcsolva, a gomb csak üres címkét tud beszúrni. A kibővített JetEngine-feltételekhez kapcsold be a modult a **JetEngine → JetEngine** oldalon.

A feltételeknek ezek a közös beállításaik lehetnek:

- **Field**: a metamező neve, amellyel összehasonlít. A **Dynamic Tags** gombbal makrót is választhatsz.
- **Value**: az összehasonlítás értéke vagy értéklistája (szám, betű, szó, kifejezés); makró is használható.
- **Context**: **Default** vagy **Current List object**, vagyis az érték az aktuális bejegyzésből vagy az aktuális listaelem objektumából jön.
- **Data type**: **Chars** (betűk szerinti, ábécésorrendű összehasonlítás), **Numeric** (számértékek szerint) vagy **Datetime** (dátum vagy idő szerint, az idővonalon elfoglalt hely alapján).

### General

- **Query Has Items** és **Query Has Not Items**: bekapcsolják a **Query field to check** listát, ahol egy egyéni lekérdezést választasz; a feltétel azt vizsgálja, hogy van-e a lekérdezésnek eleme.
- **Equal**, **Not Equal**, **Greater than**, **Greater or Equal**, **Less than**, **Less or Equal**: az elem a feltétel és az összehasonlított érték szerint jelenik meg vagy nem.
- **In the list** és **Not in the list**: **Checkbox**, **Select** és **Radio** metamezőkhöz; az elem láthatósága attól függ, hogy a látogató kiválasztotta-e a **Value** mezőbe írt értéket.
- **Exists** és **Doesn’t exist**: a választott metamezőben van-e adat.
- **Contains** és **Doesn’t contain**: a **Value** mezőbe írt adat szerepel-e.
- **Between** és **Not Between**: az érték két megadott érték között van-e.
- **Regexp** és **Not Regexp**: az elem megfelel-e a reguláris kifejezésnek.
- **Is mobile device**: az elemet csak mobil eszközökön jeleníti meg.

### JetEngine specific

- **Is Profile Page**: az elem csak a felhasználó profiloldalának aloldalán jelenik meg, ha az a **Profile Page** listából kiválasztható.
- **Switcher enabled** és **Switcher disabled**: a **Switcher** metamezőkhöz; az elem láthatósága attól függ, hogy a megadott mezőben a kapcsoló be van-e kapcsolva.
- **Value is checked** és **Value is not checked**: a JetEngine **Checkbox** metamezőjéhez; megadhatod a mezőt és az értéket, és az elem megjelenik, ha a felhasználó bejelöli az értéket.

### User

- **User meta is**: az elem látszik, ha a felhasználó megadott metamezőjében a megadott érték van. Egyéni metamezőket a felhasználókhoz a metaboxszal vehetsz fel.
- **User has required field**: a **Fields List** mezőbe írd a vizsgálandó mezőket. Lehetnek WordPress-alapmezők (például `first_name`, `last_name`, `description`, `user_nicename`) vagy egyéni metamezők. A feltétel akkor teljesül, ha a felhasználónak mindegyikben van adata.
- **User meta is equal to post meta (put post meta key into value)**: az elem akkor látszik, ha a felhasználó és a bejegyzés metaadata azonos. A bejegyzés metakulcsát a **Value** mezőbe írd.

A fenti három feltétel akkor érhető el, ha a **JetEngine → JetEngine → Modulok → Külső modulok** fülön bekapcsoltad az **Egyéni láthatósági feltételek** kapcsolót.

- **User Can Add Post**: az elem azoknak a felhasználóknak látszik, akik közzétehetnek ilyen típusú bejegyzést. A jogosultságot a Profile Builder beállításaiban lehet korlátozni.
- **User logged in**: csak a bejelentkezett felhasználóknak látszik.
- **User not logged in**: csak a be nem jelentkezetteknek.
- **User role is**: csak a megadott szerepkörű felhasználóknak.
- **User role is not**: azoknak, akiknek a szerepköre nem egyezik a megadottal.
- **User ID is**: csak azoknak, akiknek az azonosítóját a **User IDs** mezőbe írtad.
- **User ID is not**: azoknak nem, akiknek az azonosítóját a **User IDs** mezőbe írtad.

### Posts

- **Post Status Is**: az elem csak a megadott állapotú oldalakon látszik.
- **Is post by current user**: csak az aktuális felhasználó által létrehozott oldalakon látszik; például a felhasználói fiókoldalon használható.

Ez a két feltétel csak akkor érhető el, ha telepítve és aktiválva van az **Egyéni láthatósági feltételek** (Custom Visibility Conditions) kiegészítő.

- **Is post by queried user**: csak a lekérdezett felhasználó által létrehozott oldalakon látszik; kizárólag a Profile Builder oldalain és a felhasználók listájában használható.
- **Post ID is**: az elem csak a **Value** mezőben megadott oldalakon jelenik meg. Az oldal azonosítóját számként írd be. Az azonosítót az oldal szerkesztőjének URL-jében a „post=” utáni szám adja. Több azonosítót szóköz nélkül, vesszővel válassz el.
- **Post ID is not**: az elem a megadottakon kívül minden oldalon látszik.
- **Single Post Type is**: a **Value** mezőbe a bejegyzéstípus slugját írd; az elem csak az ilyen típusú bejegyzéseknél látszik. A slugot a **JetEngine → Bejegyzéstípusok** oldal **Post Type Slug** oszlopában találod.
- **Single Post Type is not**: az elem a megadott típuson kívül minden bejegyzésnél látszik.
- **Post Type Archive is** és **Post Type Archive is not**: csak a megadott slugú bejegyzéstípus archívumán látszik, illetve az összes többi archívumon.
- **Taxonomy Archive is** és **Taxonomy Archive is not**: ugyanez taxonómiaarchívumokra.
- **Is Search Results** és **Is Not Search Results**: csak a keresési találatok archív oldalán látszik, illetve ezt kivéve mindenhol.
- **Is Current Post Author** és **Is Not Current Post Author**: az elem akkor látszik, ha az aktuális felhasználó a bejegyzés szerzője, illetve ha nem az.
- **Post Has Terms** és **Post Hasn’t Terms**: az elem látszik, ha a bejegyzéshez vannak (illetve nincsenek) kifejezések rendelve.
- **Is Parent Post**, **Is Not Parent Post**, **Is Child Post of**, **Is Not Child Post of**: a bejegyzés hierarchiában betöltött szerepe szerint jelenít meg elemeket. Használatukhoz a **JetEngine → Bejegyzéstípusok** oldalon a kívánt típusnál be kell kapcsolni a **Hierarchical** kapcsolót; a szülő bejegyzést a **Gyorsszerkesztés** gombbal rendelheted hozzá.

### Date&Time

- **Time Period**: az elem csak a megadott időszakban látszik. A **Time From** és **Time To** mezőbe 24 órás formában írd az időt (például 23:00).
- **Days of week**: az elem csak a **Days of Week** választóban megadott napokon látszik.

### Listings

- **Is even item**: az elem akkor látszik, ha a listaelem helyzete a **Listing Gridben** páros (második, negyedik stb.).
- **Is odd item**: ha a helyzet páratlan (első, harmadik stb.).
- **Is N item**: az elem akkor látszik, ha a listaelem N-edik a sorban. Ha például 3-at adsz meg, a harmadik elemnél jelenik meg. Az **Each N Number** kapcsoló bekapcsolásával minden harmadik elemnél megjelenik.