Videó megjelenítése a listában

A Média típusú metamező nem alkalmas videó megjelenítésére, ezért a videót a webcíme alapján, szöveges metamezőből jeleníted meg. Ez a fejezet a három módszert mutatja: videó a médiatárból, videó a YouTube-ról vagy Vimeóról, és több videó egy ismétlő mezőből.

Videó a médiatárból

Metamező

Vegyél fel egy Szöveg típusú metamezőt az egyéni bejegyzéstípushoz (vagy az alap bejegyzésekhez: ehhez a JetEngine → Metaboxok oldalon hozz létre metaboxot, és rendeld a bejegyzésekhez).

A videó feltöltése és a cím bevitele

1. A Média → Új hozzáadása oldalon töltsd fel a videót a merevlemezedről.
2. Kattints a feltöltött videóra, és másold ki a jobb oldali sávban látható webcímet.
3. Szerkeszd a bejegyzést, írd be a címet a metamezőbe, és kattints a Frissítés gombra.

Megjelenítés a listában

A listázási sablonban kétféle módon jeleníthető meg.

HTML-kóddal (Dynamic Field):

1. Húzz be egy Dynamic Field widgetet. A Source legyen Meta Data, a Meta Field pedig a videócímet tartalmazó mező.
2. Kapcsold be a Customize field output kapcsolót, és a Field format szövegmezőbe írj egy <video> HTML-kódot, amelyben a forrás helyén a %s jelölő áll. Így minden elem a saját metamezőjének értékét kapja, nem ugyanazt a videót.

<video controls width="100%">
  <source src="%s" type="video/mp4">
</video>

A forrássor típusa a videó formátumától függ: .mp4 esetén video/mp4, .ogv esetén video/ogg, .webm esetén video/webm.

Video widgettel (Elementor):

1. Húzz be egy Video widgetet, a Source legyen Self Hosted.
2. Kapcsold be az External URL kapcsolót, és kattints a mező jobb oldalán a Dynamic tags gombra.
3. Válaszd a JetEngine Custom Field címkét, majd kattints újra a mezőre, és a Field listából válaszd ki a videócímet tartalmazó metamezőt.
4. A lejátszás további beállításait szabd testre.

Videó harmadik fél szolgáltatójától

1. Vegyél fel Szöveg típusú metamezőt, és minden bejegyzés mezőjébe írd be a YouTube- vagy Vimeo-videó webcímét.
2. A JetEngine → Listázások/komponensek oldalon hozz létre sablont, és nyisd meg az Elementorban.
3. Húzz be egy Dynamic Field widgetet, a Source legyen Meta Data, a Meta Field a webcímet tartalmazó mező.
4. Kapcsold be a Filter field output kapcsolót, és a Callback legyen Embed URL.
5. A Style fülön a megjelenést tovább szabhatod.

Több videó ismétlő mezőből

Ha egy bejegyzéshez több videó tartozik, Ismétlő típusú metamezőt használj, és a videókat az egyedi bejegyzés oldalán listázd.

Háttérbeállítás

1. Az ismétlő mezőt kétféleképpen veheted fel: a JetEngine → Metaboxok oldalon metaboxban (bejegyzéstípusokhoz, taxonómiákhoz, felhasználókhoz vagy WooCommerce-termékekhez), vagy közvetlenül az egyéni bejegyzéstípusnál.
2. A bejegyzéstípus szerkesztőjében a Metamezők részben kattints az Új metamező gombra, add meg a Címkét és a Név/azonosító mezőt, a Mező típusa legyen Repeater.
3. Kattints az Új ismétlő mező gombra, adj meg címkét és nevet, a típus legyen Szöveg. Ide kerülnek a YouTube-webcímek. Több almezőt is felvehetsz.
4. Mentsd a bejegyzéstípust az Update Post Type gombbal.
5. Szerkeszd a bejegyzéseket, és illeszd be a videócímeket az ismétlő sorokba.

A listázási sablon

1. A JetEngine → Listázások/komponensek oldalon kattints az Új elem hozzáadása gombra, a Lista forrása legyen Ismétlő mező.
2. Állítsd be: Bejegyzéstípusból (az a típus, amelyhez az ismétlőt felvetted), Ismétlő forrása (JetEngine, JetEngine-opciók oldala vagy ACF), Ismétlődő mező (az ismétlő neve), a sablon neve és a Listázási nézet (Elementor vagy Gutenberg). Kattints a Listázási elem létrehozása gombra.
3. Elementor: húzz be egy Dynamic Field widgetet, a Source legyen Repeater Field, az Object field / Meta field / Repeater key / Component prop mezőbe írd a szöveges almező nevét. Kapcsold be a Filter field output kapcsolót, a Callback legyen Embed URL. Stílusban például a Field content width lehet Full width.
4. Blokkszerkesztő: ugyanezt a Dynamic Field blokkban állítsd be: Source = Repeater Field, az almező neve, Filter field output és Callback = Embed URL. A stílusbeállításokhoz telepítsd és aktiváld a JetStyleManager bővítményt, majd az ecset ikonnal nyisd meg a beállításokat.
5. Mentsd a sablont a Közzététel (blokkszerkesztőben Mentés) gombbal.

Megjelenítés az egyedi bejegyzés oldalán

Az ismétlő forrású sablont tartalmazó Listing Grid csak az egyedi bejegyzés (Single Post) oldalán jeleníthető meg.

1. Szerkeszd az egyedi bejegyzés sablont abban a szerkesztőben, amelyben készült (JetThemeCore vagy Elementor Pro).
2. Húzd be a Listing Grid widgetet vagy blokkot, és a Listing listából válaszd ki az ismétlő sablonját.
3. Állítsd be az oszlopok és az elemek számát, majd mentsd a sablont.

Az ismétlő mezőkről bővebben a Ismétlő mezők fejezetben olvashatsz.