В редакторе Gutenberg WordPress по умолчанию размеры изображений в блоках могут быть ограничены стандартными вариантами. Однако часто возникает задача показать изображения разных размеров или адаптировать их под конкретный дизайн. В этой статье разберёмся, как задать разный размер картинок в блоках Gutenberg с помощью кода и плагинов, чтобы добиться гибкого и удобного результата.
Зачем нужен разный размер изображений в Gutenberg
Часто на сайте нужно показывать изображения в разных блоках с разными параметрами: в одном блоке — миниатюры, в другом — большие картинки, в третьем — изображения с определённым соотношением сторон. Это важно для дизайна и оптимизации загрузки страниц.
По умолчанию в блоке «Изображение» можно выбрать несколько размеров: миниатюра, средний, большой, полный размер. Но если нужно больше вариаций — придётся решать задачу вручную.
Кроме того, Gutenberg позволяет создавать свои блоки и расширять функционал существующих, что открывает широкие возможности для контроля над изображениями.
Как установить свои размеры изображений в WordPress
Прежде чем использовать кастомные размеры в Gutenberg, их нужно зарегистрировать в WordPress. Это делается функцией add_image_size(). Например, добавим в functions.php темы следующий код:
function wpinc_add_custom_image_sizes() {
add_image_size('wpinc-small-thumb', 150, 150, true); // Кроп с вырезкой
add_image_size('wpinc-medium-thumb', 300, 200, false); // Масштабирование без обрезки
add_image_size('wpinc-large-thumb', 1024, 768, true); // Кроп
}
add_action('after_setup_theme', 'wpinc_add_custom_image_sizes');Этот код добавляет три новых размера изображений, которые можно будет использовать в блоках.
Чтобы новые размеры появились в медиабиблиотеке, нужно пересоздать миниатюры для уже загруженных изображений. Это можно сделать с помощью плагина Regenerate Thumbnails.
Как использовать кастомные размеры в блоке «Изображение» Gutenberg
В стандартном блоке «Изображение» нельзя напрямую выбрать кастомный размер, но можно добавить фильтр, который расширит список размеров. Для этого используем фильтр image_size_names_choose:
function wpinc_custom_sizes_names($sizes) {
return array_merge($sizes, [
'wpinc-small-thumb' => __('Маленькая миниатюра'),
'wpinc-medium-thumb' => __('Средняя миниатюра'),
'wpinc-large-thumb' => __('Большая миниатюра'),
]);
}
add_filter('image_size_names_choose', 'wpinc_custom_sizes_names');Теперь при вставке изображения в блок будет доступен выбор новых размеров.
Пример использования кастомного размера в собственном блоке Gutenberg
Если вы разрабатываете свой блок, то для вывода изображения с нужным размером в React-компоненте блока можно использовать атрибут sizeSlug компонента MediaUpload или при выводе в PHP с помощью wp_get_attachment_image() указать нужный размер:
echo wp_get_attachment_image($image_id, 'wpinc-medium-thumb');Это гарантирует, что на фронтенде будет загружено изображение именно с указанным кастомным размером.
Автоматизация выбора размера в зависимости от контекста
В некоторых случаях нужно, чтобы размер изображения выбирался автоматически в зависимости от типа контента или блока. Для этого можно использовать хуки в PHP или фильтры в JS.
Например, в PHP можно перехватить вывод изображения через фильтр wp_get_attachment_image_attributes и заменить размер по условию:
function wpinc_filter_image_size($attr, $attachment, $size) {
if (is_singular('post')) {
$size = 'wpinc-large-thumb';
} elseif (is_page()) {
$size = 'wpinc-small-thumb';
}
$attr['srcset'] = wp_get_attachment_image_srcset($attachment->ID, $size);
$attr['sizes'] = wp_calculate_image_sizes(false, $size);
return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'wpinc_filter_image_size', 10, 3);Так вы сможете динамически менять размер изображений без изменения кода блоков.
Плагины для расширения возможностей с изображениями в Gutenberg
Если не хочется писать код, можно использовать плагины, которые расширяют стандартные возможности работы с изображениями в редакторе:
- Advanced Gutenberg Blocks — добавляет новые блоки с гибкой настройкой изображений.
- Block Gallery — позволяет создавать адаптивные галереи с кастомными размерами.
- Clearfy Pro — оптимизирует загрузку и вывод изображений, включая поддержку lazy load и выбор размеров.
Эти плагины помогут ускорить настройку и улучшить пользовательский опыт без написания кода.
Практический пример: кастомный блок с разным размером изображения
Создадим простой пример собственного блока, который выводит изображение в двух вариантах размера. Код для файла block.js:
const { registerBlockType } = wp.blocks;
const { MediaUpload, MediaUploadCheck } = wp.blockEditor;
const { Button } = wp.components;
registerBlockType('wpinc/custom-image-size', {
title: 'Изображение с выбором размера',
icon: 'format-image',
category: 'common',
attributes: {
imageID: { type: 'number' },
imageURL: { type: 'string' },
size: { type: 'string', default: 'wpinc-medium-thumb' },
},
edit({ attributes, setAttributes }) {
const { imageID, imageURL, size } = attributes;
function onSelectImage(media) {
setAttributes({
imageID: media.id,
imageURL: media.sizes[size]?.url || media.url,
});
}
function onChangeSize(event) {
const newSize = event.target.value;
setAttributes({ size: newSize });
if (imageID) {
wp.media.attachment(imageID).fetch().then(attachment => {
setAttributes({ imageURL: attachment.sizes[newSize]?.url || attachment.url });
});
}
}
return (
<div>
<MediaUploadCheck>
<MediaUpload
onSelect={onSelectImage}
allowedTypes={[ 'image' ]}
value={imageID}
render={({ open }) => (
<Button onClick={open} variant="primary">
{imageURL ? <img src={imageURL} alt="Выбранное" style={{ maxWidth: '100%' }} /> : 'Выбрать изображение'}
</Button>
)}
/>
</MediaUploadCheck>
{imageID && (
<select onChange={onChangeSize} value={size} style={{ marginTop: '10px' }}>
<option value="wpinc-small-thumb">Маленькая</option>
<option value="wpinc-medium-thumb">Средняя</option>
<option value="wpinc-large-thumb">Большая</option>
</select>
)}
</div>
);
},
save({ attributes }) {
const { imageURL, imageID, size } = attributes;
return (
<img src={imageURL} alt="" data-id={imageID} data-size={size} />
);
},
});Этот блок позволяет выбрать изображение и переключать между зарегистрированными размерами, показывая картинку нужного размера сразу в редакторе и на сайте.
Выводы
Использование разных размеров изображений в Gutenberg позволяет гибко настраивать вывод контента и оптимизировать загрузку страниц. Главное — правильно зарегистрировать размеры, добавить их в выбор в редакторе и по необходимости автоматизировать выбор через код.
Для быстрой реализации можно использовать комбинацию собственного кода и готовых плагинов, например, Clearfy Pro, который поможет с настройками и оптимизацией изображений.