Вопрос или проблема
Изображения, вставленные через Gutenberg, по умолчанию не имеют атрибутов ширины и высоты. Я хотел бы использовать их для целей ленивой загрузки, чтобы изображение расположилось правильно.
Есть ли хуки или что-то, чтобы добавить ширину и высоту к выводу? Или нужно ли расширять основной блок для этого?
Если это возможно, я бы предпочел переключиться на технику ленивой загрузки без необходимости в атрибутах ширины и высоты на изображениях, вместо того чтобы как-то взламывать вывод изображений редактора.
Это избавит вас от проблем с обслуживанием, которые могут возникнуть в будущем с редактором Gutenberg.
Я имел хороший опыт с этим плагином https://appelsiini.net/projects/lazyload/
редактировать:
Я ошибался в своем предположении. Вам все равно нужно будет редактировать вывод изображения для другого плагина. Например, для моего предложенного с data-src для изображения.
Ответ или решение
Чтобы добавить атрибуты ширины и высоты к изображениям, вставленным через редактор Gutenberg, необходимо учитывать несколько аспектов реализации. По умолчанию Gutenberg действительно не генерирует эти атрибуты, что может создавать проблемы с корректным позиционированием изображений при использовании ленивой загрузки. Тем не менее, есть несколько способов решить эту задачу.
1. Использование фильтров WordPress
WordPress предоставляет набор фильтров, которые позволяют изменять вывод блоков в Gutenberg. Для добавления атрибутов ширины и высоты к изображению можно использовать фильтр wp_calculate_image_srcset или wp_get_attachment_image_attributes.
Пример кода, добавляемого в файл functions.php вашей темы:
add_filter('wp_get_attachment_image_attributes', 'add_image_width_height', 10, 2);
function add_image_width_height($attr, $attachment) {
$image_meta = wp_get_attachment_metadata($attachment->ID);
if ( isset($image_meta['width']) && isset($image_meta['height']) ) {
$attr['width'] = $image_meta['width'];
$attr['height'] = $image_meta['height'];
}
return $attr;
}Этот код извлекает данные о ширине и высоте изображения из метаданных и добавляет их в атрибуты.
2. Расширение блока изображения
Если требуется более глубокая интеграция и контроль над выводом изображений, можно рассмотреть вариант расширения блока изображения в Gutenberg. Это потребует создания пользовательского блока, что потребует больше усилий, но и даст больше возможностей.
Пример создания пользовательского блока может выглядеть следующим образом:
const { registerBlockType } = wp.blocks;
const { MediaUpload, MediaUploadCheck } = wp.blockEditor;
registerBlockType('custom/image', {
title: 'Custom Image',
icon: 'format-image',
category: 'media',
edit: function(props) {
return (
<div>
<MediaUploadCheck>
<MediaUpload
onSelect={ media => {
props.setAttributes({ imageUrl: media.url, imageWidth: media.width, imageHeight: media.height });
}}
render={({ open }) => (
<button onClick={open}>Upload Image</button>
)}
/>
</MediaUploadCheck>
{props.attributes.imageUrl && (
<img src={props.attributes.imageUrl} width={props.attributes.imageWidth} height={props.attributes.imageHeight} />
)}
</div>
);
},
save: function(props) {
return (
<img src={props.attributes.imageUrl} width={props.attributes.imageWidth} height={props.attributes.imageHeight} />
);
}
});3. Использование плагинов
Если вы рассматриваете возможность использования плагинов, которые обеспечивают ленивую загрузку, то эффективным выбором может стать уже упомянутый вами плагин. Однако, как вы отметили, даже для таких плагинов может потребоваться модификация разметки для правильной работы.
Заключение
Добавление атрибутов ширины и высоты к изображениям, вставленным через Gutenberg, это важный аспект обеспечения правильной загрузки и позиционирования изображений. Вы можете достичь этого как с помощью фильтров, так и расширяя блоки. Если вы предпочитаете минимизировать риски изменений в будущем, использование готовых решений в виде плагинов может подойти лучше, но всегда важно проверять совместимость с вашим текущим окружением.