{"id":229210,"date":"2022-11-15T16:40:00","date_gmt":"2022-11-15T13:40:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=229210"},"modified":"2022-11-15T16:53:17","modified_gmt":"2022-11-15T13:53:17","slug":"mer-om-varfoer-anpassade-bildattribut-aer-anvaendbara","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/sv\/mer-om-varfoer-anpassade-bildattribut-aer-anvaendbara\/","title":{"rendered":"Mer om varf\u00f6r anpassade bildattribut \u00e4r anv\u00e4ndbara"},"content":{"rendered":"<h2>Varf\u00f6r anpassade bildattribut \u00e4r anv\u00e4ndbara<\/h2>\n<p>N\u00e4r du l\u00e4gger till anpassade attribut till bilder (och jag t\u00e4nker vanligtvis p\u00e5 dessa som saker som <strong>data-type = &quot;acme&quot;,<\/strong> men de kan verkligen vara n\u00e5got som klassattribut, ID, etc. \u00e4ven om det finns andra filter f\u00f6r vissa saker).<\/p>\n<p>\u00c5tkomst till bilder via anpassade bildattribut. \u00c5tkomst till bilder via anpassade bildattribut.<\/p>\n<p>Hur som helst, att l\u00e4gga till anpassade bildattribut kan l\u00e4gga till en m\u00e4ngd f\u00f6rm\u00e5gor som vi normalt inte har. F\u00f6rutom att helt enkelt g\u00f6ra det enklare att styla bilder, g\u00f6r det det ocks\u00e5 m\u00f6jligt f\u00f6r oss att anv\u00e4nda dem f\u00f6r att komma \u00e5t bilder p\u00e5 en m\u00e4ngd olika s\u00e4tt.<\/p>\n<p>Det vill s\u00e4ga, vi kan komma \u00e5t dem med:<\/p>\n<ul>\n<li>CSS-v\u00e4ljare,<\/li>\n<li>JavaScript,<\/li>\n<li>etc.<\/li>\n<\/ul>\n<p>Och n\u00e4r du har tillg\u00e5ng till bilder utanf\u00f6r de vanliga WordPress-attributen kan du g\u00f6ra mer med dem. <a href=\"https:\/\/wordpress.mediadoma.com\/sv\/naer-aer-jquerys-klonfunktion-anvaendbar\/\" title=\"Fall i punkt\">Fall i punkt<\/a>. Kort sagt, du kan g\u00f6ra saker som:<\/p>\n<ol>\n<li>komma \u00e5t en bild,<\/li>\n<li>konfigurera h\u00e4ndelsehanterare,<\/li>\n<li>l\u00e4gg till element till DOM,<\/li>\n<li>st\u00e4ll in anpassade h\u00e4ndelsehanterare.<\/li>\n<\/ol>\n<p>Men det \u00e4r inte allt. Detta \u00e4r bara ett exempel.<\/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>I slut\u00e4ndan \u00e4r en av de prim\u00e4ra id\u00e9erna bakom att kunna l\u00e4gga till anpassade bildattribut till WordPress-bilder att det ger oss mer kontroll \u00f6ver hur vi kan komma \u00e5t v\u00e5ra bilder, arbeta med dem, deras f\u00f6rf\u00e4der, \u00e4ttlingar och mer.<\/p>\n<p>Men hur jag anv\u00e4nder detta kommer sannolikt att vara annorlunda \u00e4n hur du eller n\u00e5gon annan kommer att anv\u00e4nda dem. Och med det sagt hoppas jag att detta svarar p\u00e5 varf\u00f6r detta kan vara anv\u00e4ndbart.<\/p>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Inspelningsk\u00e4lla:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/tommcfarlin.com\" class=\"external external_icon\">tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Innan du f\u00f6rs\u00f6ker l\u00e4gga till anpassade bildattribut till WordPress-bilder \u00e4r det v\u00e4rt att f\u00f6rst\u00e5 varf\u00f6r vi kanske vill g\u00f6ra det i f\u00f6rsta hand.<\/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":[848,901,922,724,868],"tags":[1173],"class_list":["post-229210","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-handledningar","category-koda","category-oevrig","category-utvecklaren","category-wordpress-9","tag-affiai-sv"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229210","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/comments?post=229210"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/posts\/229210\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media\/165579"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/media?parent=229210"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/categories?post=229210"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/sv\/wp-json\/wp\/v2\/tags?post=229210"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}