{"id":229989,"date":"2022-11-15T16:49:00","date_gmt":"2022-11-15T13:49:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229989"},"modified":"2022-11-15T16:53:20","modified_gmt":"2022-11-15T13:53:20","slug":"mais-sobre-por-que-os-atributos-de-imagem-personalizados-sao-uteis","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/pt-pt\/mais-sobre-por-que-os-atributos-de-imagem-personalizados-sao-uteis\/","title":{"rendered":"Mais sobre por que os atributos de imagem personalizados s\u00e3o \u00fateis"},"content":{"rendered":"<h2>Por que os atributos de imagem personalizados s\u00e3o \u00fateis<\/h2>\n<p>Sempre que voc\u00ea adiciona atributos personalizados a imagens (e eu normalmente penso nisso como coisas como <strong>data-type=&quot;acme&#8221;,<\/strong> mas eles realmente podem ser qualquer coisa como atributos de classe, IDs, etc., embora existam outros filtros para certas coisas).<\/p>\n<p>Acessando imagens por meio de atributos de imagem personalizados.Acessando imagens por meio de atributos de imagem personalizados.<\/p>\n<p>De qualquer forma, adicionar atributos de imagem personalizados pode adicionar uma infinidade de habilidades que normalmente n\u00e3o temos. Al\u00e9m de simplesmente facilitar o estilo de imagens, tamb\u00e9m nos permite us\u00e1-las para acessar imagens de v\u00e1rias maneiras diferentes.<\/p>\n<p>Ou seja, podemos acess\u00e1-los usando:<\/p>\n<ul>\n<li>Seletores CSS,<\/li>\n<li>JavaScript,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>E quando voc\u00ea tem acesso a imagens fora dos atributos padr\u00e3o do WordPress, voc\u00ea pode fazer mais com elas. <a href=\"https:\/\/wordpress.mediadoma.com\/pt-pt\/quando-a-funcao-clone-do-jquery-e-util\/\" title=\"Caso em quest\u00e3o\">Caso em quest\u00e3o<\/a>. Resumindo, voc\u00ea pode fazer coisas como:<\/p>\n<ol>\n<li>acessar uma imagem,<\/li>\n<li>configurar manipuladores de eventos,<\/li>\n<li>adicionar elementos ao DOM,<\/li>\n<li>configurar manipuladores de eventos personalizados.<\/li>\n<\/ol>\n<p>Mas isso n\u00e3o \u00e9 tudo. Este \u00e9 apenas um exemplo.<\/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>Em \u00faltima an\u00e1lise, uma das principais ideias por tr\u00e1s de poder adicionar atributos de imagem personalizados \u00e0s imagens do WordPress \u00e9 que isso nos d\u00e1 mais controle sobre como podemos acessar nossas imagens, trabalhar com elas, seus ancestrais, descendentes e muito mais.<\/p>\n<p>Mas como eu uso isso provavelmente ser\u00e1 diferente de como voc\u00ea ou qualquer outra pessoa os usar\u00e1. E com isso dito, espero que isso responda por que isso pode ser \u00fatil.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fonte de grava\u00e7\u00e3o:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Antes de tentar adicionar atributos de imagem personalizados \u00e0s imagens do WordPress, vale a pena entender por que podemos querer faz\u00ea-lo em primeiro lugar.<\/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":[898,722,920,846,867],"tags":[1170],"class_list":["post-229989","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo-2","category-desenvolvedor","category-outro","category-tutoriais","category-wordpress-8","tag-affiai-pt-pt"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/comments?post=229989"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/posts\/229989\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media\/165579"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/media?parent=229989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/categories?post=229989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/pt-pt\/wp-json\/wp\/v2\/tags?post=229989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}