# Galéria: rács, falazat és metró elrendezés

> Egyforma méretű képek rácsban, falazat és metró elrendezés a Galéria listázása widgettel, és az Ismétlő forrás képenkénti adatai.

A **Galéria listázása** widget három elrendezése, a rács, a falazat és a metró az ingyenes változatban is működik. Ez a fejezet azt mutatja meg, melyiket mikor érdemes választani, és hogyan állítod be őket. A widget minden beállítását a [Galéria listázása: áttekintés és beállítások](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/galeria-csapat-velemenyek-galeria-attekintes/) fejezet sorolja fel.

## Mielőtt elkezdesz

- A **Galéria listázása** widget legyen bekapcsolva a **The Plus Addons → Widgets** oldalon.
- A képeket a **Tartalom → Tartalom** szakaszban add hozzá: a **Válaszd ki az opciót** értéke maradjon **Normál**, és a **Képek hozzáadása** gombbal válaszd ki őket a médiatárból. A képeket a választón belül húzással rendezheted át.

## Melyik elrendezést válaszd?

| Elrendezés | Csempék mérete | Mikor használd |
|---|---|---|
| Rács | Mind egyforma | Minden kép egyformán fontos |
| Falazat | Egyforma szélesség, természetes magasság | Vegyes arányú fotók |
| Metró | Szándékosan vegyes | Egyes képeknek hangsúlyosabbnak kell lenniük |
| Carousel (Pro) | Diák | Kevés a hely, a képek görgethetők |

Az elrendezést a **Tartalom → Elrendezés** szakaszban a négy csempe közül választod: a rács az első, a falazat a második, a metró a harmadik.

## Rács: egyforma méretű képek

A rács az alapértelmezett elrendezés, tehát egy újonnan ledobott widget már rácsot mutat.

1. Az **Elrendezés** szakaszban hagyd kiválasztva a rácsot.
2. Add hozzá a képeket a **Képek hozzáadása** mezővel.
3. Az **Oszlopok kezelése** szakaszban állítsd be az oszlopokat: az **Oszlop asztali nézetben** alapértéke 4, az **Oszlop táblagépen** 3, az **Oszlop mobilon** 2. Mindegyik 1 és 6 közül választható, tehát egyedi CSS nélkül is lehet hat oszlopos asztali rács, amely telefonon kettőre esik vissza.
4. A **Felugró ablak elrendezése** értéke **Alapértelmezett**, ha a látogató a képre kattintva nagyban is látni szeretné. Ha a képek csak díszítenek, állítsd **Nem**re.

![A rács elrendezés négy oszloppal a nyilvános oldalon](./kepek/galeria-csapat-velemenyek-1-racs.webp)

*A rács elrendezés négy oszloppal a nyilvános oldalon* (https://minta-bolt.hu/gcv-racs/)

A képen minden csempe ugyanolyan széles, és a sorok egyenesen zárnak.

Ha a fényképek eltérő méretűek, a csempék különböző magasak lesznek, mert a rács az eredeti méreteket veszi át. Az egyformaság két lépésben érhető el:

1. A **Tartalom → Extra opciók** szakaszban kapcsold be a **Képméret megjelenítése** kapcsolót. Alapból ki van kapcsolva.
2. A megjelenő **Képfelbontás** listából válaszd a **Tp-image-grid** méretet, amely 700 × 700 képpontos négyzet. Minden csempe ekkora lesz.

![A Képméret megjelenítése bekapcsolva, alatta a Képfelbontás](./kepek/galeria-csapat-velemenyek-1-panel-extra-meret.webp)

*A Képméret megjelenítése bekapcsolva, alatta a Képfelbontás* (https://minta-bolt.hu/wp-admin/post.php?post=259&action=elementor)

A képen a kapcsoló bekapcsolva látszik, alatta a lenyíló lista a kiválasztott mérettel.

Tudnivalók:

- A **Képméret megjelenítése** csak rácsnál, falazatnál és metrónál jelenik meg. Carouselnél a **Kiemelt kép típusa** veszi át a szerepét.
- A forrásképek legalább 700 × 700 képpontosak legyenek. A WordPress nem nagyít, ezért a kisebb kép a saját méretében marad, és kilóg a sorból.
- A rögzített méret vág: a négyzet a magas álló képből csak a közepét mutatja. Ha a szélek elvesztése zavar, használj falazatot.
- A régebben feltöltött képekhez az új méret fájlja nem létezik, ezért a miniatűrök újragenerálására lehet szükség.
- A beállítás widgetenként érvényes, nincs oldalszintű vagy webhelyszintű változata.
- Két szakasz is **Extra opciók** nevű: a **Tartalom** fülön lévő tartalmazza a képméretet, a **Stílus** fülön lévő az effekteket.

## Falazat

A falazat azonos szélességű oszlopokat ad, a képek pedig megtartják a saját magasságukat, így az álló és fekvő fotók vágás nélkül kerülnek egymás mellé.

| | Rács | Falazat |
|---|---|---|
| Csempék magassága | Mind egyforma | Mindegyik kép a sajátját tartja |
| Vágás | Az egyformasághoz kell | Nincs |
| Függőleges rések | Nincsenek | Egyenetlenek, szándékosan |
| Mire jó | Termékek, logók, összehasonlítható képek | Fotók, vegyes álló és fekvő képek |

1. Az **Elrendezés** szakaszban válaszd a második csempét (falazat).
2. Add hozzá a képeket. A falazat akkor látszik falazatnak, ha a képek aránya vegyes: ha minden kép egyforma, az eredmény rácsnak néz ki, csak hézagokkal.
3. Az **Oszlopok kezelése** szakaszban állítsd be az oszlopokat. Legalább kettő kell: egy oszlopnál a falazat csak függőleges halom.

![A falazat elrendezés: az oszlopokban különböző magasságú képek](./kepek/galeria-csapat-velemenyek-4-falazat.webp)

*A falazat elrendezés: az oszlopokban különböző magasságú képek* (https://minta-bolt.hu/gcv4-falazat/)

A képen a csempék azonos szélesek, de az alsó széleik nem egy vonalban vannak.

A **Rendezetlen oszlopok** a **Stílus** fül **Extra opciók** szakaszában (Pro) a váltakozó oszlopokat függőlegesen eltolja, így lazább, szerkesztői hatást kapsz. Nem a **Tartalom** fül azonos nevű szakaszában van.

Tudnivalók:

- A falazat alja soha nem egyenes. Ha az egyenes alsó szél fontosabb, használj rácsot rögzített képmérettel.
- A **Képméret megjelenítése** falazatnál egyformára vágja a képeket, és ezzel elveszi a falazat lényegét, ezért ne kapcsold be.
- A képek az oszlopokat folyamatosan töltik, ezért az olvasási sorrend nem szigorúan balról jobbra halad.
- Ha az oszlopok egymásra csúsznak vagy összezsúfolódnak, a falazat a képek betöltése után számol. Ürítsd az oldal gyorsítótárát, és az **Elementor → Eszközök** oldalon futtasd a CSS és adatok újragenerálását. A képeket késleltetve töltő bővítmény is hátráltathatja a számolást.

## Metró

A metró vegyes méretű csempéket ad: néhány kép nagy, a többi körülötte tölti ki a helyet.

1. Az **Elrendezés** szakaszban válaszd a harmadik csempét (metró).
2. Add hozzá a képeket abban a sorrendben, ahogyan szeretnéd. A csempe méretét a pozíció dönti el, ezért az elsőként felvett képek kapják a nagy csempéket. A sorrendet húzással módosíthatod.
3. Az **Oszlopok kezelése** szakaszban az asztali, tablet és mobil oszlopbeállítás eltűnik, helyette a **Metro oszlop** jelenik meg: 3, 4, 5 vagy 6, alapértéke 3. Az ingyenes változatban a 4-6 Pro.
4. A **Metro stílus** a kiválasztott oszlopszámhoz választ csempeosztást, az alapértéke az 1. stílus. A táblagépnek külön metró beállítása is lehet.

![A metró elrendezés: kilenc kép vegyes méretű csempékben](./kepek/galeria-csapat-velemenyek-4-metro.webp)

*A metró elrendezés: kilenc kép vegyes méretű csempékben* (https://minta-bolt.hu/gcv4-metro/)

A képen az első kép nagy csempét kap, a többi kisebbet, és a minta ismétlődik.

Tudnivalók:

- Nem te választod ki, melyik kép legyen nagy: a méretet egy rögzített minta osztja ki a sorrend alapján. Az egyetlen szabályozód a képek sorrendje.
- A széles, alacsony csempe az álló képet erősen levágja. A fekvő képeket tedd a nagy csempék helyére.
- Sok képnél a minta ismétlődik, ezért a metró kisebb, válogatott készlettel mutat jól.
- Ha minden csempe egyforma, ellenőrizd, hogy valóban metró van-e kiválasztva (a rács mellette van), majd próbálj másik **Metro stílus**t.
- Ha rossz kép kapja a nagy csempét, húzd előrébb a listában.
- Ha a képek rosszul vágódnak, tedd az álló képeket magas csempéket kapó helyre, vagy válts falazatra, amely nem vág.

## Ismétlő forrás: képenkénti adatok

A **Normál** választó csak képet tárol. Ha minden képnek saját címe, felirata, kategóriája vagy linkje kell, állítsd a **Válaszd ki az opciót** értékét **Ismétlő**re (Pro). Ez teszi a képfalból portfóliót, és a kategóriaszűrő is csak ezzel a forrással működik. Mind a négy elrendezéssel használható.

| | Normál | Ismétlő |
|---|---|---|
| Képek hozzáadása | Egy többes választás a médiatárból | Egy sor képenként |
| Képenkénti cím és felirat | Nincs | Van |
| Képenkénti link | Nincs | Van |
| Kategóriaszűrő | Nem lehetséges | Van, csak ezzel a forrással |
| Sebesség nagy készletnél | Gyors | Lassabb, mert minden kép egy sor |
| Kiadás | Alap | Pro |

1. A **Tartalom → Tartalom** szakaszban állítsd a **Válaszd ki az opciót** értékét **Ismétlő**re. A képválasztó helyére sorok listája lép, alapból kettővel.
2. Nyiss meg egy sort, és töltsd ki a mezőket:

| Mező | Mit tartalmaz |
|---|---|
| **Kép kiválasztása** | A sor képe |
| **Cím** | A képpel együtt megjelenő cím, alapértéke „Image” |
| **Felirat** | Rövid leírás a kép alatt, a kitöltött mintaszöveget írd át |
| **Kategória** | A szűrő ezek szerint csoportosít, vesszővel több is megadható |
| **Ikon kiválasztása** | A csempére kerülő extra ikon vagy kép |
| **Egyéni URL** | A kép saját linkje, csak bekapcsolt **Doboz linkje** mellett kattintható |

3. További képhez kattints az **Elem hozzáadása** gombra, és ismételd a lépést. A sorokat húzással rendezheted, ami a metrónál azért fontos, mert a sorrend dönt a csempe méretéről.

![Az Ismétlő sor megnyitva: kép, cím, felirat, kategória és egyéni URL](./kepek/galeria-csapat-velemenyek-1-panel-ismetlo.webp)

*Az Ismétlő sor megnyitva: kép, cím, felirat, kategória és egyéni URL* (https://minta-bolt.hu/wp-admin/post.php?post=261&action=elementor)

A képen egy kinyitott sor látszik a fenti mezőkkel.

Tudnivalók:

- Az ingyenes változatban az **Ismétlő** lehetőség látszik, de a sorok helyett frissítési értesítést mutat.
- A **Felirat** mező mintaszöveggel érkezik: ha nem írod át, ez kerül ki az oldalra.
- A kategóriák szabad szöveg, nem választólista, ezért egy elírás új kategóriát hoz létre, és a „Természet” meg a „természet ” két külön szűrő lesz.
- Ötven képhez ötven sort kell kitölteni. Ha nincs képenkénti adat, a **Normál** forrás a jobb választás.
- Az **Egyéni URL** csak akkor kattintható, ha bekapcsolod a **Doboz linkje** kapcsolót, lásd a [Galéria: egyéni linkek és kategóriaszűrő](https://hub.hellowp.io/hu/plugins/theplus_elementor_addon/galeria-csapat-velemenyek-galeria-link-szuro/) fejezetet.

## Hibaelhárítás

**Egy képet mutat soronként a galéria.** Nézd meg az **Oszlop mobilon** és az **Oszlop táblagépen** értéket az **Oszlopok kezelése** szakaszban. Lehet, hogy kisebb töréspontot nézel, ezt az Elementor eszközváltójával ellenőrizheted.

**A csempék különböző magasak.** Az eredeti képméretek jönnek át. Kapcsold be a **Képméret megjelenítése** kapcsolót, és állíts be rögzített **Képfelbontás**t. Ha így is egyenetlen, nézd meg, hogy minden forráskép legalább akkora-e, és generáld újra a miniatűröket.

**Nem találom a Képméret megjelenítése kapcsolót.** Valószínűleg carousel elrendezésen vagy, ott ez a **Kiemelt kép típusa**. Egyébként a **Tartalom** fül **Extra opciók** szakaszát keresd, nem a **Stílus** fülön lévőt.

**A képre kattintva nem történik semmi.** A **Felugró ablak elrendezése** értéke **Nem**. Állítsd vissza **Alapértelmezett**re.

**A falazat rácsnak látszik.** A képek egyforma alakúak, vagy be van kapcsolva a **Képméret megjelenítése**.

**Nem találom a Rendezetlen oszlopok kapcsolót.** A **Stílus** fül **Extra opciók** szakaszában van, és Pro funkció.