Текстовий пост без зображень читають у 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 хвилин у тестовому пості. Відкрийте чернетку, потягайте блоки по полотну, інтерфейс Гутенберга заточений під візуальну роботу, а не під код. Якщо наступний пост вийде з картинками, а не стіною тексту, ви вже в плюсі.