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

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.

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.

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.

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.

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

/**
 * 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):

/**
 * 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.