A médiatár képeinek listázása és letöltése

Ez az útmutató a WordPress médiatárban lévő képeket listázza a frontenden, letölthető formában. Előfeltétel a JetEngine, egy szerkesztő (Elementor, blokkszerkesztő vagy Bricks) és a médiatárba feltöltött néhány kép.

Az SQL-lekérdezés

1. Nyisd meg a JetEngine → Lekérdezéskészítő oldalt, és kattints az Új hozzáadása gombra.
2. Adj nevet, a Lekérdezés típusa legyen SQL/AI lekérdezés.

https://minta-bolt.hu/wp-admin/admin.php?page=jet-engine-query&query_action=add

3. Az egyéni SQL-lekérdezés részben a From table listából válaszd a postmeta táblát, és kapcsold be a Use Join kapcsolót.
4. A Join Tables szakaszban kattints az Add new gombra. A Join Type legyen Inner Join, a Join Table posts. A When current table column mezőben az ID, az Is equal to other table column mezőben a post_id oszlopot válaszd.
5. A Where (query clauses) szakaszban vegyél fel két feltételt az Add new gombbal:
   • az első: Column postmeta.meta_key, Compare Equal, Value _wp_attached_file, Type Char;
   • a második: Column posts.post_type, Compare Equal, Value attachment, Type Char. Ez adja meg, hogy csak a csatolmányok (a képek) kellenek.
6. A Where Relation legyen And.
7. Kapcsold be a Group Results kapcsolót, és a Group By értéke legyen posts.ID. Így egy fájl nem jelenik meg többször akkor sem, ha több bejegyzéshez is csatolták.
8. Mentsd a lekérdezést az Add Query gombbal.

A listázási sablon

1. A JetEngine → Listázások/komponensek oldalon kattints az Új elem hozzáadása gombra.
2. A Lista forrása legyen Lekérdezéskészítő, válaszd ki az SQL-lekérdezést, add meg a nevet és a nézetet, majd kattints a Listázási elem létrehozása gombra.
3. A szerkesztőben tegyél be egy Dynamic Field widgetet. A Source Post/Term/User/Object Data, az Object Field meta_value. A meta_value oszlop a fájl útvonalát tárolja, ezért kapcsold be a Customize the field output kapcsolót, és a Field Format mezőbe írj HTML-kódot, ami képpé alakítja:

<img src="https://a-te-domained.hu/wp-content/uploads/%s">

4. Letöltés gombhoz tegyél be még egy Dynamic Field widgetet ugyanezekkel a beállításokkal, és ezt a Field Format értéket használd:

<a href="https://a-te-domained.hu/wp-content/uploads/%s" download>Letöltés</a>

5. Ha magára a képre kattintva szeretnéd letölteni, egyetlen widget is elég ezzel a formátummal:

<a href="https://a-te-domained.hu/wp-content/uploads/%1$s" download><img src="https://a-te-domained.hu/wp-content/uploads/%s"></a>

6. Mentsd a sablont az Update gombbal.

A %s helyére a mező értéke kerül. A saját domainedet írd be a példa címe helyére.

Megjelenítés

Tedd be a sablont egy oldalon a Listing Grid widgettel (blokkszerkesztőben blokkal, Bricksben elemmel). Csak a listázási sablont kell kiválasztanod, külön lekérdezést nem kell megadnod, mert a sablon már a lekérdezésen alapul.

A frontenden a médiatár képei jelennek meg, és a gombra vagy magára a képre kattintva letölthetők.