{"id":229581,"date":"2022-11-15T16:18:00","date_gmt":"2022-11-15T13:18:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229581"},"modified":"2022-11-15T16:18:17","modified_gmt":"2022-11-15T13:18:17","slug":"mas-informacion-sobre-por-que-son-utiles-los-atributos-de-imagen-personalizados","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/mas-informacion-sobre-por-que-son-utiles-los-atributos-de-imagen-personalizados\/","title":{"rendered":"M\u00e1s informaci\u00f3n sobre por qu\u00e9 son \u00fatiles los atributos de imagen personalizados"},"content":{"rendered":"<h2>Por qu\u00e9 son \u00fatiles los atributos de imagen personalizados<\/h2>\n<p>Cada vez que agrega atributos personalizados a las im\u00e1genes (y normalmente pienso en estos como cosas como <strong>tipo de datos = &quot;acme&quot;,<\/strong> pero en realidad podr\u00edan ser cualquier cosa como atributos de clase, ID, etc. aunque hay otros filtros para ciertas cosas).<\/p>\n<p>Acceder a im\u00e1genes a trav\u00e9s de atributos de imagen personalizados. Acceder a im\u00e1genes a trav\u00e9s de atributos de imagen personalizados.<\/p>\n<p>De todos modos, agregar atributos de imagen personalizados puede agregar una multitud de habilidades que normalmente no tenemos. Adem\u00e1s de simplemente facilitar el estilo de las im\u00e1genes, tambi\u00e9n nos permite usarlas para acceder a las im\u00e1genes en una variedad de formas diferentes.<\/p>\n<p>Es decir, podemos acceder a ellos usando:<\/p>\n<ul>\n<li>selectores de CSS,<\/li>\n<li>JavaScript,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>Y cuando tiene acceso a im\u00e1genes fuera de los atributos est\u00e1ndar de WordPress, puede hacer m\u00e1s con ellas. <a href=\"https:\/\/wordpress.mediadoma.com\/es\/cuando-es-util-la-funcion-de-clonacion-de-jquery\/\" title=\"Caso en cuesti\u00f3n\">Caso en cuesti\u00f3n<\/a>. En resumen, puedes hacer cosas como:<\/p>\n<ol>\n<li>acceder a una imagen,<\/li>\n<li>configurar controladores de eventos,<\/li>\n<li>a\u00f1adir elementos al DOM,<\/li>\n<li>configurar controladores de eventos personalizados.<\/li>\n<\/ol>\n<p>Pero eso no es todo. Este es solo un ejemplo.<\/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>En \u00faltima instancia, una de las ideas principales detr\u00e1s de poder agregar atributos de imagen personalizados a las im\u00e1genes de WordPress es que nos brinda m\u00e1s control sobre c\u00f3mo podemos acceder a nuestras im\u00e1genes, trabajar con ellas, sus antepasados, descendientes y m\u00e1s.<\/p>\n<p>Pero la forma en que use esto probablemente ser\u00e1 diferente de c\u00f3mo usted o cualquier otra persona los usar\u00e1. Y dicho esto, espero que esto responda por qu\u00e9 esto puede ser \u00fatil.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <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 intentar agregar atributos de imagen personalizados a las im\u00e1genes de WordPress, vale la pena entender por qu\u00e9 queremos hacerlo en primer 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":[892,716,914,840,861],"tags":[1172],"class_list":["post-229581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-otro","category-tutoriales","category-wordpress-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=229581"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/229581\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/165579"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=229581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=229581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=229581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}