{"id":4372,"date":"2017-10-03T11:24:04","date_gmt":"2017-10-03T11:24:04","guid":{"rendered":"http:\/\/musilda.cz\/?p=4372"},"modified":"2017-10-03T11:24:04","modified_gmt":"2017-10-03T11:24:04","slug":"vite-woocommerce-pracuje-obrazky-eshopu","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/vite-woocommerce-pracuje-obrazky-eshopu\/","title":{"rendered":"V\u00edte jak WooCommerce pracuje s obr\u00e1zky v eshopu?"},"content":{"rendered":"\n<p>Na posledn\u00edm \u0161kolen\u00ed jsem se pokou\u0161el vysv\u011btlit, jak WooCommerce pracuje s obr\u00e1zky a pro\u010d to v\u017edy nedopadne tak jak chcete.<\/p>\n\n\n\n<p>Proto\u017ee m\u00e9 vysv\u011btlen\u00ed bylo pro n\u011bkter\u00e9 z \u00fa\u010dastn\u00edk\u016f komplikovan\u00e9 a matouc\u00ed, p\u0159ipravil jsem tento \u010dl\u00e1nek, s n\u011bkolika uk\u00e1zkami a vysv\u011btlen\u00edm, r\u016fzn\u00fdch p\u0159\u00edklad\u016f.<\/p>\n\n\n\n<p><span style=\"font-weight: 400\">P\u0159esto\u017ee se budeme zab\u00fdvat obr\u00e1zky, jen\u017e pou\u017e\u00edv\u00e1 WooCommerce, mus\u00edme si nejprve popsat, jak funguje vytv\u00e1\u0159en\u00ed obr\u00e1zk\u016f ve WordPressu. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">WooCommerce toti\u017e pou\u017e\u00edv\u00e1 mechanizmus, defaultn\u011b poskytovan\u00fd pr\u00e1v\u011b WordPressem.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Proto\u017ee budeme pou\u017e\u00edvat pojem velikost obr\u00e1zku, je nutno \u0159\u00edci, \u017ee se jedn\u00e1 o velikost v pixelech, tedy \u0161\u00ed\u0159ku a v\u00fd\u0161ku a ne datovou velikost obr\u00e1zku, co\u017e m\u016f\u017ee b\u00fdt t\u0159eba 600 kb.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Pust\u00edme se tedy do pr\u00e1ce s obr\u00e1zky.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Nez\u00e1le\u017e\u00ed na tom, zda obr\u00e1zek vkl\u00e1d\u00e1te do postu, nebo jej nahr\u00e1v\u00e1te do knihovny m\u00e9di\u00ed. WordPress p\u0159i ka\u017ed\u00e9m nahr\u00e1v\u00e1n\u00ed ulo\u017e\u00ed origin\u00e1l nahr\u00e1van\u00fd do syst\u00e9mu do slo\u017eky wp-content\/uploads\/slozka-aktualniho-mesice a vygeneruje k n\u011bmu takzvan\u00e9 n\u00e1hledy.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Jsou \u010dty\u0159i:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\">thumbnail &#8211; 150&#215;150 pixel\u016f<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">medium &#8211; 300&#215;300 pixel\u016f<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">medium_large &#8211; 768&#215;0 pixel\u016f &#8211; nula zde definuje neomezenou v\u00fd\u0161ku<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">large &#8211; 1024x 1024<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400\">Toto WordPress ud\u011bl\u00e1 v\u017edy. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Po nahr\u00e1n\u00ed obr\u00e1zku tak je ve slo\u017ece rovnou p\u011bt obr\u00e1zk\u016f. <\/span><\/p>\n\n\n\n<p><strong>A co WooCommerce?<\/strong><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Ta k tomu p\u0159id\u00e1 dal\u0161\u00ed t\u0159i:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400\">thumbnail produktu<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">obr\u00e1zek v katalogu<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400\">obr\u00e1zek detailu produktu<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400\">Z\u00e1m\u011brn\u011b neuv\u00e1d\u00edm rozm\u011bry, proto\u017ee ve WooCommerce m\u00e1te mo\u017enost velikost obr\u00e1zk\u016f nastavovat dle sv\u00e9ho uv\u00e1\u017een\u00ed. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">D\u00edky tomu, \u017ee obr\u00e1zek, jen\u017e nahr\u00e1v\u00e1te, m\u016f\u017ee m\u00edt jak\u00fdkoliv rozm\u011br a orientaci, \u010dasto se st\u00e1v\u00e1, \u017ee obr\u00e1zky produkt\u016f nejsou stejn\u011b velik\u00e9 a eshop pak p\u016fsob\u00ed rozh\u00e1zen\u011b.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/obrazky.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"872\" height=\"461\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/obrazky.jpeg\" alt=\"\" class=\"wp-image-4373\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/obrazky.jpeg 872w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/obrazky-300x159.jpeg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/obrazky-768x406.jpeg 768w\" sizes=\"(max-width: 872px) 100vw, 872px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">Poj\u010fme si vysv\u011btlit, pro\u010d tomu tak je. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Ka\u017ed\u00fd obr\u00e1zek, jen\u017e do syst\u00e9mu nahrajete, je \u201co\u0159ez\u00e1n\u201d. Sice ne v\u017edy, jak si pozd\u011bji vysv\u011btl\u00edme, ale zat\u00edm n\u00e1m to sta\u010d\u00ed. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">A ka\u017ed\u00fd o\u0159ez, mus\u00edme za\u010d\u00edt odn\u011bkud m\u011b\u0159it. &nbsp;WordPress za\u010dne naho\u0159e uprost\u0159ed. Pro p\u0159edstavu p\u0159ikl\u00e1d\u00e1m screen z pluginu, jen\u017e um\u00ed nastavit po\u010d\u00e1te\u010dn\u00ed sou\u0159adnice o\u0159ezu:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/position.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"187\" height=\"193\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/position.jpeg\" alt=\"\" class=\"wp-image-4374\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">Ne\u017e za\u010dneme pracovat s p\u0159\u00edklady, mus\u00edm je\u0161t\u011b uv\u00e9st, \u017ee o\u0159ez m\u016f\u017ee b\u00fdt hard, nebo soft. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">A podle toho se dost li\u0161\u00ed v\u00fdsledek. <\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">P\u0159\u00edklady o\u0159ezu obr\u00e1zku<\/h2>\n\n\n\n<p><span style=\"font-weight: 400\">Nejprve si stanov\u00edme rozm\u011bry. Budeme pracovat s v\u00fdsledn\u00fdm obr\u00e1zkem 600&#215;800 pixel\u016f, tedy obr\u00e1zkem na v\u00fd\u0161ku. <\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">P\u0159\u00edklad 1 &#8211; hard o\u0159ez, obr\u00e1zek orientovan\u00fd na v\u00fd\u0161ku.<\/h2>\n\n\n\n<p><span style=\"font-weight: 400\">WordPress se sna\u017e\u00ed vyplnit prostor, ur\u010den\u00fd pro obr\u00e1zek beze zbytku a proto vezme nejkrat\u0161\u00ed stranu a uprav\u00ed ji tak, aby odpov\u00eddala rozm\u011bru, v na\u0161em p\u0159\u00edpad\u011b 600 px. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Pro lep\u0161\u00ed pochopen\u00ed jsem pou\u017eil r\u00e1me\u010dek, tak\u017ee si p\u0159edstavte, \u017ee do n\u011bj vkl\u00e1d\u00e1te fotografii.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-1.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"530\" height=\"713\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-1.jpg\" alt=\"\" class=\"wp-image-4375\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-1.jpg 530w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-1-223x300.jpg 223w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">A p\u0159i hard o\u0159ezu, je v\u0161e co p\u0159e\u010duhuje o\u0159\u00edznuto:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-2.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"530\" height=\"713\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-2.jpg\" alt=\"\" class=\"wp-image-4376\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-2.jpg 530w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-2-223x300.jpg 223w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><\/a><\/figure><\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>P\u0159\u00edklad 2 &#8211; hard o\u0159ez, obr\u00e1zek orientovan\u00fd na \u0161\u00ed\u0159ku<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400\">A co se stane, pokud vlo\u017e\u00edme obr\u00e1zek na \u0161\u00ed\u0159ku?<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-3.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"984\" height=\"713\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-3.jpg\" alt=\"\" class=\"wp-image-4377\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-3.jpg 984w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-3-300x217.jpg 300w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-3-768x556.jpg 768w\" sizes=\"(max-width: 984px) 100vw, 984px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">WordPress op\u011bt na\u0161el nejmen\u0161\u00ed stranu, tentokr\u00e1t je to v\u00fd\u0161ka a upravil obr\u00e1zek tak, aby n\u00e1m r\u00e1me\u010dek vyplnill beze zbytku. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">V\u00fdsledek:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-4.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"519\" height=\"713\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-4.jpg\" alt=\"\" class=\"wp-image-4378\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-4.jpg 519w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-4-218x300.jpg 218w\" sizes=\"(max-width: 519px) 100vw, 519px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">N\u011bco chyb\u00ed, ne? Podobn\u011b, jako u p\u0159edchoz\u00edho p\u0159\u00edkladu, co je mimo r\u00e1me\u010dek, je o\u0159\u00edznuto. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">V p\u0159\u00edpad\u011b, \u017ee nechcete, aby v\u00e1m syst\u00e9m o\u0159ez\u00e1val fotografie, mus\u00edte je p\u0159i hard o\u0159ezu vkl\u00e1dat v p\u0159esn\u00e9m pom\u011bru stran. Pro tento p\u0159\u00edklad to je 3:4. Obr\u00e1zek, kter\u00fd bude 1353&#215;1804 pixel\u016f, bude zmen\u0161en p\u0159esn\u011b na 600&#215;800.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>P\u0159\u00edklad 3 &#8211; soft o\u0159ez, obr\u00e1zek na v\u00fd\u0161ku<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400\">Nyn\u00ed bude WordPress postupovat obr\u00e1cen\u011b. Najde nejv\u011bt\u0161\u00ed rozm\u011br &#8211; to je v\u00fd\u0161ka a uprav\u00ed ji tak, aby vyplnila r\u00e1me\u010dek. Zde jsem do obr\u00e1zku p\u0159idal barevn\u00e9 pozad\u00ed, aby bylo vid\u011bt, co se stalo:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-5.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"626\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-5.jpg\" alt=\"\" class=\"wp-image-4379\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-5.jpg 504w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-5-242x300.jpg 242w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">Jak vid\u00edte, obr\u00e1zek na v\u00fd\u0161ku vypl\u0148uje r\u00e1me\u010dek, ale proto\u017ee se WordPress sna\u017e\u00ed neo\u0159ez\u00e1vat, \u0161\u00ed\u0159ka je men\u0161\u00ed ne\u017e velikost r\u00e1me\u010dku. Na druhou stranu je obr\u00e1zek kompletn\u00ed.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>P\u0159\u00edklad 4 &#8211; soft o\u0159ez, obr\u00e1zek na \u0161\u00ed\u0159ku<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400\">Poj\u010fme se nyn\u00ed pod\u00edvat, co se stane, pokud p\u0159i soft o\u0159ezu, nahrajeme obr\u00e1zek orientovan\u00fd na \u0161\u00ed\u0159ku:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-6.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"674\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-6.jpg\" alt=\"\" class=\"wp-image-4380\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-6.jpg 555w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-6-247x300.jpg 247w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">Co\u017e asi tak\u00e9 nen\u00ed zcela ide\u00e1ln\u00ed. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Jak z toho ven?<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\"><strong>V podstat\u011b jsou 3 mo\u017enosti<\/strong>.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">M\u011bjte v\u0161echny obr\u00e1zky p\u0159ipraven\u00e9 ve stejn\u00e9 velikosti, orientaci a pom\u011bru stran. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Pokud nejsou podkladov\u00e9 obr\u00e1zky stejn\u00e9, m\u016f\u017eete z nich stejn\u00e9 ud\u011blat. Vytvo\u0159\u00edte si v grafick\u00e9m editoru b\u00edl\u00e9 pozad\u00ed v rozm\u011bru\/pom\u011bru, odpov\u00eddaj\u00edc\u00ed tomu definovan\u00e9mu a obr\u00e1zek do n\u011bj um\u00edst\u00edte t\u0159eba doprost\u0159ed:<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-7.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"555\" height=\"674\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-7.jpg\" alt=\"\" class=\"wp-image-4381\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-7.jpg 555w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-7-247x300.jpg 247w\" sizes=\"(max-width: 555px) 100vw, 555px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">V\u017edy to ale znamen\u00e1 n\u011bjakou pr\u00e1ci p\u0159i \u00faprav\u011b obr\u00e1zk\u016f. <\/span><\/p>\n\n\n\n<p><strong>Posledn\u00ed mo\u017enost, je nastavit jeden z rozm\u011br\u016f, p\u0159i soft o\u0159ezu na vysok\u00e9 \u010d\u00edslo. <\/strong><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Tuto mo\u017enost pou\u017e\u00edv\u00e1m j\u00e1, abych p\u0159ede\u0161el probl\u00e9m\u016fm, p\u0159i drobn\u00fdch nesrovnalostech ve velikostech, v rozmez\u00ed pixel\u016f a soft proto, aby WordPress neo\u0159ez\u00e1val \u010d\u00e1sti obr\u00e1zk\u016f.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Pamatujete na tento obr\u00e1zek?<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-5.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"504\" height=\"626\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-5.jpg\" alt=\"\" class=\"wp-image-4379\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-5.jpg 504w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-5-242x300.jpg 242w\" sizes=\"(max-width: 504px) 100vw, 504px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">Je to soft o\u0159ez p\u0159i rozm\u011bru 600&#215;800 pixel\u016f. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">A j\u00e1 pro tento rozm\u011br nastav\u00edm o\u0159ez 600&#215;9999 pixel\u016f. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">T\u00edm donut\u00edm WordPress, aby se sna\u017eil naj\u00edt nejv\u011bt\u0161\u00ed stranu, kterou uprav\u00ed do r\u00e1me\u010dku. Pokud je fotka velik\u00e1 600&#215;900 pixel\u016f, bude ji zv\u011bt\u0161ovat na v\u00fd\u0161ku, aby vyplnil t\u011bch 9999 px. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Jen\u017ee m\u00e1 nastaven soft o\u0159ez a nesm\u00ed tedy z r\u00e1me\u010dku ven. Stane se tedy to, \u017ee se zaraz\u00ed na \u0161\u00ed\u0159ce 600 pixel\u016f a d\u00e1le zv\u011bt\u0161ovat nebude, proto\u017ee nesm\u00ed z r\u00e1me\u010dku.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-8.jpg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"507\" height=\"695\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/image-8.jpg\" alt=\"\" class=\"wp-image-4382\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-8.jpg 507w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/image-8-219x300.jpg 219w\" sizes=\"(max-width: 507px) 100vw, 507px\" \/><\/a><\/figure><\/div>\n\n\n<p><span style=\"font-weight: 400\">Na obr\u00e1zku vid\u00edte, \u017ee r\u00e1me\u010dek \u201cpokra\u010duje\u201d nahoru &#8211; m\u00e1 nastaven rozm\u011br 9999 px a fotka je \u0161irok\u00e1 600px a nezdeformovan\u00e1. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">V\u00fdhody tohoto postupu jsou, \u017ee v\u0161echny obr\u00e1zky budou stejn\u011b \u0161irok\u00e9 a nebudou m\u00edt o\u0159ezy, co\u017e je probl\u00e9m p\u0159edev\u0161\u00edm u m\u00f3dy. <\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400\">Ale jako v\u017edy plat\u00ed, \u017ee orientace v\u0161ech fotografi\u00ed by m\u011bla b\u00fdt stejn\u00e1 a pom\u011br stran tak\u00e9. T\u00edm zabr\u00e1n\u00edte v\u0161em probl\u00e9m\u016fm.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Chcete se o WooCommerce dozv\u011bd\u011bt v\u00edce? P\u0159ihla\u0161te se na nejbli\u017e\u0161\u00ed \u0161kolen\u00ed<\/h3>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><a href=\"http:\/\/toret.cz\/produkt\/woocommerce-eshop-skoleni\/\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"80\" src=\"http:\/\/musilda.cz\/wp-content\/uploads\/2017\/10\/skoleni-woocommerce-banner-4.jpg\" alt=\"\" class=\"wp-image-4383\" srcset=\"https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/skoleni-woocommerce-banner-4.jpg 540w, https:\/\/affinite.io\/cs\/wp-content\/uploads\/sites\/2\/2017\/10\/skoleni-woocommerce-banner-4-300x44.jpg 300w\" sizes=\"(max-width: 540px) 100vw, 540px\" \/><\/a><\/figure><\/div>","protected":false},"excerpt":{"rendered":"<p>Na posledn\u00edm \u0161kolen\u00ed jsem se pokou\u0161el vysv\u011btlit, jak WooCommerce pracuje s obr\u00e1zky a pro\u010d to v\u017edy nedopadne tak jak chcete. Proto\u017ee m\u00e9 vysv\u011btlen\u00ed bylo pro n\u011bkter\u00e9 z \u00fa\u010dastn\u00edk\u016f komplikovan\u00e9 a matouc\u00ed, p\u0159ipravil jsem tento \u010dl\u00e1nek, s n\u011bkolika uk\u00e1zkami a vysv\u011btlen\u00edm, r\u016fzn\u00fdch p\u0159\u00edklad\u016f. P\u0159esto\u017ee se budeme zab\u00fdvat obr\u00e1zky, jen\u017e pou\u017e\u00edv\u00e1 WooCommerce, mus\u00edme si nejprve popsat, jak<\/p>\n","protected":false},"author":1,"featured_media":8732,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[],"class_list":["post-4372","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-woocommerce"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/4372"}],"collection":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/comments?post=4372"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/4372\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8732"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=4372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=4372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=4372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}