Как добавить атрибут "данные" в тег изображения для вывода собственной галереи

Question

Как добавить атрибут "данные" в тег изображения для вывода собственной галереи

Пытаясь сделать WordPress и галерею друзьями, у меня уже есть хороший результат. Галерею можно легко использовать для отображения собственных галерей WordPress. Я использую плагин, но это совсем не обязательно. Одна вещь, которая уже заставила меня выдернуть волосы: то, чего мне не хватает, - это метод добавления атрибута data-big к свойствам изображений миниатюр галерей, поскольку это заставит Galleria использовать "полное" изображение в полноэкранном режиме режим. В HTML это выглядело бы так

<div class="galleria">
    <a href="/img/large1.jpg"><img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description"></a>
    <a href="/img/large2.jpg"><img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My description"></a>
</div>

Где галерея будет использовать <img> для отображения миниатюры и <a href ...> для обычного изображения. Это работает как заклинание и почти из коробки. Но я не нашел решения, как

добавьте атрибут data-big к <img>
передайте размер изображения WP (например, "полный") с этим аргументом

Есть ли кто-нибудь, кто мог бы указать мне правильное направление или привести пример, как это сделать. Отказ от ответственности: У меня есть некоторый опыт работы с WP-фильтрами и крючками, но я далек от того, чтобы быть экспертом по PHP.

Заранее благодарю.

Редактировать: Чтобы быть немного более конкретным: значение "data-big" уже доступно (изображение большого/полноразмерного размера), поэтому в основном я хотел бы добавить новый атрибут в тег и передать URL-адрес полноразмерного изображения.

3

javascript customization gallery images

Author: eventcom, 2014-08-21

Source

1 answers

score 1 · Accepted Answer

В зависимости от того, как ваш плагин Galleria взаимодействует с фильтрами изображений вложений, вы должны иметь возможность вводить свой атрибут данных с помощью фильтра wp_get_attachment_image_attributes.

Очевидно, что атрибут будет добавлен для всего, что использует wp_get_attachment_image(), но он будет делать то, что вы просите.

/**
 * Filter attributes for the current gallery image tag.
 *
 * @param array   $atts       Gallery image tag attributes.
 * @param WP_Post $attachment WP_Post object for the attachment.
 * @return array (maybe) filtered gallery image tag attributes.
 */
function wpdocs_filter_gallery_img_atts( $atts, $attachment ) {
    if ( $full_size = wp_get_attachment_image_src( $attachment->ID, 'full' ) ) {
        if ( ! empty( $full_size[0] ) ) {
            $atts['data-big'] = $full_size[0];
        }
    }
    return $atts;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpdocs_filter_gallery_img_atts', 10, 2 );

, который выводит следующую разметку для галереи, используя стандартные настройки:

<div class="gallery galleryid-2160 gallery-columns-3 gallery-size-thumbnail" id="gallery-1">
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image1.png"><img width="150" height="150" data-big="http://...image1.png" alt="" class="attachment-thumbnail" src="http://...image1-150x150.png"></a>
        </div>
    </figure>
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image2.png"><img width="150" height="150" data-big="http://...image2.png" alt="" class="attachment-thumbnail" src="http://...image2-150x150.png"></a>
        </div>
    </figure>
    <figure class="gallery-item">
        <div class="gallery-icon landscape">
            <a href="http://...image3.png"><img width="150" height="150" data-big="http://...image3.png" alt="" class="attachment-thumbnail" src="http://...image3-150x150.png"></a>
        </div>
    </figure>
</div>