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

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 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 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.

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 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.