Většina případů rozmazaných obrázků je způsobena stylizací motivu, což znamená, že design motivu má rozměry obrázků v pixelech, které nemusí ladit s WooCommerce.

Aktualizace od verze WooCommerce 3.3 Zpět na začátek

WooCommerce verze 3.3 a vyšší obsahuje podporu pro kompatibilitu motivů s WooCommerce a vylepšení vykreslování a ořezávání velikosti obrázků. Díky těmto novým funkcím by již nemělo docházet k:

• Rozmazávání obrázků způsobené nekompatibilitou témat nebo přepisováním kódu.
• Majitelé obchodů mohou kontrolovat šířku a výšku hlavních obrázků.
• Změnu velikosti miniatur lze provádět automaticky nebo ručně.
• Obrázky zobrazované zákazníkům vypadají ve výchozím nastavení vždy skvěle, takže se vaše produkty budou prodávat samy!“

Chcete-li se dozvědět, jak tyto nové funkce používat, přejděte na stránku:

Další řešení Zpět na začátek

Pokud používáte verzi WooCommerce starší než 3.3, doporučujeme aktualizovat na nejnovější verzi, abyste mohli využívat výše popsané funkce.

Pokud z nějakého důvodu nechcete používat nejnovější verzi nebo pokud aktualizace na verzi 3.3 neodstraní problém, který se u vás vyskytuje, může to být:

• Vaše nastavení velikosti obrázku je příliš malé.
• Originální obrázky musí mít vyšší rozlišení.

Chcete-li to vyřešit:

• Vaše rozměry obrázků by měly odpovídat nebo být vyšší než rozměry vašeho tématu.
• Originální obrázky, které nahráváte, by měly mít alespoň 800 x 800px nebo vyšší, aby fungovaly pro většinu témat.

Ve videu a níže vám ukážeme, jak zjistit maximální velikost obrázku, kterou chce vaše téma.

Typy obrázků Zpět na začátek

• Obrázek jednoho produktu:
• Obrázky z katalogu: Největší obrázek na stránce s podrobnostmi o jednotlivém produktu a odkazuje na hlavní/charakteristický obrázek:
• Obrázky miniatur produktů: Středně velký obrázek, který se používá v produktových smyčkách, jako je stránka obchodu, stránky kategorie produktů, související produkty, up-sell a cross-sell:

Standardní rozměry obrázku Zpět na začátek

Ve verzi WooCommerce 3.2x a nižší se nastavení obrázků produktů nachází na stránce WooCommerce > Nastavení > Produkty > Zobrazit > Obrázky produktů. Všimněte si, že první číslo je šířka a druhé výška.

Obrázky, které nahrajete, se zmenší tak, aby odpovídaly zadaným hodnotám. Například pokud máte nastaveno 100×100 a nahrajete obrázek o velikosti 300×600, jeho velikost se změní na 100×200. Můžete také zvolit „tvrdé oříznutí“ obrázků, které je donutí mít velikost zadanou v nastavení bez ohledu na nahraný surový obrázek, takže budou oříznuty, nikoliv zkresleny v měřítku.

Pokud změníte nastavení po nahrání obrázků produktů, musíte v systému WordPress přegenerovat miniatury, aby se změny uplatnily. K tomu doporučujeme použít doplněk Regenerovat miniatury.

Od verze WooCommerce 3.3 najdete nastavení obrázků produktů v části Přizpůsobení, v části WooCommerce >Obrázky produktů:

Zjistěte rozměry obrázků produktů v tématu Zpět na začátek

Vybrané téma deleguje maximální velikost obrázku, takže musíte znát rozměry, ve kterých je vykresluje, abyste je mohli nastavit ve WooCommerce.

Obrázky v katalogu Zpět na začátek

Určete, kde vaše téma vykresluje náhledy katalogu největší. V některých případech je to stránka obchodu, v tématu Twenty Eleven je to smyčka související produkty.

Při zapnutých nástrojích pro vývojáře ve zvoleném prohlížeči můžete na obrázek kliknout pravým tlačítkem myši a vybrat možnost „Inspect“ nebo „Inspect Element“. Tím se dozvíte rozměry obrázku. Zapište si to, protože je budeme potřebovat použít později.

V aplikaci Storefront (výše) se největší katalogové obrázky vykreslují ve velikosti 213 x 213px.

Obrázek jednoho produktu Zpět na začátek

Zopakujte postup pro obrázek jednoho produktu – největší obrázek na stránce produktu.

Na stránce Storefront je největší obrázek jednoho produktu vykreslen v rozměrech 298 x 298px.

Malý obrázek produktu Zpět na začátek

Nejmenší je pravděpodobně miniatura v galerii produktů. Zopakujte proces kontroly, abyste získali rozměry.

V obchodě Storefront se vykresluje v rozměrech 43 x 43px.

Úprava rozměrů obrázků a přegenerování miniatur Zpět na začátek

Teď, když známe všechny rozměry miniatur pro naše konkrétní téma, můžeme tyto nové rozměry přidat do obchodu WooCommerce, abychom zajistili, že budoucí rozměry obrázků budou mít tuto nebo větší velikost.

V části WooCommerce > Nastavení > Produkty > Zobrazení se ujistěte, že maximální rozměry obrázků jsou minimálně stejně velké jako rozměry, které vaše téma pro tyto miniatury vykresluje. Poté změny uložte.

Všechny nově nahrané obrázky produktů budou mít nyní miniatury v těchto nastaveních a měly by se zobrazovat bez zkreslení nebo rozmazání.

Podpora Retina Zpět na začátek

HiDPI displeje běžně známé jako retina displeje obsahují dvakrát nebo více pixelů než starší displeje. Pro pixelově dokonalé zobrazení na displejích Retina nastavte miniatury na dvojnásobnou velikost, než jakou vykresluje téma. Například pokud téma vykresluje obrázky ve velikosti 80 x 80px, chcete, aby měly velikost 160 x 160px.