Докладніше про те, чому корисні власні атрибути зображення

Останнє оновлення Лис 15, 2022

Чому користувацькі атрибути зображення корисні

Кожного разу, коли ви додаєте власні атрибути до зображень (і я зазвичай думаю про них як про такі речі, як data-type="acme, “, але насправді це можуть бути будь-які атрибути класу, ідентифікатори тощо, хоча для певних речей існують інші фільтри).

Доступ до зображень через настроювані атрибути зображення. Доступ до зображень через настроювані атрибути зображення.

У будь-якому випадку додавання власних атрибутів зображення може додати безліч можливостей, яких ми зазвичай не маємо. Крім простого полегшення стилізації зображень, це також дає нам можливість використовувати їх для доступу до зображень різними способами.

Тобто ми можемо отримати до них доступ за допомогою:

селектори CSS,
JavaScript,
тощо

А коли у вас є доступ до зображень за межами стандартних атрибутів WordPress, ви можете робити з ними більше. Показовий випадок. Коротше кажучи, ви можете робити такі речі, як:

доступ до зображення,
налаштування обробників подій,
додати елементи до DOM,
налаштувати спеціальні обробники подій.

Але це ще не все. Це лише один приклад.

<?php

private function addImageAttributes($content)
{

  $content  = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
  $document = new DOMDocument();

  libxml_use_internal_errors(true);
  $document->loadHTML(utf8_decode($content));

  $images = $document->getElementsByTagName('img');
  foreach ($images as $image) {
      $image->setAttribute('data-example', 'true');
  }

  return $document->saveHTML();
}

Зрештою, одна з основних ідей можливості додавати власні атрибути зображень до зображень WordPress полягає в тому, що це дає нам більше контролю над тим, як ми можемо отримати доступ до наших зображень, працювати з ними, їхніми предками, нащадками тощо.

Але те, як я використовую це, швидше за все, буде відрізнятися від того, як ви чи хтось інший використовуватимете їх. З огляду на це, я сподіваюся, що це відповість, чому це може бути корисним.

Джерело запису: tommcfarlin.com