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

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 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 Nemre.

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.

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.

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.

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ílust.
• 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.

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ő 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ást. 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értelmezettre.

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ó.