Elmosódott termékképek javítása

Az elmosódott termékképeket általában az okozza, hogy a téma olyan méretben jeleníti meg a képet, amelyhez a feltöltött kép túl kicsi, vagy a WooCommerce képméret-beállításai túl alacsonyak. Ez a fejezet megmutatja, hogyan állapítsd meg a helyes méreteket, hogyan javítsd a beállításokat, és hogyan generáld újra a bélyegképeket.

Témaváltás vagy képméret-módosítás után mindig újra kell generálni a korábban létrehozott bélyegképeket: WooCommerce → Állapot → Eszközök, itt a Bolt bélyegképeinek újragenerálása sornál kattints az Újragenerálás gombra.

A három termékképtípus

A WooCommerce háromféle képet használ, mindegyiket más méretben jeleníti meg:

A feltöltött kép a beállított értékekhez igazodva átméreteződik. Ha például 100×100 képpont a beállítás, és 300×600 képpontos képet töltesz fel, a WooCommerce 100×200 képpontosra kicsinyíti. Be is kapcsolhatod a kemény vágást: ilyenkor a kép pontosan a megadott méretű lesz, a rendszer levágja a felesleget ahelyett, hogy torzítaná.

A képméret-beállítások klasszikus témáknál a Megjelenés → Testreszabás → WooCommerce → Termékképek helyen vannak. Blokkos témánál (például a Twenty Twenty-Five) nincs Testreszabás: a Megjelenés → Szerkesztő felületen, a megfelelő sablonban vagy sablonrészben állítod a képméretet, a részleteket a téma leírása adja.

A feltöltött kép ellenőrzése

1. Nyisd meg a Média könyvtárat, és kattints az egyik termékképre.
2. A Mellékletrészletek panelen nézd meg a méreteket. A legtöbb témához az eredeti képnek legalább 800×800 képpontosnak kell lennie.
3. Ha kisebb, cseréld le nagyobb felbontásúra: töröld véglegesen, majd tölts fel újat a Média → Új hozzáadása oldalon.
4. A terméket szerkesztve rendeld hozzá újra az új képet kiemelt képként.
5. Ellenőrizd, hogy a termékkép-beállítások egyeznek-e a téma által megjelenített legnagyobb mérettel vagy nagyobbak annál (lásd lent).
6. A feltöltés vagy a beállítás módosítása után generáld újra a bélyegképeket (WooCommerce → Állapot → Eszközök).

A téma képméreteinek kiderítése

A téma határozza meg, mekkora méretben jelenik meg a kép, ezért ezt kell megtudnod, mielőtt beállítod a WooCommerce-et. A böngésző fejlesztői eszközével nézd meg a megjelenített méreteket:

1. Nyisd meg a bolt oldalt a böngészőben. (Sok témánál itt a legnagyobb a katalóguskép.)
2. Kattints jobb gombbal egy termékképre, és válaszd a Vizsgálat (angol böngészőben Inspect) menüpontot.
3. Olvasd le a fejlesztői panelen a kép méretét.

Ugyanígy nézd meg a termék oldalán az egyedi termékképet, majd a galéria bélyegképét. A Storefront témánál például a katalóguskép 324×324, a termékkép 800×800 (a nagyítás miatt kell ekkora, még ha látszólag kisebb is), a bélyegkép 46×46 képpont.

A beállítások módosítása

1. Klasszikus témánál nyisd meg a Megjelenés → Testreszabás → WooCommerce → Termékképek helyet.
2. A Főkép szélessége értékét állítsd a téma által megjelenített legnagyobb mérettel egyenlőre vagy nagyobbra.
3. Kattints a Közzététel gombra.
4. Generáld újra a bélyegképeket a WooCommerce → Állapot → Eszközök oldalon.

Az új feltöltések az új beállításokat használják, a korábbiak az újragenerálás után frissülnek.

Retina és nagy felbontású kijelzők

A nagy pixelsűrűségű (retina) kijelzőkön kétszer annyi képpont van, ezért az éles képhez a bélyegképeket a téma által megjelenített méret kétszeresére állítsd. Ha a téma 80×80 képpontban jeleníti meg a képet, a beállítás legyen 160×160. A nagyobb képek lassabban töltődnek be, ezért döntés előtt nézd meg az analitikában, milyen eszközökről és képernyőméretekről érkeznek a vásárlóid.

Ami a WooCommerce 3.3 óta alapból működik

• A téma-inkompatibilitásból vagy felülíró kódból eredő elmosódás nem fordulhat elő.
• A főképek szélességét és magasságát te szabályozod.
• A bélyegképek átméretezése automatikus vagy kézi lehet.
• A vásárlók alapból helyesen látják a képeket.