# Képek megjelenítése a Média és a Galéria mezőből

> A Média és a Galéria metamező képeinek kiírása a Dynamic Image, a Dynamic Field és dinamikus háttérkép segítségével.

A JetEngine két metamező-típussal tárol képet: **Media** (egy fájl) és **Gallery** (több fájl). Mindkettő háromféle értékformátumban menthet: képtömbként, URL-ként (szöveg) vagy azonosítóként (szám). Megengedett a grafikus fájlformátumok (például PNG, JPG, WebP) tárolása, és a fájltípusok korlátozhatók. A mezők használhatók egyedi bejegyzéstípusban és metaboxban is, tehát bejegyzéshez, termékhez, felhasználóhoz vagy CCT-elemhez egyaránt hozzáadhatók.

Az oldal a szerkesztők közül Elementort, a blokkszerkesztőt és Bricksett érinti.

## Mező létrehozása

1. Nyisd meg a **JetEngine → Bejegyzéstípusok** vagy a **JetEngine → Metaboxok** listát, és szerkeszd azt a bejegyzéstípust vagy metaboxot, amelyhez a képmező kell.
2. A **Metamezők** részben kattints az **Új metamező** gombra.
3. Add meg a mező címkéjét (**Label**), nevét (**Name**), és válaszd a **Media** mezőtípust. Szükség esetén állítsd be az értékformátumot és a korlátozásokat.
4. Galériához ugyanez a menet, csak a mezőtípus **Gallery**.
5. Mentsd a változtatásokat.

Ezután a bejegyzés, a CCT-elem, a felhasználó vagy a termék szerkesztőjében a **Choose Media** gombbal választhatsz képet a médiatárból, vagy tölthetsz fel újat a saját gépedről. Ne felejts el menteni.

## Kép megjelenítése a Dynamic Image elemmel

A legrugalmasabb mód a **Dynamic Image** widget, blokk vagy elem, amelyet kifejezetten a médiakimenetre terveztek.

1. Add hozzá a **Dynamic Image** elemet az oldalhoz, sablonhoz vagy bejegyzéshez.
2. Az **Általános** fülön a **FORRÁS** listából válaszd ki a létrehozott **Media** mezőt.
3. A feltöltött kép ezután automatikusan megjelenik az adott bejegyzésnél, CCT-elemnél vagy felhasználónál.

Az elem további beállításai: a képméret kiválasztása, egyedi méretek, az illeszkedés (object-fit), kattintható kép, késleltetett betöltés (lazy load), igazítás és stílus. Ezek miatt jó profilfotókhoz, kiemelt képekhez, bannerekhez, csapattagok és ingatlanok képéhez. A beállítások részletei a [Dynamic Image és Dynamic Link](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-kep-es-link/) fejezetben vannak.

## Kép megjelenítése a Dynamic Field elemmel

Ha a **Media** mező azonosítót tárol, a **Dynamic Field** elemmel is kiírhatod, de csak egy callback segítségével: enélkül csak az azonosító számot látod.

1. Add hozzá a **Dynamic Field** elemet.
2. A **FORRÁS** listában válaszd a „Metaadat” elemet, és válaszd ki a **Media** mezőt.
3. Kapcsold be a **Filter field output** kapcsolót.
4. A **CALLBACK** listából válaszd a „Kép lekérése ID alapján” elemet.

Az elem az azonosítót ettől kezdve képpé alakítja a weboldalon. A callbackek teljes listáját a [Dynamic Field](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-dinamikus-mezo/) fejezet írja le.

## Dinamikus háttérkép

A **Media** mező képe szekció, konténer vagy más elem háttere is lehet. Ez hasznos hero szekcióhoz, bannerhez, profilfejléchez és kártyákhoz: a kép fölé szöveg vagy más elem kerülhet.

**Elementorban:**

1. Jelöld ki a konténert vagy szekciót, és a **Stílus** fülön nyisd meg a **Háttér** (Background) beállítást.
2. Válaszd a **Klasszikus** (Classic) háttértípust.
3. Kattints a **Dinamikus címke** (Dynamic Tag) ikonra, és válaszd a JetEngine „Custom Image” forrását.
4. Válaszd ki a **Media** mezőt.

**Bricksben:**

1. Jelöld ki a konténert vagy szekciót, és a **Style** beállításoknál nyisd meg a háttér (**Background**) részt.
2. Kattints a **Háttérkép** mező melletti dinamikus adat (**Dynamic data**) ikonra.
3. Válaszd ki a megfelelő JetEngine **Media** mezőt.

A mentés után a háttérkép minden bejegyzésnél a saját mezőjéből töltődik be, ezért nem kell oldalanként kézzel cserélni a képeket.

## Galéria megjelenítése

A **Gallery** mező több kép azonosítóját tárolja, ezért itt is callback kell. A rácsos és a csúszkás galéria a Dynamic Field widgetben (blokkban) a megfelelő modul bekapcsolása után érhető el. A galéria a bejegyzések és a kifejezések (term) mezőjéből is megjeleníthető.

1. Nyisd meg a **JetEngine → JetEngine vezérlőpult → Modulok** oldalt, kapcsold be a **Rácsos galéria a Dynamic Field widgethez** és a **Diavetítéses galéria a Dynamic Field widgethez** kapcsolót, és kattints a **Mentés** gombra.

![A modulok oldal, az első sorban a két galériamodul kapcsolója](./kepek/dinamikus-tartalom-3-galeria-modulok.webp)

*A modulok oldal, az első sorban a két galériamodul kapcsolója* (https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine)

A képen a két galériamodul kapcsolója az első sorban van, kikapcsolt állapotban; bekapcsolás után a **Mentés** gombbal véglegesítheted.

2. Hozz létre **Galéria** típusú metamezőt. Egyedi bejegyzéstípusnál a **JetEngine → Bejegyzéstípusok** szerkesztőjében teheted meg, az alapértelmezett WordPress-bejegyzéseknél pedig a **JetEngine → Metaboxok** oldalon, ahol a metabox célja „Post” legyen. A **Meta Fields** fülön kattints a **New Meta Field** gombra, add meg a **Label** értékét, szükség esetén írd át a **Name/ID** mezőt, a **Field type** legyen **Gallery**, és mentsd az **Add/Update Meta Box/Post Type** gombbal.
3. Nyisd meg a bejegyzéseket, és a **Gallery** mezőbe tölts fel képeket. Mentsd a bejegyzést, és ismételd meg a többinél.
4. Nyisd meg az egyedi sablont (például a Crocoblock témasablonok között, a sablon **Edit** gombjával), vagy a listázási sablont. Elementorban és a blokkszerkesztőben is használhatod.
5. Add hozzá a **Dynamic Field** elemet, a **Source** legyen **Meta Data**, és a **Meta Field** listában válaszd ki az új mezőt. Egyedi tartalomtípusnál (CCT) a **Post/Term/User/Object Data** forrást válaszd, és az **Object Field** listában a CCT neve alatt keresd a **Gallery** mezőt.
6. Kapcsold be a **Filter field output** kapcsolót, és a **Callback** listában válaszd az „Images gallery grid” vagy az „Images gallery slider” elemet.
7. Ha kell, a **Stílus** fülön alakítsd a galériát, majd mentsd a sablont.

Ez a megoldás egyszerű képgyűjteményekhez, egyedi galériaelrendezésekhez, a galéria és más dinamikus tartalom összekapcsolásához és könnyű sablonokhoz jó, külön galéria-widget nélkül. A két callback csak akkor szerepel a listában, ha a **JetEngine → JetEngine → Modulok** oldalon bekapcsoltad a megfelelő modult (lásd a [Dynamic Field](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-dinamikus-mezo/) fejezetet).

## Listázási sablonban

A **Dynamic Image**, a **Dynamic Field** és a dinamikus háttér ugyanígy működik a listázási sablonokban is. Egy Listing Grid, profilkártya, ingatlan-előnézet, termékbemutató vagy csapattag-elrendezés minden eleménél a saját mezőjéből töltődik be a média.

## Gyakori kérdések

**Miért látok csak egy számot a kép helyett a Dynamic Fielddel?** A **Media** mező a kép azonosítóját tárolja, és nincs callback. Kapcsold be a **Filter field output** kapcsolót, és válaszd a „Kép lekérése ID alapján” callbacket.

**Melyik a legkönnyebb mód?** A **Dynamic Image**, mert egyben szabályozhatod a méretet, a stílust, a hivatkozást és a reszponzív viselkedést.

**Használható a kép háttérként?** Igen: Elementorban dinamikus címkével, Bricksben dinamikus adattal.

**Hogyan jelenítsem meg a galéria képeit?** A **Dynamic Field** elemmel a „Images gallery grid” vagy „Images gallery slider” callbackkel.