Проблема с адаптивными изображениями в Gutenberg редакторе WordPress

Недавно мне нужно было на одном сайте вывести блок текста с изображениями в нескольких колонках. Изначально добавлял все через обычный текстовый блок в Gutenberg, но картинки оказались по итогу не адаптивными и ломали верстку на маленьких экранах.

Я погуглил и понял, что проблема возникает, если установленный шаблон не поддерживает адаптивность, а так как у меня самодельная тема, созданная лет 5 назад, то все сходится. Однако решить эту задачу не так уж и сложно…

1. Во-первых, вам нужно перенести картинку из блока с текстовым редактором в отдельный соответствующий элемент Gutenberg. Если такой возможности нет, то придется «играться» с CSS дабы откорректировать действия графики на меньших экранах.

Я вынес лого в отдельный блок над текстом.

2. Второй момент заключается в правильных настройках блока «Изображение». По умолчанию в его свойствах задано конкретное значение ширины/высоты картинки, равное ее физическим размерам. Поэтому не удивительно, что на любых мониторах она выводится в максимальном размере.

Нам же нужно задать для изображения в блоке характеристик “Размер” значение ширины 100% — просто кликаете по этому параметру.

3. Сразу после этого адаптивность будет работать на сайте корректно и не ломать верстку. Однако сама картинка по высоте будет максимально вытягиваться. Чтобы это исправить в файле стилей добавляем следующий код:

.wp-block-column .wp-block-image img {
    height: auto;
}

Теперь ширина картинки будет 100%, а высота начнет рассчитываться автоматически.

P.S. Я описал алгоритм работы с самописной темой. Профессиональные шаблоны, по идее, изначально должны поддерживать адаптивность.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов - 36, средний балл: 4,08 из 7)

Загрузка...

Категории: Возможности; Начинающим;
Теги: адаптивность, изображения, разные ошибки, редактор Gutenberg.