Сен
6
0

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

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

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

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

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

Адаптивные изображения в Gutenberg

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

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

Адаптивные изображения в Gutenberg

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

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

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

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

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 48, средний балл: 3,90 из 7)
Загрузка...

категория Категории: Возможности; Начинающим;
теги Теги: , , , .
Оставить комментарий


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости