# Dynamic Image és Dynamic Link

> A dinamikus kép és a dinamikus hivatkozás blokk beállításai: forrás, méret, hivatkozás, törlő link, adattár-linkek, lekérdezési argumentumok.

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.

![A Dynamic Image blokk beállításai](./kepek/dinamikus-tartalom-1-kep-blokk.webp)

*A Dynamic Image blokk beállításai* (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.

![A Dynamic Link blokk beállításai](./kepek/dinamikus-tartalom-1-link-blokk.webp)

*A Dynamic Link blokk beállításai* (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](https://hub.hellowp.io/hu/plugins/jet-engine/dinamikus-tartalom-dinamikus-mezo/) 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.