Текстовый пост без картинок читают в 2-3 раза хуже, чем статью с визуальным рядом. Изображения разбивают стену текста, удерживают внимание и помогают объяснить то, что словами передать сложно. А ещё картинки в alt-текстах и названиях файлов приносят поисковый трафик из Google Картинок, для технического блога это сотни дополнительных переходов в месяц.

Редактор Гутенберга (блочный редактор WordPress) работает с изображениями без единого плагина. Пять встроенных блоков покрывают все базовые сценарии: от одиночной картинки до галерей и полноэкранных обложек с текстовым слоем. Но у новичков по-прежнему возникают вопросы: какой блок выбрать, как выровнять картинку чтобы текст не поехал, как поставить два снимка рядом или зачем нужен duotone-фильтр.

Ниже, пошаговый разбор каждого блока с настройками, о которых молчат в коротких гайдах. Без плагинов, только встроенные инструменты Гутенберга.

💡 Быстрый обзор:

• Добавьте одиночное изображение блоком «Изображение» и настройте выравнивание через панель инструментов, для одного снимка этого достаточно
• Разместите картинку рядом с текстом через блок «Медиа и текст», он жёстко держит пропорции, текст не наползает
• Поставьте два и более снимка в ряд блоком «Галерея» и укажите количество колонок, сетка выравнивается автоматически
• Наложите текст на фото через блок «Обложка» с фильтрами, оверлеем и опциональным параллакс-эффектом
• Включите лайтбокс в настройках блока «Изображение», картинка открывается на весь экран без перезагрузки страницы

Какие блоки Гутенберга работают с изображениями

WordPress из коробки даёт пять блоков, связанных с картинками. Каждый решает свою задачу, путать их не стоит.

• Изображение (Image), одиночная картинка с настройками выравнивания, подписи, ссылки, duotone-фильтром и лайтбоксом. Базовый кирпичик для любого поста. Документация
• Галерея (Gallery), сетка из нескольких изображений с настройкой колонок. Заменяет классические галереи старого редактора и шорткод [gallery]. Документация
• Медиа и текст (Media & Text), двухколоночный блок: слева (или справа) картинка, рядом текст. Жёсткая связка без перекосов при смене разрешения. Документация
• Обложка (Cover), фоновое изображение с текстовым слоем и кнопками поверх. Настраиваются цветной оверлей, непрозрачность и фиксированный фон. Документация
• Файл (File), ссылка на скачивание файла с карточкой. Для PDF-инструкций и архивов, не для показа картинки на странице.

Первые четыре, ваш основной арсенал. Блок «Файл» для иллюстрирования контента не используют, поэтому дальше разбираем только визуальные блоки.

Как добавить одиночное изображение и настроить выравнивание

Самый частый сценарий: вставить одну картинку в текст и подогнать её положение относительно абзацев.

Нажмите кнопку «+» (добавить блок) в интерфейсе редактора и выберите «Изображение». Появится окно загрузки, можно перетащить файл с компьютера, выбрать из медиатеки WordPress или вставить URL. После загрузки картинка сразу появляется в редакторе, а над ней всплывает панель инструментов с кнопками выравнивания.

Доступные варианты выравнивания:

• По левому краю, картинка прижимается влево, текст обтекает справа
• По центру, изображение по центру, текст сверху и снизу
• По правому краю, зеркальный вариант левого выравнивания
• Широкая ширина, картинка выходит за границы текстового блока, но не на весь экран
• Полная ширина, изображение растягивается от края до края области контента

Синие точки по углам картинки позволяют изменить размер перетаскиванием, не нужно высчитывать пиксели в CSS. В боковой панели справа (вкладка «Блок») настраиваются альтернативный текст для SEO и ссылка, по которой пользователь перейдёт при клике на изображение.

Два совета, которые сэкономят время. Первый: включите лайтбокс (опция «Enlarge on click» в настройках ссылки блока), при клике картинка открывается на весь экран, пользователь не уходит со страницы. Второй: duotone-фильтр (иконка круга в тулбаре блока) меняет цветовую гамму изображения без Photoshop, полезно, когда скриншоты из разных источников визуально «дерутся». Фильтр не меняет исходный файл в медиатеке, его всегда можно сбросить.

Но есть нюанс: выравнивание «по левому» и «по правому» работает хорошо, только когда текст достаточно длинный. Если абзац короткий, картинка «выпадает» из потока и следующий заголовок наползает на неё. В таких случаях лучше использовать блок «Медиа и текст».

Блок «Медиа и текст»: картинка и абзац в одной связке

Блок Media & Text жёстко фиксирует соотношение: половина ширины, изображение, половина, текст. Никаких перекосов при смене разрешения экрана.

Добавляется так же: кнопка «+», поиск «Медиа и текст». Выбираете картинку и пишете текст в соседней колонке. В боковой панели доступны переключатели:

• Поменять местами (картинка слева или справа)
• Полноэкранный режим (растянуть на всю доступную ширину)
• Цвет фона для текстовой половины

Блок особенно удобен для пошаговых инструкций: слева скриншот настройки, справа, описание того, что на нём происходит. Читатель не теряет связь между текстом и картинкой при прокрутке.

На практике Media & Text выручает и в более приземлённых ситуациях. Например, вставили скриншот с выравниванием по левому краю, а следующий H2 «наехал» на картинку. Менять структуру абзацев поздно, оборачиваете картинку и текст в Media & Text, проблема уходит за 10 секунд.

Как разместить две и более картинок рядом через блок галереи

Если нужно показать серию скриншотов или сделать фотоподборку, используйте блок «Галерея». В отличие от старого classic-редактора, где галерея жила отдельным шорткодом [gallery], Гутенберг управляет ею визуально.

Добавьте блок «Галерея», загрузите нужные изображения, они автоматически выстроятся в сетку. В настройках блока (правая панель) выберите количество колонок: 2, 3, 4 или больше. Для двух картинок рядом ставьте «2 колонки», получится аккуратный ряд без ручной подгонки размеров.

Дополнительные возможности блока галереи:

• Кадрирование миниатюр, все картинки приводятся к одному размеру, сетка выглядит ровно
• Настройка отступов между изображениями
• Привязка ссылки к каждой картинке по отдельности

Если проект требует нестандартной раскладки (картинки разного размера в одной сетке), возможностей встроенной галереи может не хватить. Тогда на помощь приходит блок «Колонки» (Columns), внутрь него вкладываются отдельные блоки «Изображение» с независимыми настройками. Но для типовых сценариев галереи из коробки достаточно.

Обратите внимание: не путайте блок «Галерея» с несколькими блоками «Изображение», расставленными в колонки. Галерея автоматически кадрирует миниатюры, все картинки выглядят одинаково по высоте независимо от исходных пропорций. Колонки такую подгонку не делают: одна картинка оказывается выше другой, и ряд «плывёт». Для быстрой фотоподборки, галерея, для попиксельной раскладки, колонки.

Как наложить текст на изображение через блок «Обложка»

Блок «Обложка», это фоновое изображение с текстовым слоем. По сути, баннер внутри поста. Используется для оформления разделов статьи, цитат или ключевых выводов.

Выберите блок «Обложка», загрузите изображение и введите текст прямо поверх него. В боковой панели настраиваются:

• Цвет оверлея, полупрозрачная заливка поверх картинки, делает текст читаемым на любом фоне
• Непрозрачность, интенсивность оверлея от едва заметного до почти сплошного
• Фиксированный фон, при прокрутке страницы картинка остаётся на месте (параллакс-эффект)
• Повтор фона, замостить блок повторяющимся паттерном, для текстур и узоров

Фиксированный фон, популярный приём в лендингах и портфолио на WordPress. Выглядит эффектно, но на мобильных устройствах часто отключается браузером ради производительности. Не рассчитывайте на него как на основной приём для телефонов.

Блок «Обложка» вкладывается в другие блоки: внутрь колонок, группы или строки. А ещё на обложку можно поместить не только текст, но и кнопку: добавьте блок «Кнопки» внутрь обложки, и получится готовый CTA-баннер с фоном. Весь инструментарий, без CSS и дополнительных плагинов.

Если обложка тормозит загрузку на мобильных, отключите фиксированный фон и сожмите картинку до 200-250 КБ. WordPress начиная с версии 5.8 автоматически конвертирует PNG и JPEG в WebP при загрузке, но исходник лучше подготовить заранее через TinyPNG или конвертацию в AVIF.

⁉️🤔 Частые вопросы

Почему после добавления картинки текст «прыгает» и наезжает на соседние блоки?

Это происходит, когда изображение выровнено по левому или правому краю, а текста вокруг слишком мало. Гутенберг не «подпирает» высоту блока под картинку автоматом, он ориентируется на объём окружающего текста. Решение: оберните картинку и текст в блок «Медиа и текст», он жёстко держит пропорции. Либо добавьте ещё 2-3 строки текста, чтобы обтекание отработало корректно.

Чем блок «Галерея» отличается от нескольких блоков «Изображение», поставленных в колонки?

Галерея даёт единую сетку с автоматическим кадрированием миниатюр, все картинки выглядят одинаково по размеру независимо от исходных пропорций. Колонки с отдельными изображениями такой подгонки не делают: одна картинка может оказаться выше другой, и ряд «плывёт». Для быстрой фотоподборки берите галерею, для точной попиксельной раскладки, колонки.

Можно ли добавить alt-текст сразу для нескольких картинок в галерее?

Нет, массового редактирования alt-текстов блок «Галерея» не поддерживает. Каждое изображение в галерее, отдельный медиафайл, и alt задаётся индивидуально: кликните на конкретную картинку в галерее, перейдите в боковую панель и заполните поле «Альтернативный текст». Либо пропишите alt заранее в медиатеке WordPress, тогда при вставке он подтянется автоматически.

Блок «Обложка» тормозит загрузку страницы на мобильных. Как исправить?

Фиксированный фон (параллакс), главный виновник. Отключите опцию «Фиксированный фон» в настройках блока, и браузер перестанет рендерить тяжёлый эффект при скролле. Второй шаг, сжимайте картинку для обложки до 200-250 КБ: сервисы вроде TinyPNG или конвертация в WebP/AVIF снижают размер без видимой потери качества. WordPress 5.8+ сам конвертирует PNG и JPEG в WebP при загрузке, но исходник лучше подготовить заранее.

Есть ли смысл в блоке «Файл», если я просто хочу показать картинку?

Нет. Блок «Файл» отображает кнопку скачивания и название файла, а не само изображение. Он нужен для PDF-инструкций, ZIP-архивов, CSV-файлов и других документов, которые пользователь должен сохранить на устройство. Для показа картинки всегда используйте блок «Изображение».

Чем лайтбокс в Гутенберге отличается от плагинов лайтбокса вроде FooBox или Meow Lightbox?

Встроенный лайтбокс (опция «Enlarge on click» в настройках ссылки блока «Изображение») работает без дополнительного кода и не конфликтует с темами, он появился в WordPress 6.4 в конце 2023 года. Плагины дают больше настроек: галерейный просмотр с пролистыванием, эффекты затемнения, счётчик изображений. Если вы ставите 2-3 картинки на пост, хватит встроенного. Для фотогалерей и портфолио, ставьте плагин.

Какой блок взять под вашу задачу: короткий итог

Гутенберг покрывает все базовые сценарии работы с картинками без единого плагина. Одиночное изображение вставляйте через блок «Изображение» и не забывайте про alt-текст, это ваш основной SEO-актив для Google Картинок. Включите лайтбокс: функция бесплатная, а мобильные читатели скажут спасибо.

Нужна жёсткая связка «картинка + текст», берите «Медиа и текст», он не разваливается на любом экране. Серия снимков, «Галерея» с настройкой колонок, кадрирование автоматом выровняет всё в линию. Текст поверх фото, «Обложка» с оверлеем и опциональным параллаксом, а внутрь можно добавить кнопку и получить CTA-баннер.

Освоить эти четыре блока реально за 10-15 минут в тестовом посте. Откройте черновик, потаскайте блоки по холсту, интерфейс Гутенберга заточен под визуальную работу, а не под код. Если следующий пост выйдет с картинками, а не стеной текста, вы уже в плюсе.