Az elmosódott képekkel kapcsolatos incidensek többségét a téma stílusa okozza, ami azt jelenti, hogy a téma kialakítása olyan pixeles képméretekkel rendelkezik, amelyek nem feltétlenül játszanak jól a WooCommerce-szel.

Forrás a WooCommerce 3.3-tól Vissza a tetejére

A 3.3-as és újabb verziójú WooCommerce támogatja a témák WooCommerce-szel való kompatibilitását és a képméretek megjelenítésének és vágásának javítását. Ezek az új funkciók azt jelentik, hogy:

• A téma inkompatibilitás vagy a kód felülírása által okozott elmosódott képek többé nem fordulhatnak elő.
• A bolt tulajdonosai szabályozhatják a fő képek szélességét és magasságát.
• A miniatűrök méretének átméretezése automatikusan vagy manuálisan is elvégezhető.
• A vásárlóknak megjelenített képek alapértelmezés szerint mindig jól néznek ki, így a termékei továbbra is eladják magukat!

Az új funkciók használatának megismeréséhez látogasson el a következő oldalra: Termékek kezelése és Termékképek és galériák hozzáadása.

Más megoldások Vissza a tetejére

Ha a WooCommerce 3.3 előtti verzióját használja, javasoljuk, hogy frissítsen a legújabb verzióra, hogy kihasználhassa a fent leírt funkciók előnyeit.

Ha valamilyen okból kifolyólag nem kívánja a legújabb verziót használni, vagy a 3.3-ra való frissítés nem javítja a tapasztalt problémát, akkor ez lehet:

• A képméret beállításai túl kicsik.
• Az eredeti képeknek nagyobb felbontásúnak kell lenniük.

A probléma megoldásához:

• A képméreteknek meg kell egyezniük vagy nagyobbnak kell lenniük, mint a téma méreteinek.
• A feltöltött eredeti képeknek legalább 800 x 800px vagy nagyobbnak kell lenniük, hogy a legtöbb témában működjenek.

A videóban és alább megmutatjuk, hogyan találhatod meg a témád által kívánt maximális képméretet.

Képtípusok Vissza a tetejére

• Egyetlen termékkép: A legnagyobb kép az egyes termékek adatlapján, és a fő/jellemző képre utal.
• Katalógusképek: Közepes méretű kép, amelyet a termékkörökben használnak, például a Vásárlás oldalon, a termékkategória oldalakon, a Kapcsolódó termékeken, az Up-sell és Cross-sell oldalakon.
• Termék miniatűr képek: A legkisebb kép, amelyet általában a Kosár, a Widgetek és (opcionális) Galéria képekben használnak az Egyetlen termék képe alatt.

Szokásos képméretek Vissza a tetejére

A WooCommerce 3.2x és az alatti verziókban a termékképek beállításai a WooCommerce > Beállítások > Termékek > Megjelenítés > Termékképek alatt találhatók. Vegye figyelembe, hogy az első szám a szélességet, a második a magasságot jelenti.

A feltöltött képek méretét a rendszer a megadott értékekhez igazítja. Ha például a beállításai 100×100-asak, és feltölt egy 300×600-as képet, akkor azt 100×200-ra méretezi át a rendszer. Választhatod a képek “kemény vágását” is, ami a feltöltött nyers képtől függetlenül a beállításokban megadott méretre kényszeríti őket, így a képeket inkább levágják, mint méretarányukban eltorzítják.

Ha a termékképek feltöltése után módosítod a beállításokat, a WordPressen belül újra kell generálnod a miniatűröket, hogy a módosítások érvényesüljenek. Ehhez javasoljuk a Regenerate Thumbnails plugin használatát.

A WooCommerce 3. verziójától kezdve.3, a termékképek beállításai a Testreszabás alatt találhatók, a WooCommerce > Termékképek:

A téma termékképméreteinek megkeresése Vissza a tetejére

A választott téma delegálja a kép maximális méretét, így ismernie kell a méreteket, amelyekben megjeleníti őket, hogy beállíthassa azokat a WooCommerce-ben.

Katalógusképek Vissza a tetejére

Meghatározza, hogy a téma hol rendereli a legnagyobb méretben a katalógus miniatűr képeit. Egyes esetekben ez a bolt oldal; a Twenty Eleven témában ez a kapcsolódó termékek hurokban van.

A fejlesztői eszközök engedélyezésével a választott böngészőben jobb gombbal kattinthat a képre, és kiválaszthatja az “Inspect” vagy az “Inspect Element” lehetőséget. Ez meg fogja mondani a kép méreteit. Jegyezze fel, mivel később szükségünk lesz rájuk.

A Storefrontban (fent) a legnagyobb katalógusképek 213 x 213px-es méretben kerülnek megjelenítésre.

Egyetlen termékkép Vissza a tetejére

Ismételje meg a folyamatot az egyetlen termékkép – a termékoldal legnagyobb képe – esetében.

A Storefrontban a legnagyobb Egyetlen termékkép 298 x 298px méretben kerül megjelenítésre.

Termék miniatűrje Vissza a tetejére

A legkisebb valószínűleg a termékgaléria miniatűrje. Ismételje meg az ellenőrzési folyamatot, hogy megkapja a méreteket.

A Storefrontban 43 x 43px méretben rendereli.

A képméretek beállítása és a miniatűrök újragenerálása Vissza a tetejére

Most, hogy az összes miniatűr képméret ismert az adott témánkhoz, hozzáadhatjuk ezeket az új méreteket a WooCommerce-hez, hogy a jövőben a képek mérete ilyen vagy nagyobb legyen.

A WooCommerce > Beállítások > Termékek > Megjelenítésben győződjön meg róla, hogy a maximális képméretek legalább akkorák, mint a témája által az adott miniatűrökhöz renderelt méretek. Ezután mentse a változásokat.

A feltöltött új termékképek mostantól ezekben a beállításokban lesznek miniatűrök, és torzítás és elmosódás nélkül kell megjelenniük.

Retina támogatás Vissza a tetejére

A közismert nevén retina kijelzők kétszer annyi vagy több képpontot tartalmaznak, mint a régebbi kijelzők. A retina kijelzőkön a pixeltökéletes képek érdekében állítsa be a miniatűröket a téma által megjelenített méret kétszeresére. Például, ha egy téma 80 x 80px-es képeket renderel, akkor 160 x 160px-es méretben szeretné, ha azok 160 x 160px-esek lennének.