# Termékképek és galériák

> A termékkép és a termékgaléria kezelése, a képméretek, a galériás videók, a nagyítás és a fejlesztői beállítások.

A termékképek mutatják meg a vásárlónak, mit vesz. A jó kép bizalmat kelt, a boltot is szebbé teszi, és a keresők meg a közösségi oldalak is ezt jelenítik meg a terméked mellett. Ebből a fejezetből megtudod, hogyan adsz hozzá képet és galériát, hol állítod a képméreteket, hogyan teszel videót a galériába, és mit tudnak a nagyítás, a teljes képernyős nézet és a képek mozgatása.

A képek méreteit képpontban (pixelben) adjuk meg, előbb a szélességet: egy 800 x 800 képpontos kép 800 képpont széles és 800 képpont magas.

## A háromféle termékkép

A WooCommerce a feltöltött képből háromféle méretet készít, más-más helyre:

| Típus | Hol látszik |
| --- | --- |
| Egyedi termékkép | A legnagyobb kép: a termék oldalán a fő (kiemelt) kép. |
| Katalógus képe | Közepes méret: a termékek listáiban, vagyis a boltoldalon, a kategóriaoldalakon, a kapcsolódó, a felárazó és a keresztértékesítési termékeknél. |
| Termék bélyegképe | A legkisebb méret: a kosárban, a widgetekben és (ha a téma mutatja) a fő kép alatti galériában. |

**Ajánlott méret:** tölts fel legalább 800 x 800 képpontos képet. Ez a méret jól mutat egyedi képként, katalógusképként és bélyegképként is, a sok apró részletet mutató termékeknél a nagyobb kép jobb. Kisebb kép is működik, de a kép fontos eladási eszköz, ezért mindig a legjobb minőségű változatot használd. A megjelenítési méreteket a WooCommerce maga készíti el.

## Termékkép beállítása

A termék fő képe az a kép, amelyet a bolt a különböző méretekben mindenhol használ.

1. Nyisd meg a terméket a **Termékek → Minden termék** menüben. A szerkesztő jobb oldalán megtalálod a **Termékkép** és a **Termékgaléria** dobozt.
2. A **Termékkép** dobozban válaszd a **Termékkép beállítása** hivatkozást.
3. Válassz egy meglévő képet a médiatárból, vagy tölts fel újat a **Fájlok feltöltése** fülön.
4. Mentsd a terméket a **Frissítés** (új terméknél **Közzététel**) gombbal.

A termékkép cseréje és eltávolítása ugyanúgy megy, mint a bejegyzések és oldalak kiemelt képénél: kattints a képre a szerkesztéshez vagy cseréhez, a **Termékkép eltávolítása** hivatkozással pedig törölheted a termékről.

![A termékszerkesztő jobb oldali Termékkép és Termékgaléria doboza](./kepek/termekek-rendelesek-termekkep-doboz.webp)

*A termékszerkesztő jobb oldali Termékkép és Termékgaléria doboza* (https://minta-bolt.hu/wp-admin/post.php?post=17&action=edit)

A kép a két doboz helyét mutatja: felül a fő kép, alatta a galéria bélyegképei és a hozzáadó hivatkozás.

## Termékgaléria összeállítása

A galéria a termékhez csatolt további képeket mutatja a termék oldalán.

1. A **Termékgaléria** dobozban válaszd a **Termékgaléria képek hozzáadása** hivatkozást.
2. A **Médiatár** fülön jelölj ki egy vagy több képet, vagy tölts fel újakat.
3. Kattints a **Galériához hozzáadás** gombra.
4. Mentsd a terméket.

![A Képek hozzáadása a termék galériához ablak egy kijelölt képpel](./kepek/termekek-rendelesek-galeria-media.webp)

*A Képek hozzáadása a termék galériához ablak egy kijelölt képpel* (https://minta-bolt.hu/wp-admin/post.php?post=17&action=edit)

Figyeld a jobb alsó **Galériához hozzáadás** gombot: ezzel kerülnek a kijelölt képek a galériába.

- A termék oldalán a fő termékkép mindig a galéria első eleme, ezért nem kell még egyszer a galériába tenned.
- A galéria képeinek sorrendjét húzással változtathatod: fogd meg a képet, és vidd a kívánt helyre.
- Kép eltávolításához vidd az egeret a kép fölé, és kattints a piros X-re. A kép ilyenkor csak a galériából tűnik el, a fájl a médiatárban marad.

## Videó a galériában

A galériába képek mellé videó is kerülhet. A videók a galériában automatikusan, hang nélkül, ismétlődve játszódnak, ezért rövid, magáért beszélő felvételekhez jók: a termék használatát, különböző oldalait vagy mozgását mutatják.

A funkció kísérleti, alapból ki van kapcsolva. Mielőtt használod, érdemes tudnod:

- A videót előbb fel kell töltened a médiatárba. A YouTube-ról, a Vimeóról vagy más szolgáltatótól beágyazott videót a galéria nem támogatja.
- Bármilyen videót használhatsz, amelyet az oldalad feltöltésre enged, de az MP4 (H.264) játszódik le a legtöbb böngészőben. A tárhelyed feltöltési méretkorlátja érvényes.
- A fő termékkép mindig kép marad: videót csak a galériába tehetsz, fő képnek nem.
- A variációk galériájába, a termékek CSV-importjába és -exportjába, valamint a REST API-ba a videók jelenleg nem kerülnek bele.

### A funkció bekapcsolása

1. Nyisd meg a **WooCommerce → Beállítások → Haladó → Funkciók** oldalt, és görgess a **Kísérleti funkciók** részhez.
2. Jelöld be a **Product gallery videos** jelölőnégyzetet.
3. Kattints a **Módosítások mentése** gombra.

![A Kísérleti funkciók lista a bejelölt galériavideó-beállítással](./kepek/termekek-rendelesek-galeria-video-beallitas.webp)

*A Kísérleti funkciók lista a bejelölt galériavideó-beállítással* (https://minta-bolt.hu/wp-admin/admin.php?page=wc-settings&tab=advanced&section=features)

A lista tetején látszik a bejelölt beállítás.

A bekapcsolás után a **Termékgaléria** dobozban a hivatkozás **Add media to product gallery** feliratra (képek helyett médiafájlok hozzáadására) változik.

![A Termékgaléria doboz a bekapcsolt galériavideókkal](./kepek/termekek-rendelesek-galeria-video-doboz.webp)

*A Termékgaléria doboz a bekapcsolt galériavideókkal* (https://minta-bolt.hu/wp-admin/post.php?post=17&action=edit)

A hivatkozás felirata mutatja, hogy a doboz már videót is fogad.

### Videó hozzáadása

1. Nyisd meg a szerkesztendő vagy egy új terméket.
2. A **Termékgaléria** dobozban válaszd az **Add media to product gallery** hivatkozást.
3. A médiatárban jelöld ki a videót és a galériába szánt további képeket, majd kattints a **Galériához hozzáadás** gombra.
4. Mentsd a terméket a **Frissítés** vagy **Közzététel** gombbal.

A videó a galéria dobozában kis előnézetként jelenik meg a képek között. Húzással átrendezheted, a piros X-szel kiveheted a galériából (a fájl a médiatárban marad).

**Borítókép (poszter):** a galéria a videó kiemelt képét használja bélyegképnek, és addig mutatja, amíg a videó le nem tud játszódni. Beállításához nyisd meg a videót a **Média → Könyvtár** oldalon, válaszd a **További részletek szerkesztése** hivatkozást, és állíts be **Kiemelt képet**. Adj a borítóképnek alternatív szöveget is, hogy a képernyőolvasók le tudják írni a videót; ennek hiányában a WooCommerce a videó címét használja („Video: Hátizsák oldalzsebei” formában). Ha a videónak nincs borítóképe, a WooCommerce a videóból generált előnézetet mutat.

**Így látják a vásárlók:** a termék oldalán a kijelölt galériaelem játszódik, hang nélkül, ismétlődve, vezérlők nélkül, ezért tartsd a felvételt rövidre és érthetőre. Ha a vásárló másik elemre lép, a videó megáll. A videók a nagyított nézetben is megnyílnak, mint a képek. A klasszikus termékgaléria, a Termékkép-galéria blokk és a Termékgaléria blokk támogatja őket. Ha a témád saját sablonnal váltja le a WooCommerce galériasablonjait, a videók addig nem jelennek meg, amíg a téma nem támogatja őket.

A funkció kikapcsolása elrejti a videókat a termék oldaláról és a szerkesztőből, de nem törli őket. Ha újra bekapcsolod, a videók ugyanarra a helyre kerülnek vissza minden galériában.

## Mentés után: ellenőrzés és a galéria viselkedése

Minden képmódosítás után kattints a **Frissítés** vagy **Közzététel** gombra, majd nyisd meg a termék oldalát a bolt felületén, és nézd meg, hogy a fő kép, a galéria elemei és a sorrendjük stimmel-e.

- **Nagyítás:** ha a vásárló az egérrel a kép fölé megy, a kép a kurzor helyén nagyít, ami a finom részleteket mutatja. A klasszikus galériánál ez a témától függ. A Termékgaléria blokkban a blokk nagyítási beállítása szabályozza (alapból be van kapcsolva), de a mentett sablonod más értéket is használhat.
- **Teljes képernyős nézet:** a vásárló a képre kattintva (a klasszikus galériában a nagyító ikonra) nyitja meg a teljes képernyős galériát. A klasszikus galéria sötét hátteret használ. A Termékgaléria blokkban a blokk felugró ablakra vonatkozó beállítása vezérli, és a vásárló az ablakban görgeti végig a galériát.
- Mobilon az érintéses mozdulatok is működnek.

A klasszikus galériában a nagyítás, a teljes képernyős nézet és a csúszka csak akkor érhető el, ha a téma támogatja. A Storefront és a legtöbb WooCommerce-kompatibilis klasszikus téma igen. Blokk témánál nézd meg, melyik galériablokkot használja a terméksablonod a **Megjelenés → Szerkesztő** oldalon: az újabb Termékgaléria blokknak saját nagyítási és felugró ablak beállításai vannak, egyes sablonok még a régebbi Termékkép-galéria blokkot használják.

A klasszikus galéria nagyításának, teljes képernyős nézetének vagy csúszkájának kikapcsolása témaszintű módosítás, nem WooCommerce-beállítás (lásd lent, „Fejlesztőknek”).

## Képméretek a testreszabóban

A fő termékkép szélességét, a bélyegkép szélességét és a bélyegképek vágását a **Megjelenés → Testreszabás → WooCommerce → Termékképek** panelen állíthatod, klasszikus témánál.

- A téma saját képszélességeket is megadhat, ilyenkor a testreszabóban az ehhez tartozó szélességi beállítások eltűnnek, és a téma értékei érvényesek.
- Blokk témáknál a **Testreszabás** menü is hiányozhat. Ilyenkor a testreszabót közvetlenül is megnyithatod a `sajatoldal.hu/wp-admin/customize.php` címen.
- A galéria elrendezését, nagyítását és felugró ablakát blokk témánál a **Megjelenés → Szerkesztő** oldalon a terméksablon galériablokkja szabályozza.

## Fejlesztőknek

Ez a rész kódot igényel, ha nem vagy otthon a PHP-ban, kérd fejlesztő segítségét. Tesztkörnyezetben (staging) dolgozz, készíts biztonsági mentést, és csak gyermektémát vagy saját témát módosíts: se a WooCommerce-t, se egy külső szülőtémát ne szerkessz. A példák klasszikus, WooCommerce-támogatást bejelentő témára vonatkoznak, és olyan terméken próbáld őket, amelynek van kiemelt képe és legalább két galériaképe.

### A klasszikus galéria funkcióinak kikapcsolása

A téma `functions.php` fájljában, a meglévő PHP-szakaszon belül (új PHP nyitócímkét ne írj) add hozzá az alábbi függvényt. Csak azokat a `remove_theme_support()` sorokat hagyd meg, amelyeket ki akarsz kapcsolni (például a csúszka sorát töröld, ha a vásárlók továbbra is csúszkával lapozzanak).

```php
/**
 * A WooCommerce klasszikus termékgalériájának funkcióit kapcsolja ki.
 */
function mytheme_disable_product_gallery_features() {
	remove_theme_support( 'wc-product-gallery-zoom' );
	remove_theme_support( 'wc-product-gallery-lightbox' );
	remove_theme_support( 'wc-product-gallery-slider' );
}
add_action( 'after_setup_theme', 'mytheme_disable_product_gallery_features', 100 );
```

Mentés után ürítsd a gyorsítótárat. A függvény a 100-as prioritással fut, vagyis az alapértelmezett 10-es prioritású témafüggvények után. Ha a szülőtéma később kapcsolja be ezeket a funkciókat, a függvényedet az ő függvénye után futtasd.

- A nagyítás eltávolítása kikapcsolja a WooCommerce egérrel történő nagyítását.
- A lightbox eltávolítása kikapcsolja a PhotoSwipe nézegetőt (a képre mutató hivatkozás ilyenkor közvetlenül a képet nyithatja meg).
- A csúszka eltávolítása megváltoztatja a galéria megjelenését és lapozását, ezért ellenőrizd, hogy a vásárló minden képet elér.

Ellenőrzés: nyisd meg a tesztterméket asztali gépen és keskeny képernyőn, vidd az egeret a fő kép fölé, kattints a képre, lapozd a galériát. Nézd meg, hogy a kikapcsolt funkciók tényleg nem működnek, a meghagyottak igen, és minden kép elérhető. Ismételd meg egy változatos terméken is, egy saját képes variáció kiválasztásával: a megjelenő képnek frissülnie kell.

Ha egy funkció mégis aktív marad, ellenőrizd, hogy a termék a klasszikus galériát használja-e, és nincs-e később futó témafüggvény, galériacsere vagy a WooCommerce galériaparamétereit felülíró szűrő. A támogatási jelző átállítása nem kapcsolja ki más bővítmény galériáját. Az újabb Termékgaléria blokkra ez a példa nem vonatkozik.

Visszavonás: töröld a függvényt és az `add_action()` sorát, ürítsd a gyorsítótárat, és ismételd meg a galériaellenőrzést. Ha a navigáció elromlik vagy PHP-hibát jelez az oldal, állítsd vissza az előző fájlt a fájlkezelőből vagy a telepítőeszközzel.

### Termékképek szélességének beállítása a témában

A témád a katalógusképek, a galéria bélyegképei és a fő termékkép kért szélességét adhatja meg. Az értékek képpontban értendők a kért képméretre, a megjelenített szélességet a téma CSS-e szabja meg. Olyan eredeti képet használj, amely elég nagy a választott méretekhez: nagyobb méret kérése nem tesz részletesebbé egy kisebb eredetit.

A téma `functions.php` fájljában add hozzá az alábbi függvényt (a `300`, `100` és `800` helyére a választott szélességek kerüljenek):

```php
/**
 * A termékképek szélességét állítja be, a többi WooCommerce-témabeállítást megtartva.
 */
function mytheme_set_product_image_widths() {
	$support  = get_theme_support( 'woocommerce' );
	$settings = is_array( $support ) && isset( $support[0] ) && is_array( $support[0] ) ? $support[0] : array();

	$settings['thumbnail_image_width']         = 300;
	$settings['gallery_thumbnail_image_width'] = 100;
	$settings['single_image_width']            = 800;

	add_theme_support( 'woocommerce', $settings );
}
add_action( 'after_setup_theme', 'mytheme_set_product_image_widths', 100 );
```

A függvény megtartja a meglévő WooCommerce-támogatási beállításokat (például a `product_grid` értéket), és csak a három szélességet írja felül. Feltételezi, hogy a téma már együttműködik a WooCommerce-szel.

| Kulcs | Jelentés |
| --- | --- |
| `thumbnail_image_width` | A katalógusképek szélessége. A képarányt a katalóguskép vágási beállítása szabja meg. |
| `gallery_thumbnail_image_width` | A klasszikus termékkép alatti, négyzet alakú bélyegképek szélessége. |
| `single_image_width` | A fő termékkép szélessége, vágás nélkül. |

Ha a téma megadja a katalógus- vagy a fő kép szélességét, a WooCommerce elrejti a **Megjelenés → Testreszabás → WooCommerce → Termékképek** panel megfelelő szélességi beállításait, és a téma értékei előnyt élveznek a mentett beállításokkal szemben.

Ellenőrzés:

1. Tölts fel egy új tesztképet, amely nagyobb a kért szélességeknél, és rendeld a terméket, így nem keveredik össze egy régi, már legenerált képpel.
2. Nyisd meg a katalógust és a termék oldalát asztali gépen és keskeny képernyőn. Nézd az élességet, a vágást, a galéria bélyegképeit és a variációs képeket.
3. A böngésző fejlesztői eszközeivel vizsgáld meg a kép forrását és a reszponzív képjelölteket: a megfelelő méretek elérhetők-e (a böngésző a képsűrűség és az elrendezés szerint más jelöltet is választhat).
4. Ha a régi képek még a régi méreteket használják, biztonsági mentés után generáld újra a bélyegképeket az oldalad által támogatott képújragenerálási eszközzel, majd ürítsd a kép- és oldal-gyorsítótárat.

Ha egy kép homályos, ellenőrizd az eredeti feltöltés méretét és azt, hogy a böngésző melyik méretet választotta. Ha a megjelenített szélesség nem változott, a téma CSS-ét nézd: a kért képméret módosítása nem változtatja meg az oldal elrendezését. Galériacsere vagy képméret-szűrő más méreteket is kérhet. Visszavonáshoz töröld a függvényt és az `add_action()` sort, állítsd vissza a korábbi témaértékeket, és szükség esetén generáld újra az érintett bélyegképeket. Az eredeti feltöltéseket tartsd meg, hogy a képek újragenerálhatók legyenek.