# A médiatár képeinek listázása és letöltése
> SQL-lekérdezés a médiatár képeihez, listázási sablon képmegjelenítéssel és letöltés-hivatkozással.
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**.
*Új lekérdezés SQL/AI lekérdezés típussal* (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:
```html
```
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:
```html
Letöltés
```
5. Ha magára a képre kattintva szeretnéd letölteni, egyetlen widget is elég ezzel a formátummal:
```html
```
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.