<?php woocommerce_breadcrumb(); ?><\/code><\/pre>\n\n\n\nPotom trochu \u0161t\u00fdlu p\u00edsma pre drob\u010dek a meta produktu a vytvorenie trocha priestoru:<\/p>\n\n\n\n
.product_meta>span,\n.woocommerce-breadcrumb {\n text-transform: uppercase;\n font-size: 12px !important;\n font-weight: 500;\n}\n\n.woocommerce div.product div.summary .woocommerce-breadcrumb {\n margin-bottom: 40px;\n}<\/code><\/pre>\n\n\n\n<\/div>\n\n\n\n
<\/span>Z\u00e1sobn\u00edk gal\u00e9ri\u00ed a lepen\u00e9 zhrnutie<\/span><\/h2>\n\n\n\n<\/span>#Hook 2 - Z\u00e1sobn\u00edk gal\u00e9ri\u00ed<\/span><\/h3>\n\n\n\nN\u00e1\u0161 prv\u00fd h\u00e1\u010dik vykon\u00e1va v\u0161etku \u0165a\u017ek\u00fa pr\u00e1cu. Pozrime sa na k\u00f3d:<\/p>\n\n\n\n
<div class="woo-sumamry-wrap"><!-- open wrap -->\n<div class="woo-gallery-stack hide-on-mobile">\n<?php if ( has_post_thumbnail( $product->id ) ) {\n $attachment_ids[0] = get_post_thumbnail_id( $product->id );\n $attachment = wp_get_attachment_image_src($attachment_ids[0], 'full' ); ?> \n <img src="<?php echo $attachment[0] ; ?>"\/>\n<?php }\t\n\nglobal $product;\n$product_image_ids = $product->get_gallery_image_ids();\n\nforeach( $product_image_ids as $product_image_id ) {\n $image_url = wp_get_attachment_url( $product_image_id );\n echo '<img src="'.$image_url.'">';\n}?>\n<\/div><\/code><\/pre>\n\n\n\n<\/span>Najprv vytvor\u00edme Wrap<\/span><\/h4>\n\n\n\nPrv\u00fd riadok k\u00f3du <div class="woo-summary-wrap"><!-- open wrap --><\/code> otvor\u00ed ob\u00e1lku okolo gal\u00e9rie, s\u00fahrn a karty. T\u00fdm sa obmedz\u00ed prekr\u00fdvanie lepiaceho s\u00fahrnu s na\u0161imi s\u00favisiacimi produktmi na cel\u00fa \u0161\u00edrku.<\/p>\n\n\n\nZnalci k\u00f3du si v\u0161imn\u00fa na\u0161u woo-summary-wrap<\/code> sa v skuto\u010dnosti neuzatv\u00e1ra, t. j. nie <\/div><\/code>. Ale ne\u013eakajte sa, v\u0161etko je v poriadku.<\/p>\n\n\n\n<\/span>Potom vytvor\u00edme z\u00e1sobn\u00edk<\/span><\/h4>\n\n\n\nZvy\u0161ok k\u00f3du skontroluje, \u010di existuj\u00fa miniat\u00fary, a potom vyp\u00ed\u0161e hlavn\u00fd obr\u00e1zok, po ktorom nasleduje slu\u010dka obsahuj\u00faca ostatn\u00e9 obr\u00e1zky produktov. <\/p>\n\n\n\n
V z\u00e1sobn\u00edku gal\u00e9rie sa pou\u017e\u00edva obr\u00e1zok v plnej ve\u013ekosti. Odpor\u00fa\u010da sa nahra\u0165 obr\u00e1zky, ktor\u00e9 zodpovedaj\u00fa tejto ve\u013ekosti. V aktu\u00e1lnom nastaven\u00ed m\u00e1me \u0161\u00edrku kontajnera 1320px. Gal\u00e9ria zaber\u00e1 pribli\u017ene 60% z tejto \u0161\u00edrky. To znamen\u00e1, \u017ee optim\u00e1lny obr\u00e1zok v plnej ve\u013ekosti je \u0161irok\u00fd pribli\u017ene 800px.<\/p>\n\n\n\n
Ke\u010f\u017ee ide o presne tie ist\u00e9 obr\u00e1zky, ktor\u00e9 sa pou\u017e\u00edvaj\u00fa v koloto\u010di gal\u00e9rie ( zv\u00e4\u010d\u0161enie ), nedoch\u00e1dza k dvojit\u00e9mu na\u010d\u00edtaniu obr\u00e1zkov.<\/p>\n\n\n\n