# Galériarács

> Termékképek rácsos elrendezésben, nagyobb elsődleges képpel és „további képek” jelzéssel, Elementorban és a blokkszerkesztőben.

A **Galériarács** elem a képeket rácsban jeleníti meg. Egyedi termékoldalon, bejegyzéstípus-mezőből vagy kézzel kiválasztott képekkel is használható. Támogatja a nagyítást, a lightboxot és a videót.

## Termékképek rácsa Elementorban

Előfeltétel az Elementor és a WooCommerce. Termékoldal-sablonhoz olyan bővítmény is kell, amellyel egytermékes sablont lehet készíteni.

1. Ellenőrizd, hogy a termékhez fel vannak töltve a képek a terméklap szerkesztőjének **Termékgaléria** dobozában (**Termékek** menü, a termék szerkesztése).
2. Nyisd meg az oldalt vagy a termékoldal-sablont az Elementorban.
3. Húzd be a **Galériarács** elemet a kívánt helyre.
4. Az **Általános** szekció **Forrás** mezőjében válaszd a „WooCommerce-termékek” lehetőséget, és ha kell, add meg a **Termék ID**t.
5. Ha a nagyított nézetet is szeretnéd, kapcsold be a **Galéria bekapcsolása** kapcsolót: ettől megjelenik a **Galéria** fül.
6. Állítsd be a **Képek** szekciót, majd kattints a **Közzététel** gombra.

![A Galériarács Képek szekciója](./kepek/szerkeszto-racs-kepek.webp)

*A Galériarács Képek szekciója* (https://minta-bolt.hu/wp-admin/post.php?post=23&action=elementor)

### Képek szekció

| Beállítás | Mit csinál | Alapérték |
| --- | --- | --- |
| **Képméret** | A rácsban látszó képek felbontása. | Thumbnail |
| **Rács oszlopai** | Az oszlopok száma, eszközönként külön is megadható. | |
| **Elsődleges galériakép** | Bekapcsolva az első kép nagyobb, kiemelt képként jelenik meg, a többi kisebb bélyegképként mellette. | Ki |
| **Kiemelt kép mérete** | Az elsődleges kép felbontása. | Teljes |
| **Elsődleges kép szélessége (%)** | Az elsődleges kép szélessége a rácson belül. | |
| **A rács tételeinek száma** | Hány kép jelenjen meg a rácsban. 0 vagy -1 esetén az összes. | 4 |
| **Átfedő szöveg** | Ha a tételek száma kisebb, mint a képek száma, az utolsó csempén ez a szöveg látszik. | „További képek” |

![Galériarács nagy elsődleges képpel és négy kisebb bélyegképpel](./kepek/galeria-racs-front.webp)

*Galériarács nagy elsődleges képpel és négy kisebb bélyegképpel* (https://minta-bolt.hu/galeria-racs/)

A képen az elsődleges kép bal oldalon nagyobb, mellette négy kisebb kép áll; mindegyiken a lightboxot indító nagyítóikon látszik.

### Galéria fül (lightbox)

A **Galéria** fül azt szabályozza, mi indítja a képek nagyított, lapozható nézetét. A **Galéria bekapcsolása** kapcsoló nélkül a fül nem látszik.

- **Indító típusa:** ha „Kép” az értéke, a galéria a rácsban lévő képre kattintva indul. Ha „Gomb”, a képeken külön gomb jelenik meg, és a galéria arra kattintva nyílik meg.
- Gombos indítónál megadható a **gomb ikonja** (a Médiatárból választva vagy feltöltve), a **gomb pozíciója** a képen, és hogy a gomb **csak rámutatáskor** látszódjon-e.
- A galéria vezérlői mindkét indítótípusnál elérhetők.

A galéria további részleteit lásd: [Nagyítás és lightbox](https://hub.hellowp.io/hu/plugins/jet-woo-product-gallery/nagyitas-es-lightbox/). A videó beállításai: [Videó](https://hub.hellowp.io/hu/plugins/jet-woo-product-gallery/video/).

## Kézzel választott képek rácsa

Ha a képeket nem termékből szeretnéd venni, hanem a Médiatárból válogatnád össze, a **Forrás** mezőben válaszd a „Kézi kiválasztás” lehetőséget.

![A Galériarács Általános szekciója kézi kiválasztással: képválasztó, videó, nagyítás és galéria kapcsolók](./kepek/racs-es-modern-racs-forras.webp)

*A Galériarács Általános szekciója kézi kiválasztással: képválasztó, videó, nagyítás és galéria kapcsolók* (https://minta-bolt.hu/wp-admin/post.php?post=14&action=elementor)

A képen a kézi forrás látszik: a képválasztó mező még üres, alatta a három kapcsoló áll (**Videó bekapcsolása**, **Nagyítás bekapcsolása**, **Galéria bekapcsolása**).

1. Kattints a képválasztó mezőre (a plusz jelre). Megnyílik a Médiatár.
2. A **Fájlok feltöltése** fülön új képet tölthetsz fel, vagy a **Médiatár** fülön már feltöltöttet választhatsz. Több képet is kijelölhetsz.
3. A **Galéria szerkesztése** nézetben húzással átrendezheted a képek sorrendjét.
4. Mentsd a változást a galéria beszúrásával.
5. A kapcsolókkal kapcsold be, amire szükséged van:
   - **Videó bekapcsolása:** válaszd ki a videó típusát („YouTube”, „Vimeo” vagy saját tárhelyről feltöltött), add meg a videó URL-jét (saját tárhelynél a **Videó kiválasztása** gombbal töltöd fel), és a **Poszterkép** gombbal cseréld az alapértelmezett helykitöltő képet a sajátodra.
   - **Nagyítás bekapcsolása:** a **Nagyítás mértéke** értékkel állíthatod, mennyire nagyítson a kép.
   - **Galéria bekapcsolása:** megjelenik a **Galéria** fül, lásd fent.
6. A **Képek** szekcióban a képméret, az oszlopok száma, az elsődleges kép, a tételek száma és az átfedő szöveg ugyanúgy állítható, mint a termékes forrásnál.

## Galériarács blokk a blokkszerkesztőben

A **Gallery Grid** blokk a blokkszerkesztőben ugyanezt tudja, a beállítások egy része más helyen van.

1. Nyisd meg az oldalt, és szúrd be a **Gallery Grid** blokkot (lásd [Blokkszerkesztő](https://hub.hellowp.io/hu/plugins/jet-woo-product-gallery/blokkszerkeszto/)).
2. A **General** beállításoknál a forrás lehet „Post Types”, „Manual Select” vagy „WooCommerce Products”. Kézi választásnál megjelenik a **Select Gallery Images** gomb: kattints rá, tölts fel vagy válassz képeket, igazítsd a sorrendet az „Edit gallery” fülön, majd kattints az „Insert/Update gallery” gombra.
3. Videó: kapcsold be az **Enable Video** kapcsolót, és add meg a **Video Type** értékét („YouTube”, „Vimeo” vagy „Self Hosted”) és az URL-t, saját tárhelynél a **Select Video** gombbal. A **Select Poster** gombbal cserélheted az alapértelmezett helykitöltő képet.
4. Nagyítás: az **Enable Zoom** kapcsolóval, a **Zoom Magnify** értékkel.
5. Galéria: az **Enable Gallery** kapcsolóval, a **Trigger Type** mezővel. Gombos indítónál megadható az ikon (**Select Button Icon**), a **Button Position**, és hogy a gomb csak rámutatáskor látszódjon-e (**Show on Hover**). A vezérlők mindkét indítótípusnál elérhetők.
6. Az **Images** fülön állítsd be az **Image Size** és a **Columns Number** értéket eszközönként, a **Primary Gallery Image** kapcsolót, a **Grid Items Count** számot és az **Overlay Text** feliratot.
7. Az **Advanced** fülön az **Additional CSS Class(es)** mezőbe írt osztállyal egyedi stílust rendelhetsz a blokkhoz.
8. Frissítsd az oldalt, és nézd meg a weboldalon.

> **Megjegyzés**
>
> A blokkszerkesztőben egyes funkcióknak (galéria, diavetítés, videó előugró ablaka) nincs alapértelmezett ikonjuk, és addig nem látszanak, amíg nem választasz hozzájuk ikont. Ha bekapcsoltál egy funkciót, de nem látod, ellenőrizd, van-e ikon kiválasztva.

A blokk stílusát a JetStyleManager bővítménnyel állíthatod: az ecset alakú gombra kattintva nyílnak meg a stílusbeállítások.