{"id":229997,"date":"2022-11-15T16:47:00","date_gmt":"2022-11-15T13:47:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229997"},"modified":"2022-11-15T16:47:34","modified_gmt":"2022-11-15T13:47:34","slug":"lisaetietoja-siitae-miksi-mukautetut-kuvan-attribuutit-ovat-hyoedyllisiae","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/lisaetietoja-siitae-miksi-mukautetut-kuvan-attribuutit-ovat-hyoedyllisiae\/","title":{"rendered":"Lis\u00e4tietoja siit\u00e4, miksi mukautetut kuvan attribuutit ovat hy\u00f6dyllisi\u00e4"},"content":{"rendered":"<h2>Miksi mukautetut kuvan attribuutit ovat hy\u00f6dyllisi\u00e4<\/h2>\n<p>Aina kun lis\u00e4\u00e4t kuviin mukautettuja attribuutteja (ja ajattelen n\u00e4it\u00e4 yleens\u00e4 esimerkiksi <strong>data-type=&quot;acme&#8221;,<\/strong> mutta ne voivat todella olla mit\u00e4 tahansa luokkaattribuutteja, tunnuksia jne., vaikka tietyille asioille on olemassa muita suodattimia).<\/p>\n<p>Kuvien k\u00e4ytt\u00f6 mukautettujen kuvaattribuuttien avulla. Kuvien k\u00e4ytt\u00f6 mukautettujen kuvaattribuuttien avulla.<\/p>\n<p>Joka tapauksessa mukautettujen kuvaattribuuttien lis\u00e4\u00e4minen voi lis\u00e4t\u00e4 monia kykyj\u00e4, joita meill\u00e4 ei normaalisti ole. Sen lis\u00e4ksi, ett\u00e4 kuvien muotoilu on helpompaa, se mahdollistaa my\u00f6s sen, ett\u00e4 voimme k\u00e4ytt\u00e4\u00e4 niit\u00e4 kuvien k\u00e4sittelyyn useilla eri tavoilla.<\/p>\n<p>Eli voimme k\u00e4ytt\u00e4\u00e4 niit\u00e4 k\u00e4ytt\u00e4m\u00e4ll\u00e4:<\/p>\n<ul>\n<li>CSS-valitsimet,<\/li>\n<li>JavaScript,<\/li>\n<li>jne.<\/li>\n<\/ul>\n<p>Ja kun sinulla on p\u00e4\u00e4sy kuviin, jotka eiv\u00e4t kuulu WordPressin vakiom\u00e4\u00e4ritteisiin, voit tehd\u00e4 niill\u00e4 enemm\u00e4n. <a href=\"https:\/\/wordpress.mediadoma.com\/fi\/milloin-jqueryn-kloonitoiminto-on-hyoedyllinen\/\" title=\"Kohtalainen tapaus\">Kohtalainen tapaus<\/a>. Lyhyesti sanottuna voit tehd\u00e4 asioita, kuten:<\/p>\n<ol>\n<li>p\u00e4\u00e4st\u00e4 kuvaan,<\/li>\n<li>aseta tapahtumak\u00e4sittelij\u00e4t,<\/li>\n<li>lis\u00e4\u00e4 elementtej\u00e4 DOM:iin,<\/li>\n<li>m\u00e4\u00e4rit\u00e4 mukautettuja tapahtumak\u00e4sittelij\u00f6it\u00e4.<\/li>\n<\/ol>\n<p>Mutta siin\u00e4 ei viel\u00e4 kaikki. T\u00e4m\u00e4 on vain yksi esimerkki.<\/p>\n<pre><code>&lt;?php\n\nprivate function addImageAttributes($content)\n{\n\n  $content  = mb_convert_encoding($content, 'HTML-ENTITIES', \"UTF-8\");\n  $document = new DOMDocument();\n\n  libxml_use_internal_errors(true);\n  $document-&gt;loadHTML(utf8_decode($content));\n\n  $images = $document-&gt;getElementsByTagName('img');\n  foreach ($images as $image) {\n      $image-&gt;setAttribute('data-example', 'true');\n  }\n\n  return $document-&gt;saveHTML();\n}<\/code><\/pre>\n<p>Loppujen lopuksi yksi t\u00e4rkeimmist\u00e4 ideoista mukautettujen kuvaattribuuttien lis\u00e4\u00e4misess\u00e4 WordPress-kuviin on, ett\u00e4 se antaa meille enemm\u00e4n hallintaa siihen, kuinka voimme k\u00e4ytt\u00e4\u00e4 kuviamme, ty\u00f6skennell\u00e4 niiden, heid\u00e4n esi-isiens\u00e4, j\u00e4lkel\u00e4isten ja muiden kanssa.<\/p>\n<p>Mutta miten k\u00e4yt\u00e4n t\u00e4t\u00e4, on todenn\u00e4k\u00f6isesti erilainen kuin se, miten sin\u00e4 tai joku muu k\u00e4yt\u00e4t niit\u00e4. Ja t\u00e4m\u00e4n sanottuani toivon, ett\u00e4 t\u00e4m\u00e4 vastaa siihen, miksi t\u00e4st\u00e4 voi olla hy\u00f6ty\u00e4.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ennen kuin yrit\u00e4t lis\u00e4t\u00e4 mukautettuja kuvam\u00e4\u00e4ritteit\u00e4 WordPress-kuviin, on syyt\u00e4 ymm\u00e4rt\u00e4\u00e4, miksi saatamme haluta tehd\u00e4 niin.<\/p>\n","protected":false},"author":1,"featured_media":165579,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[719,895,917,843,864],"tags":[1166],"class_list":["post-229997","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kehittaejae","category-koodi","category-muut","category-opetusohjelmia","category-wordpress-5","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229997","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/comments?post=229997"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/posts\/229997\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media\/165579"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/media?parent=229997"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/categories?post=229997"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fi\/wp-json\/wp\/v2\/tags?post=229997"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}