{"id":2588,"date":"2015-11-14T19:35:55","date_gmt":"2015-11-14T19:35:55","guid":{"rendered":"http:\/\/musilda.cz\/?p=2588"},"modified":"2015-11-14T19:35:55","modified_gmt":"2015-11-14T19:35:55","slug":"responzivni-obrazky-ve-wordpress-4-4","status":"publish","type":"post","link":"https:\/\/affinite.io\/cs\/responzivni-obrazky-ve-wordpress-4-4\/","title":{"rendered":"Responzivn\u00ed obr\u00e1zky ve WordPress 4.4"},"content":{"rendered":"<p>V nov\u00e9m WordPressu 4.4, bude p\u0159id\u00e1na nativn\u00ed podpora responsivn\u00edch obr\u00e1zk\u016f, pomoc\u00ed atribut\u016f srcset a sizes. Jak p\u0159esn\u011b to bude fungovat?<\/p>\n<p>P\u0159i ka\u017ed\u00e9m nahr\u00e1n\u00ed obr\u00e1zku do m\u00e9di\u00ed, vytv\u00e1\u0159\u00ed WordPress sadu obr\u00e1zk\u016f o r\u016fzn\u00fdch rozm\u011brech. D\u00edky vlo\u017een\u00ed dostupn\u00fdch velikost\u00ed do atributu srcset, mohou si prohl\u00ed\u017ee\u010d zvolit nejvhodn\u011bj\u0161\u00ed velikost obr\u00e1zku, kter\u00fd budou stahovat a d\u00edky tomu se rychlost na\u010d\u00edt\u00e1n\u00ed str\u00e1nky velmi zrychl\u00ed.<\/p>\n<p>Aby si mohl prohl\u00ed\u017ee\u010d l\u00e9pe vybrat vhodn\u00fd obr\u00e1zek, bude vkl\u00e1d\u00e1n &#8222;sizes&#8220; atribut, kter\u00fd je ekvivalent k &#8222;(max-width: {{image-width}}px) 100vw, {{image-width}}px&#8220;. P\u0159esto\u017ee by tento postup m\u011bl fungovat ve v\u011bt\u0161in\u011b prohl\u00ed\u017ee\u010d\u016f, \u0161ablona m\u00e1 mo\u017enost upravovat v\u00fdchoz\u00ed sizes atribut, pomoc\u00ed &#8222;wp_calculate_image_sizes&#8220; filtru.<\/p>\n<h2>Nov\u00e9 funkce a hooky<\/h2>\n<ul>\n<li><code>wp_get_attachment_image_srcset()<\/code>\u00a0\u2013 vrac\u00ed hodnotu\u00a0<code>srcset<\/code>\u00a0atributu pro obr\u00e1zek.<\/li>\n<li><code>wp_calculate_image_srcset()<\/code> \u2013 pomocn\u00e1 funkce pro vytvo\u0159en\u00ed atributu srcset.<\/li>\n<li><code>wp_get_attachment_image_sizes()<\/code>\u00a0\u2013 vrac\u00ed hodnotu sizes atributu pro obr\u00e1zek.<\/li>\n<li><code>wp_calculate_image_sizes()<\/code> \u2013 pomocn\u00e1 funkce pro vytvo\u0159en\u00ed atributu sizes.<\/li>\n<li><code>wp_make_content_images_responsive()<\/code>\u00a0\u2013\u00a0filter, pomoc\u00ed kter\u00e9ho m\u016f\u017eete ovlivnit p\u0159id\u00e1n\u00ed sizes a srcset pro obr\u00e1zky v obsahu.<\/li>\n<li><code>wp_image_add_srcset_and_sizes()<\/code>\u00a0\u2013p\u0159id\u00e1 atributy szes a srcset pro ji\u017e existuj\u00edc\u00ed obr\u00e1zky.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>P\u0159\u00edklad pou\u017e\u00edt\u00ed<\/h2>\n<pre lang=\"php\">\n\n&lt;img src=&quot;\"\n     srcset=\"\"\n     sizes=\"(max-width: 50em) 87vw, 680px\" alt=\"Opr\u00e1sek\"&gt;\n<\/pre>\n<p>&nbsp;<\/p>\n<p>Pokud se chcete dozv\u011bd\u011bt o pou\u017eit\u00ed atribut\u016f srcset a sizes, doporu\u010duji web <a href=\"http:\/\/www.vzhurudolu.cz\/prirucka\/srcset-sizes\" target=\"_blank\" rel=\"noopener\">Vzh\u016fru dol\u016f.cz<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>V nov\u00e9m WordPressu 4.4, bude p\u0159id\u00e1na nativn\u00ed podpora responsivn\u00edch obr\u00e1zk\u016f, pomoc\u00ed atribut\u016f srcset a sizes. Jak p\u0159esn\u011b to bude fungovat? P\u0159i ka\u017ed\u00e9m nahr\u00e1n\u00ed obr\u00e1zku do m\u00e9di\u00ed, vytv\u00e1\u0159\u00ed WordPress sadu obr\u00e1zk\u016f o r\u016fzn\u00fdch rozm\u011brech. D\u00edky vlo\u017een\u00ed dostupn\u00fdch velikost\u00ed do atributu srcset, mohou si prohl\u00ed\u017ee\u010d zvolit nejvhodn\u011bj\u0161\u00ed velikost obr\u00e1zku, kter\u00fd budou stahovat a d\u00edky tomu se rychlost<\/p>\n","protected":false},"author":1,"featured_media":2590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[328],"class_list":["post-2588","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nezarazene","tag-responzivni-obrazky"],"_links":{"self":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2588"}],"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=2588"}],"version-history":[{"count":0,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/posts\/2588\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media\/2590"}],"wp:attachment":[{"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/media?parent=2588"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/categories?post=2588"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/affinite.io\/cs\/wp-json\/wp\/v2\/tags?post=2588"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}