{"id":587,"date":"2013-06-08T15:08:07","date_gmt":"2013-06-08T15:08:07","guid":{"rendered":"http:\/\/musilda.cz\/?p=587"},"modified":"2013-06-08T15:08:07","modified_gmt":"2013-06-08T15:08:07","slug":"nahledove-obrazky-ve-wordpressu","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/nahledove-obrazky-ve-wordpressu\/","title":{"rendered":"N\u00e1hledov\u00e9 obr\u00e1zky ve WordPressu"},"content":{"rendered":"\n<p>Post thumbnails, featured images, nebo \u010desky &#8211; n\u00e1hledov\u00e9 obr\u00e1zky, je vylep\u0161en\u00ed, kter\u00e9 je ve WordPressu od verze 2.9 a za tu dobu se u\u017e stalo b\u011b\u017enou sou\u010d\u00e1st\u00ed \u0161ablon, p\u0159edev\u0161\u00edm u magaz\u00edn\u016f, kter\u00e9 obsahuj\u00ed n\u00e1hled u ka\u017ed\u00e9ho \u010dl\u00e1nku . V dne\u0161n\u00edm n\u00e1vodu si uk\u00e1\u017eeme, jak n\u00e1hledov\u00e9 obr\u00e1zky do \u0161ablony p\u0159idat a jak je upravovat.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Podpora n\u00e1hledov\u00fdch obr\u00e1zk\u016f v \u0161ablon\u011b se aktivuje pomoc\u00ed funkce, kterou p\u0159id\u00e1me do functions.php<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_theme_support( 'post-thumbnails' );<\/pre>\n\n\n\n<p>Po p\u0159id\u00e1n\u00ed se n\u00e1m u editoru str\u00e1nky, nebo \u010dl\u00e1nku objev\u00ed nov\u00fd metabox<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/musilda.cz\/wp-content\/uploads\/2013\/06\/featured_image_metabox.jpeg\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"297\" height=\"81\" src=\"https:\/\/musilda.cz\/wp-content\/uploads\/2013\/06\/featured_image_metabox.jpeg\" alt=\"\" class=\"wp-image-588\" \/><\/a><\/figure>\n\n\n\n<p>Pokud tomu tak nen\u00ed, zkontrolujte, zda m\u00e1te v povolen\u00ed zobrazovan\u00fdch informac\u00ed za\u0161krtnut\u00fd n\u00e1hledov\u00fd obr\u00e1zek.<br \/>Po kliknut\u00ed na &#8222;Zvolit n\u00e1hledov\u00fd obr\u00e1zek&#8220; se v\u00e1m otev\u0159e klasick\u00fd dialog pro nahr\u00e1n\u00ed obr\u00e1zku.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zobrazen\u00ed thumbnail v \u0161ablon\u011b<\/h3>\n\n\n\n<p>Pokud jsme p\u0159idali n\u00e1hledov\u00fd obr\u00e1zek ke \u010dl\u00e1nku, mus\u00edme se tak\u00e9 postarat o to, aby se n\u00e1m v \u0161ablon\u011b zobrazoval. Toho dos\u00e1hneme jednoduch\u00fdm z\u00e1pisem:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if ( has_post_thumbnail() ) {\n\tthe_post_thumbnail();\n}\n<\/pre>\n\n\n\n<p>Tedy &#8211; pokud jej \u0161ablona podporuje, zobraz n\u00e1hledov\u00fd obr\u00e1zek. WordPress pou\u017e\u00edv\u00e1 \u010dty\u0159i z\u00e1kladn\u00ed velikosti pro n\u00e1hledov\u00e9 obr\u00e1zky, a to thumbnail &#8211; 150 x 150 pixel\u016f, medium &#8211; 300 x 300 pixel\u016f, large &#8211; 640 x 640 a full &#8211; pln\u00e1, neupraven\u00e1 velikost. Pokud pou\u017eijeme v \u0161ablon\u011b the_post_thumbnail(), automaticky se n\u00e1m zobraz\u00ed velikost 50 x 50 pixel\u016f. Pro zobrazen\u00ed jin\u00e9 velikosti pou\u017eijeme the_post_thumbnail(&#8218;large&#8216;).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Zm\u011bna defaultn\u00ed velikosti<\/h3>\n\n\n\n<p>Pokud n\u00e1m z\u00e1kladn\u00ed velikost nevyhovuje, m\u016f\u017eeme ji zm\u011bnit pou\u017eit\u00edm set_post_thumbnail_size:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">set_post_thumbnail_size( 50, 50 );\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Vytvo\u0159en\u00ed vlastn\u00edch velikost\u00ed<\/h3>\n\n\n\n<p>Samoz\u0159ejm\u011b, \u017ee n\u00e1m tyto velikosti nemus\u00ed vyhovovat a budeme pot\u0159ebovat vygenerovat si vlastn\u00ed. Pro to n\u00e1m poslou\u017e\u00ed funkce add_image_size(). Ta pou\u017e\u00edv\u00e1 \u010dty\u0159i parametry &#8211; jm\u00e9no, \u0161\u00ed\u0159ku, v\u00fd\u0161ku a o\u0159\u00edznut\u00ed.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_image_size( $name, $width, $height, $crop );\n<\/pre>\n\n\n\n<p>Pokud si tedy budeme cht\u00edt definovat nap\u0159\u00edklad pro v\u00fdpis kategorie n\u00e1hledov\u00fd s odli\u0161n\u00fdmi velikostmi, vlo\u017e\u00edme do functions.php:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">add_image_size( 'kategorie', 300, 250 );\n<\/pre>\n\n\n\n<p>Parametr pro o\u0159\u00edznut\u00ed je defaultn\u011b nastaven na false, jeho v\u00fdznam si vysv\u011btl\u00edme n\u00ed\u017ee.<br \/>N\u00e1\u0161 definovan\u00fd n\u00e1hledov\u00fd obr\u00e1zek si v \u0161ablon\u011b zobraz\u00edme:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if ( has_post_thumbnail() ) {\n\tthe_post_thumbnail('kategorie');\n}\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">O\u0159\u00edznut\u00ed obr\u00e1zku &#8211; crop mode<\/h3>\n\n\n\n<p>Parametr $crop funkce add_image_size definuje, jak\u00fdm zp\u016fsobem se bude n\u00e1hledov\u00fd obr\u00e1zek generovat.<br \/>M\u016f\u017ee m\u00edt dv\u011b hodnoty a to true a false.<br \/>Hodnota false je defaultn\u00ed a obr\u00e1zek je v\u017edy zmen\u0161en na nejv\u011bt\u0161\u00ed definovan\u00fd rozm\u011br a zbytek je od\u0159\u00edznut. Pokud pou\u017eijeme p\u0159edchoz\u00ed p\u0159\u00edklad, tak pokud nahrajeme obr\u00e1zek 1000 x 500 px, tak jej WordPress zmen\u0161\u00ed na nejv\u011bt\u0161\u00ed mo\u017enou velikost &#8211; tedy pokud by jej zmen\u0161il na 300px \u0161\u00ed\u0159ky, v\u00fd\u0161ka by pak byla 150px a \u010d\u00e1st obr\u00e1zku by chyb\u011bla. Proto jej tedy zmen\u0161\u00ed na \u0161\u00ed\u0159ku 500px a v\u00fd\u0161ku 250px. N\u00e1sledn\u011b jej pak o\u0159\u00edzne na 300 x 250 px.<br \/>Hodnota true znamen\u00e1, \u017ee se z obr\u00e1zku prost\u011b vy\u0159\u00edzne obr\u00e1zek s definovanou velikost\u00ed. Obr\u00e1zek se nijak nezmen\u0161uje.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">P\u0159id\u00e1n\u00ed class a \u00faprava alt<\/h3>\n\n\n\n<p>Funkce the_post_thumbnail() m\u00e1 krom\u011b parametru $size, tak\u00e9 parametr $attr, v kter\u00e9m jsou obsa\u017eeny:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>src &#8211; adresa obr\u00e1zku<\/li>\n\n\n\n<li>class &#8211; css t\u0159\u00edda<\/li>\n\n\n\n<li>alt &#8211; alt obr\u00e1zku<\/li>\n<\/ul>\n\n\n\n<p>Pokud nem\u00e1te pot\u0159ebu nic upravovat, m\u016f\u017eete tento atribut vynechat, ale pokud chcete n\u011bkter\u00e9 n\u00e1hledov\u00e9 obr\u00e1zky upravit, m\u016f\u017eete postupovat takto:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$attr = array(\n             class =&gt; 'moje-trida',\n             alt   =&gt; 'Super obr\u00e1zek'\n);\nthe_post_thumbnail('kategorie', $attr);\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Zobrazen\u00ed n\u00e1hledov\u00e9ho obr\u00e1zku mimo loop<\/h3>\n\n\n\n<p>Jen pro p\u0159ipomenut\u00ed, loop je v podstat\u011b smy\u010dka, kterou WordPress pou\u017e\u00edv\u00e1 pro v\u00fdpis obsahu str\u00e1nky\/\u010dl\u00e1nku\/kategorie\/arch\u00edvu. V\u0161e co je mezi if (have_posts()) : while (have_posts()) : the_post(); a endwhile; endif; je uvnit\u0159 loopu. Funkce the_post_thumbnail() funguje pouze uvnit\u0159 tohoto loopu. Pokud budete cht\u00edt vypsat n\u00e1hledov\u00fd obr\u00e1zek v jin\u00e9 \u010d\u00e1sti \u0161ablony, pou\u017eijte :<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">get_the_post_thumbnail( $post_id, $size, $attr );\n<\/pre>\n\n\n\n<p>Oproti the_post_thumbnail() je zde rozd\u00edl v nutnosti pou\u017e\u00edt $id_post, jinak je u\u017eit\u00ed identick\u00e9.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Z\u00edsk\u00e1n\u00ed id n\u00e1hledov\u00e9ho obr\u00e1zku<\/h3>\n\n\n\n<p>N\u011bkdy se m\u016f\u017eete dostat do situace, kdy pot\u0159ebujete z\u00edskat id n\u00e1hledov\u00e9ho obr\u00e1zku. Pak pou\u017eijte funkci:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">$post_thumbnail_id = get_post_thumbnail_id( $post_id );\n<\/pre>\n\n\n\n<p>Klasick\u00fd p\u0159\u00edklad, kdy se v\u00e1m bude id obr\u00e1zku hodit, je zobrazen\u00ed n\u00e1hledov\u00fdch obr\u00e1zk\u016f, kter\u00e9 se maj\u00ed otev\u0159\u00edt v n\u011bjak\u00e9m fancyboxu, \u010di lightboxu:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">if ( has_post_thumbnail()) {\n$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post-&gt;ID), 'large');\necho '<a class=\"fancybox\" title=\"' . the_title_attribute('echo=0') . '\" href=\"' . $large_image_url[0] . '\">';\necho get_the_post_thumbnail($post-&gt;ID, 'thumbnail');\necho '<\/a>';\n }\n<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Zm\u011bna velikost\u00ed ji\u017e vlo\u017een\u00fdch n\u00e1hledov\u00fdch obr\u00e1zk\u016f<\/h3>\n\n\n\n<p>Pokud upravujete ji\u017e pou\u017eitou \u0161ablonu, tak po p\u0159eps\u00e1n\u00ed velikosti ve functions.php se nic nestane. To je proto, \u017ee WordPress ukl\u00e1d\u00e1 n\u00e1hledov\u00e9 obr\u00e1zky v\u017edy, kdy\u017e jej nahr\u00e1v\u00e1te. Proto mus\u00edte pou\u017e\u00edt n\u011bkter\u00fd z plugin\u016f, kter\u00fd vygeneruje thumbnails znovu. J\u00e1 pou\u017e\u00edv\u00e1m <a href=\"http:\/\/wordpress.org\/plugins\/regenerate-thumbnails\/\" target=\"_blank\" rel=\"noopener\">Regenerate thumbnails<\/a> a mohu jej v\u0159ele doporu\u010dit.<\/p>\n\n\n\n<p>A to by o n\u00e1hledov\u00fdch obr\u00e1zc\u00edch mohlo b\u00fdt v\u0161e. V n\u011bkter\u00e9m z dal\u0161\u00edch \u010dl\u00e1nk\u016f se pokus\u00edm sepsat n\u00e1vod na to, jak p\u0159idat dal\u0161\u00ed n\u00e1hledov\u00e9 obr\u00e1zky, tak aby nebyl pouze jeden. Jako p\u0159\u00edklad uvedu \u0161ablonu od Themes4all.com <a href=\"http:\/\/easyblog.themes4all.com\/\" target=\"_blank\" rel=\"noopener\">Easyblog<\/a>, kde jsou multiple thumbnails pou\u017eity pro efekt n\u011bkolika obr\u00e1zk\u016f ve v\u00fdpisu \u010dl\u00e1nk\u016f.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Post thumbnails, featured images, nebo \u010desky &#8211; n\u00e1hledov\u00e9 obr\u00e1zky, je vylep\u0161en\u00ed, kter\u00e9 je ve WordPressu od verze 2.9 a za tu dobu se u\u017e stalo b\u011b\u017enou sou\u010d\u00e1st\u00ed \u0161ablon, p\u0159edev\u0161\u00edm u magaz\u00edn\u016f, kter\u00e9 obsahuj\u00ed n\u00e1hled u ka\u017ed\u00e9ho \u010dl\u00e1nku . V dne\u0161n\u00edm n\u00e1vodu si uk\u00e1\u017eeme, jak n\u00e1hledov\u00e9 obr\u00e1zky do \u0161ablony p\u0159idat a jak je upravovat.<\/p>\n","protected":false},"author":1,"featured_media":8624,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,30],"tags":[246,384],"class_list":["post-587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-navody","category-wordpress","tag-nahledove-obrazky","tag-thumbnails-wordpress"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/587"}],"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=587"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/587\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/8624"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}