Хук wp_get_attachment_image - WordPres Коды и Элементы

Содержание

Описание хука
Примеры использования
Изменение размера изображения
Добавление класса к изображению
Установка атрибута alt
Изменение значения атрибута srcset
Установка значения атрибута sizes
Вопросы и ответы
Как изменить размер изображения, возвращаемого хуком wp_get_attachment_image?
Как добавить класс CSS к изображению, возвращаемому хуком wp_get_attachment_image?
Как изменить атрибут alt изображения, возвращаемого хуком wp_get_attachment_image?
Как изменить атрибут srcset изображения, возвращаемого хуком wp_get_attachment_image?
Как изменить атрибут sizes изображения, возвращаемого хуком wp_get_attachment_image?
Как изменить атрибут loading изображения, возвращаемого хуком wp_get_attachment_image?
Как изменить атрибут decoding изображения, возвращаемого хуком wp_get_attachment_image?
Связанные элементы

Описание хука

Хук wp_get_attachment_image позволяет изменить HTML-элемент img, представляющий изображение вложения. Он вызывается внутри функции wp_get_attachment_image() и предоставляет возможность изменить разметку изображения.

Использование

apply_filters( 'wp_get_attachment_image', string $html, int $attachment_id, string|int[] $size, bool $icon, string[] $attr )

Этот хук принимает следующие параметры:

$html (строка) — HTML-элемент img или пустая строка в случае ошибки.
$attachment_id (целое число) — идентификатор вложения изображения.
$size (строка или массив) — запрошенный размер изображения. Может быть именем зарегистрированного размера изображения или массивом значений ширины и высоты в пикселях (в указанном порядке).
$icon (логическое значение) — определяет, должно ли изображение быть обработано как иконка.
$attr (массив строк) — массив значений атрибутов для разметки изображения, сгруппированных по имени атрибута.

<?php
/**
 * Изменяет разметку изображения вложения.
 *
 * @param string   $html           HTML-элемент img.
 * @param int      $attachment_id  Идентификатор вложения изображения.
 * @param string[] $size           Запрошенный размер изображения.
 * @param bool     $icon           Определяет, должно ли изображение быть обработано как иконка.
 * @param string[] $attr           Массив значений атрибутов для разметки изображения.
 * @return string                  Измененный HTML-элемент img.
 */
function custom_get_attachment_image( $html, $attachment_id, $size, $icon, $attr ) {
    // Ваш код для изменения разметки изображения
    return $html;
}
add_filter( 'wp_get_attachment_image', 'custom_get_attachment_image', 10, 5 );
?>

В приведенном выше примере кода создается пользовательская функция custom_get_attachment_image(), которая принимает параметры хука wp_get_attachment_image. Внутри этой функции вы можете изменить разметку изображения по своему усмотрению. Затем функция возвращается измененный HTML-элемент img. Наконец, с помощью функции add_filter() хук wp_get_attachment_image привязывается к пользовательской функции с приоритетом 10 и количеством аргументов 5.

Примеры использования

Изменение размера изображения


/**
 * Filters the HTML img element representing an image attachment.
 *
 * @param string $html          HTML img element or empty string on failure.
 * @param int    $attachment_id Image attachment ID.
 * @param string|int[] $size    Requested image size.
 * @param bool   $icon          Whether the image should be treated as an icon.
 * @param string[] $attr        Array of attribute values for the image markup, keyed by attribute name.
 * @return string               Filtered HTML img element.
 */
function custom_get_attachment_image( $html, $attachment_id, $size, $icon, $attr ) {
    // Modify the image size to 'thumbnail'
    $size = 'thumbnail';
    // Return the modified HTML img element
    return $html;
}
add_filter( 'wp_get_attachment_image', 'custom_get_attachment_image', 10, 5 );

Добавление класса к изображению


/**
 * Filters the HTML img element representing an image attachment.
 *
 * @param string $html          HTML img element or empty string on failure.
 * @param int    $attachment_id Image attachment ID.
 * @param string|int[] $size    Requested image size.
 * @param bool   $icon          Whether the image should be treated as an icon.
 * @param string[] $attr        Array of attribute values for the image markup, keyed by attribute name.
 * @return string               Filtered HTML img element.
 */
function custom_get_attachment_image( $html, $attachment_id, $size, $icon, $attr ) {
    // Add a custom class to the image
    $attr['class'] .= ' custom-class';
    // Return the modified HTML img element
    return $html;
}
add_filter( 'wp_get_attachment_image', 'custom_get_attachment_image', 10, 5 );

Установка атрибута alt


/**
 * Filters the HTML img element representing an image attachment.
 *
 * @param string $html          HTML img element or empty string on failure.
 * @param int    $attachment_id Image attachment ID.
 * @param string|int[] $size    Requested image size.
 * @param bool   $icon          Whether the image should be treated as an icon.
 * @param string[] $attr        Array of attribute values for the image markup, keyed by attribute name.
 * @return string               Filtered HTML img element.
 */
function custom_get_attachment_image( $html, $attachment_id, $size, $icon, $attr ) {
    // Set a custom alt attribute
    $attr['alt'] = 'Custom alt text';
    // Return the modified HTML img element
    return $html;
}
add_filter( 'wp_get_attachment_image', 'custom_get_attachment_image', 10, 5 );

Изменение значения атрибута srcset


/**
 * Filters the HTML img element representing an image attachment.
 *
 * @param string $html          HTML img element or empty string on failure.
 * @param int    $attachment_id Image attachment ID.
 * @param string|int[] $size    Requested image size.
 * @param bool   $icon          Whether the image should be treated as an icon.
 * @param string[] $attr        Array of attribute values for the image markup, keyed by attribute name.
 * @return string               Filtered HTML img element.
 */
function custom_get_attachment_image( $html, $attachment_id, $size, $icon, $attr ) {
    // Modify the srcset attribute
    $attr['srcset'] = 'custom-srcset';
    // Return the modified HTML img element
    return $html;
}
add_filter( 'wp_get_attachment_image', 'custom_get_attachment_image', 10, 5 );

Установка значения атрибута sizes


/**
 * Filters the HTML img element representing an image attachment.
 *
 * @param string $html          HTML img element or empty string on failure.
 * @param int    $attachment_id Image attachment ID.
 * @param string|int[] $size    Requested image size.
 * @param bool   $icon          Whether the image should be treated as an icon.
 * @param string[] $attr        Array of attribute values for the image markup, keyed by attribute name.
 * @return string               Filtered HTML img element.
 */
function custom_get_attachment_image( $html, $attachment_id, $size, $icon, $attr ) {
    // Set a custom sizes attribute
    $attr['sizes'] = 'custom-sizes';
    // Return the modified HTML img element
    return $html;
}
add_filter( 'wp_get_attachment_image', 'custom_get_attachment_image', 10, 5 );

Вопросы и ответы

Как изменить размер изображения, возвращаемого хуком wp_get_attachment_image?

Для изменения размера изображения, возвращаемого хуком wp_get_attachment_image, необходимо указать требуемый размер в параметре $size. Размер может быть задан либо в виде зарегистрированного имени размера изображения, либо в виде массива значений ширины и высоты в пикселях (в таком порядке).


$size = 'thumbnail'; // Зарегистрированное имя размера изображения
$html = wp_get_attachment_image( $attachment_id, $size );


$size = array( 300, 200 ); // Массив значений ширины и высоты в пикселях
$html = wp_get_attachment_image( $attachment_id, $size );

Как добавить класс CSS к изображению, возвращаемому хуком wp_get_attachment_image?

Для добавления класса CSS к изображению, возвращаемому хуком wp_get_attachment_image, необходимо указать требуемый класс в параметре $attr[‘class’].


$attr = array(
    'class' => 'my-custom-class' // Класс CSS
);
$html = wp_get_attachment_image( $attachment_id, $size, false, $attr );

Как изменить атрибут alt изображения, возвращаемого хуком wp_get_attachment_image?

Для изменения атрибута alt изображения, возвращаемого хуком wp_get_attachment_image, необходимо указать требуемое описание в параметре $attr[‘alt’].


$attr = array(
    'alt' => 'Custom alt text' // Описание для атрибута alt
);
$html = wp_get_attachment_image( $attachment_id, $size, false, $attr );

Как изменить атрибут srcset изображения, возвращаемого хуком wp_get_attachment_image?

Для изменения атрибута srcset изображения, возвращаемого хуком wp_get_attachment_image, можно использовать фильтр ‘wp_get_attachment_image_srcset’. Этот фильтр позволяет изменить значение атрибута srcset перед его выводом.

// Пример использования фильтра 'wp_get_attachment_image_srcset'
add_filter( 'wp_get_attachment_image_srcset', 'custom_attachment_image_srcset', 10, 4 );
function custom_attachment_image_srcset( $sources, $size_array, $image_src, $image_meta ) {
    // Ваш код для изменения атрибута srcset
    return $sources;
}

Как изменить атрибут sizes изображения, возвращаемого хуком wp_get_attachment_image?

Для изменения атрибута sizes изображения, возвращаемого хуком wp_get_attachment_image, можно использовать фильтр ‘wp_get_attachment_image_sizes’. Этот фильтр позволяет изменить значение атрибута sizes перед его выводом.

// Пример использования фильтра 'wp_get_attachment_image_sizes'
add_filter( 'wp_get_attachment_image_sizes', 'custom_attachment_image_sizes', 10, 2 );
function custom_attachment_image_sizes( $sizes, $size_array ) {
    // Ваш код для изменения атрибута sizes
    return $sizes;
}

Как изменить атрибут loading изображения, возвращаемого хуком wp_get_attachment_image?

Для изменения атрибута loading изображения, возвращаемого хуком wp_get_attachment_image, можно использовать фильтр ‘wp_get_attachment_image_loading’. Этот фильтр позволяет изменить значение атрибута loading перед его выводом.

// Пример использования фильтра 'wp_get_attachment_image_loading'
add_filter( 'wp_get_attachment_image_loading', 'custom_attachment_image_loading', 10, 2 );
function custom_attachment_image_loading( $loading, $attachment_id ) {
    // Ваш код для изменения атрибута loading
    return $loading;
}

Как изменить атрибут decoding изображения, возвращаемого хуком wp_get_attachment_image?

Для изменения атрибута decoding изображения, возвращаемого хуком wp_get_attachment_image, можно использовать фильтр ‘wp_get_attachment_image_decoding’. Этот фильтр позволяет изменить значение атрибута decoding перед его выводом.

// Пример использования фильтра 'wp_get_attachment_image_decoding'
add_filter( 'wp_get_attachment_image_decoding', 'custom_attachment_image_decoding', 10, 2 );
function custom_attachment_image_decoding( $decoding, $attachment_id ) {
    // Ваш код для изменения атрибута decoding
    return $decoding;
}

Хук wp_get_attachment_image предоставляет возможность изменять различные атрибуты изображения, возвращаемого этим хуком. С помощью фильтров ‘wp_get_attachment_image_srcset’, ‘wp_get_attachment_image_sizes’, ‘wp_get_attachment_image_loading’ и ‘wp_get_attachment_image_decoding’ можно легко изменить значения атрибутов srcset, sizes, loading и decoding соответственно. Это полезно для настройки вывода изображений в WordPress и адаптации их под требования проекта.

Связанные элементы

Функция wp_get_attachment_url(): возвращает URL изображения вложения.
Функция wp_get_attachment_metadata(): возвращает метаданные изображения вложения.
Функция wp_get_attachment_caption(): возвращает подпись изображения вложения.
Функция wp_get_attachment_image_src(): возвращает массив с URL, шириной и высотой изображения вложения.
Функция wp_get_attachment_image_sizes(): возвращает массив с доступными размерами изображения вложения.
Функция wp_get_attachment_image_srcset(): возвращает строку с атрибутом srcset для изображения вложения.
Хук wp_get_attachment_image_attributes: фильтрует массив с атрибутами изображения вложения.
Класс WP_Image_Editor: предоставляет методы для редактирования изображений.