Dynamic Image és Dynamic Link

A Dynamic Image és a Dynamic Link elem a legtöbbet listázási sablonban használható: a Listing Grid minden eleméhez más képet és más hivatkozást jelenít meg. Hasznos közönséges oldalon is. Ez a fejezet a blokkszerkesztős (Gutenberg) blokkok beállításait írja le; az Elementor widgetjei és a Bricks elemei ugyanezeket a lehetőségeket kínálják.

Dynamic Image

A blokk egy metamező értékéből jeleníti meg a képet. Így minden bejegyzéshez más kép rendelhető, és a listázási sablonban ezt mutatod meg.

1. A blokkszerkesztőben kattints a Blokk beszúrása gombra, és keress rá: „Dynamic Image”.
2. Állítsd be a forrást és a megjelenést a jobb oldali sávban.

https://minta-bolt.hu/wp-admin/post.php?post=22&action=edit

A képen az Általános szakasz látszik: a FORRÁS listában a „Bejegyzés bélyegképe” van kiválasztva, alatta a kézi megadás és az URL-előtag mezője, lejjebb az Elrendezés szakasz az IMAGE SIZE listával.

Általános

Beállítás	Mit csinál
FORRÁS	A lista, amelyből kiválasztod azt a mezőt, ahonnan a kép jön. Az alapértelmezett a „Bejegyzés bélyegképe”.
OR SET MANUALLY	A kiválasztás helyett beírhatod a mező nevét (egyedi mező, ismétlő mező kulcsa vagy komponensvezérlő neve). Az API Data forrásnál a képet adó tulajdonság elérési útját kell ide írni.
IMAGE URL PREFIX	Ha a mezőben csak az URL egy része van, a hiányzó elejét ide írd be, és a rendszer automatikusan elé illeszti.

Elrendezés

Beállítás	Mit csinál
IMAGE SIZE	A kép mérete. Vedd figyelembe, hogy a listázási sablont utána a Listing Gridben használod, és az elrendezés ott változhat.
KÉPARÁNY	A kép képaránya.
Linked Image	Kattinthatóvá teszi a képet. A Source listából kiválasztod azt a mezőt, amelynek értéke a kép hivatkozása lesz. Megadhatsz Link URL Prefix előtagot is.
Open in new window	A kép hivatkozását új ablakban nyitja meg.
Add the “rel” attr	A hivatkozáshoz rel attribútumot ad, amely a két oldal kapcsolatát írja le.
Hide if value is empty	Elrejti a képet, ha a mező üres.
Fallback Image	Ez a kép jelenik meg, ha a mezőben nincs kép, vagy valami elromlott.

A blokk megjelenését a Blokkstílus gombbal módosítod, amely a JetStyleManager bővítménnyel jelenik meg.

Képfeliratok és további beállítások blokkban

• Custom Image Alt: a kép alternatív szövege.
• Lazy load: a kép betöltését gyorsító kapcsoló.
• Add Image Caption: bekapcsolása után megjelenik az IMAGE CAPTION POSITION lista (Before vagy After: a felirat a kép előtt vagy után) és az IMAGE CAPTION TEXT mező a felirathoz.
• Image Width és Image Height: a kép méretei pixelben vagy százalékban. A KÉPARÁNY (például Original, 1:1, 3:2, 16:9) beállításnál megjelenik a SCALE gombpár: a COVER kitölti a teljes tárolót, szükség esetén kissé levágva a kép szélét; a CONTAIN a teljes képet mutatja, ha oldalt üres hely marad is.
• CONTEXT: pontosabban határozza meg a kép forrását, például Default Object, Current Object vagy Current User.
• A Speciális rész ADDITIONAL CSS CLASS(ES) mezője CSS-osztályt ad a blokknak.

Dynamic Image Elementorban és Bricksben

Az Elementor Dynamic Image widgetjének Tartalom, Stílus és Speciális füle van. A tartalmi beállítások a blokkéihoz hasonlók, de más néven szerepelnek:

Beállítás	Mit csinál
Source	A kép forrása: például a bejegyzés bélyegképe, a felhasználó avatarja, a termékek kiemelt képe vagy az egyedi bejegyzéstípus képe.
Custom field/repeater key/component control	Meta- vagy ismétlő mező neve, esetleg komponensvezérlő. Ha kitöltöd, ez erősebb a Source értékénél.
Image URL Prefix	Az URL elé kerülő szöveg, ha a forrás csak az URL egy részét tartalmazza.
Image Resolution	A kép mérete (például Thumbnail, Medium, Medium Large, Large).
Custom Image Alt	Alternatív szöveg, vagy dinamikus címkével egy metamezőből.
Add Image Caption	Felirat a kép előtt vagy után, szöveges vagy dinamikus címkével.
Lazy Load	A kép betöltésének optimalizálása.
Linked Image	Kattinthatóvá teszi a képet. Megnyílik a Link Source (például bejegyzés permalinkje, metamező, felhasználói adat), az egyedi mező vagy komponensvezérlő (felülírja a Link Source értékét), a Link URL Prefix, az Open in new window és az Add to “rel” attr beállítás.
Alignment	A kép igazítása (Start, Center, End, Stretch) eszközönként.
Hide if value is empty	Elrejti a képet, ha a mező üres.
Fallback Image	Az üres mező helyett megjelenő kép (JPG, GIF vagy PNG).
Context	A kép forrásának pontosabb megadása.

A Stílus fülön a kép szélessége, legnagyobb szélessége és magassága, a szegély és a lekerekítés állítható, valamint a felirat színe, tipográfiája, szélessége, igazítása, belső és külső margója, szegélye. A Speciális fülön az éppen aktív bővítmények beállításai is megjelennek.

A Bricks Dynamic Image eleme a CONTENT és a STYLE fület kínálja. A tartalmi beállítások ugyanazok, de a szöveges mezőkbe dinamikus adatot is választhatsz: a Dynamic image size a kép mérete, a Fallback image pedig a SELECT IMAGE gombot és a dinamikus adat vagy egyedi URL mezőit adja. A kinézetet a STYLE fülön szerkesztheted.

Dynamic Link

A Dynamic Link szöveget vagy képet burkol hivatkozásba. Hasznos listázási sablonban, ahol minden elemhez más URL tartozik. Listázási sablon létrehozásához nyisd meg a JetEngine → Listázások/komponensek menüt, és hozz létre új sablont vagy nyiss meg egy meglévőt.

1. A sablonszerkesztőben kattints a Blokk beszúrása gombra, és keress rá: „Dynamic Link”.
2. Válaszd ki a forrást és add meg a feliratot.

https://minta-bolt.hu/wp-admin/post.php?post=22&action=edit

A képen a FORRÁS lista „Közvetlen hivatkozás” értéke látszik, alatta a FELIRAT mező a %title% makróval, majd a lekérdezési argumentumok kapcsolója, az URL-előtag és az URL-horgony.

Forrás

A FORRÁS listában a következő lehetőségeket találod:

• Közvetlen hivatkozás: a tétel önálló oldalára vezet. Listázási sablonban a Listing Gridben arra az elemre visz, amelyre a látogató kattintott.
• Az aktuális bejegyzést törlő link: lehetővé teszi, hogy a felhasználó törölje a bejegyzést. Kattintáskor megerősítő üzenet jelenik meg, amelynek szövegét a Confirm deletion message mezőben adod meg. A törlést csak az a felhasználó végezheti el, akinek a szerepköre jogosult a bejegyzések szerkesztésére és törlésére. A Redirect after delete mezőbe azt a címet írd, ahová a törlés után a felhasználót átirányítod; ha üresen hagyod, a főoldalra jut. A Delete post type listában választhatsz, hogy a bejegyzés a lomtárba kerüljön, vagy végleg törlődjön.
• Profiloldal: a Profilkészítő modul bekapcsolása után jelenik meg. A Profile Page listából kiválasztott, a Profilkészítővel létrehozott oldalra vezet.
• Beállítások: az URL-t nem a bejegyzés mezőjéből, hanem egy beállítóoldalról (Options page) veszi. Az Option listában választod ki a mezőt.
• Hozzáadás az adattárhoz és Eltávolítás az adattárból: az Adattárak modul bekapcsolása után jelennek meg. Segítségükkel a felhasználó elemeket tehet egy adattárba, illetve kivehet onnan.
• Médiafájl: a médiafájl webcímére vezet.
• A lista további részében a létrehozott metamezők szerepelnek (a helyi telepítésen például a CCT mezői), bármelyiket választhatod az URL forrásának.

Ha a hivatkozás URL-je egy olyan metamezőben van, amely nincs a listában, írd a nevét az OR SET MANUALLY mezőbe.

További beállítások

Beállítás	Mit csinál
FELIRAT	A hivatkozás szövege. Alapértéke a %title% makró, de más makrókat is használhatsz.
Add Query Arguments	Lekérdezési argumentumokat fűz az URL végéhez. Ha az argumentumok mezőbe a post_id=%current_id% sort írod, az URL végére ez kerül.
URL PREFIX (TEL:, MAILTO: ETC)	Az URL elé kerülő szöveg, például tel: vagy mailto:.
URL ANCHOR	Horgonyt fűz az URL-hez, # nélkül megadva.
Ikon	A Select Icon gombbal a médiatárból SVG-ikont vagy képet választasz. A felirat törlésével csak az ikon marad. Színét, méretét és helyét a blokk stílusbeállításaiban módosíthatod.
HTML WRAPPER	A burkoló HTML-címke: DIV, SPAN, vagy H1 és H6 között bármelyik címsor (ekkor a hivatkozás címsor lesz), esetleg P.
Open in new window	Új ablakban nyílik meg a hivatkozás. Ajánlott bekapcsolni, mert a felhasználóknak kényelmesebb.
ADD “REL” ATTR	rel attribútumot ad a hivatkozáshoz. A lista elemei: „No”, „Alternate”, „Szerző”, „Bookmark”, „External”, „Súgó”, „License”, „Következő”, „Nofollow”, „Noreferrer”, „Noopener”, „Prev”, „Keresés” és „Címke”.
ARIA LABEL ATTR	Az aria-label attribútum szövege a képernyőolvasók számára.
Hide if value is empty	Elrejti a hivatkozást azoknál az elemeknél, ahol a forrásmező üres.
CONTEXT	Melyik objektum adatait használja. A lehetőségek megegyeznek a Dynamic Field fejezetben leírtakkal.

A Dynamic Link a források szerint részletesebben

A widget (blokk, elem) a forrás szerint más-más hivatkozást állít elő. A Source lista csoportokra oszlik: általános, felhasználói adatok, metamezők, kapcsolatok metaadatai, WooCommerce.

• Permalink: az egyedi bejegyzéstípus tételének saját oldalára vezet. A cím megjelenítéséhez a Label mezőben válassz makrót. Más mező kiírásához a Label mezőnél a Custom field beállítást használd (például a leírás mezőjét).
• Media File: médiafájlokat jelenít meg. Hozzá az ingyenes Csatolmányfájlra mutató link ID alapján külső modul kell, amelyet a JetEngine → Modulok → Külső modulok oldalon kapcsolsz be.
• Delete current post link: törli a bejegyzést. A Confirm deletion message mezőben a megerősítő üzenetet írhatod át (az alap: „Are you sure you want to delete this post?”), és használhatsz benne rövidkódot és makrót (például a %title% az aktuális bejegyzés címét írja ki). A Redirect after delete mezőben átirányítási címet adsz meg, makróval is. A Delete post type listában választod ki, hogy a bejegyzés a lomtárba kerül vagy végleg törlődik.
• Profile Page: a WordPress-felhasználóhoz rendelt profiloldalra irányít. A Add Query Arguments kapcsolóval a használt bejegyzéstípus adatait is átadhatod makróval.
• Options: a JetEngine beállítóoldalainak adatai közül választasz. A kiválasztás után megjelenik az Options lista, a hivatkozás a kiválasztott metamező értékéből lesz.
• JetAppointments Booking: add booking to Google calendar és JetBooking: add booking to Google calendar: hivatkozást adnak, amellyel a foglalás a felhasználó Google Naptárába kerül. Működésükhöz a JetAppointment vagy a JetBooking aktív kell legyen, esetenként további kapcsolódó bővítmény is (például Zapier vagy Make).
• Metamezők és kapcsolatok metaadatai: automatikusan megjelennek a listában, ha létrehoztál ilyeneket. A hivatkozást a kiválasztott mező értékéből veszi.
• WooCommerce: csak aktív WooCommerce mellett. A Permalink a terméknél ugyanúgy működik, az Add to Cart és a Remove from Cart kosárba helyező vagy onnan eltávolító gombot ad az egyedi termékoldalra (egyszerű terméknél) és a termékek listájába.

A CONTEXT beállításnál például a Permalink forrás és a Default object környezet az elem oldalára vezet, a Current User pedig a belépett felhasználó oldalára.

A Stílus részben a tipográfia, a háttér, a szöveg- és ikonszín, a belső és külső margó, a szegély és a szélesség állítható. A Speciális rész az aktív bővítményektől függ: elrendezés (margó, belső margó, szélesség, pozíció, Z-index, CSS-azonosító és osztály), Dinamikus láthatóság, mozgáshatások, átalakítás, háttér, reszponzív beállítások, attribútumok és egyedi CSS.