Проблема с адаптивными изображениями в Gutenberg редакторе WordPress
Недавно мне нужно было на одном сайте вывести блок текста с изображениями в нескольких колонках. Изначально добавлял все через обычный текстовый блок в Gutenberg, но картинки оказались по итогу не адаптивными и ломали верстку на маленьких экранах.
Я погуглил и понял, что проблема возникает, если установленный шаблон не поддерживает адаптивность, а так как у меня самодельная тема, созданная лет 5 назад, то все сходится. Однако решить эту задачу не так уж и сложно…
1. Во-первых, вам нужно перенести картинку из блока с текстовым редактором в отдельный соответствующий элемент Gutenberg. Если такой возможности нет, то придется «играться» с CSS дабы откорректировать действия графики на меньших экранах.
Я вынес лого в отдельный блок над текстом.
2. Второй момент заключается в правильных настройках блока «Изображение». По умолчанию в его свойствах задано конкретное значение ширины/высоты картинки, равное ее физическим размерам. Поэтому не удивительно, что на любых мониторах она выводится в максимальном размере.
Нам же нужно задать для изображения в блоке характеристик “Размер” значение ширины 100% — просто кликаете по этому параметру.
3. Сразу после этого адаптивность будет работать на сайте корректно и не ломать верстку. Однако сама картинка по высоте будет максимально вытягиваться. Чтобы это исправить в файле стилей добавляем следующий код:
.wp-block-column .wp-block-image img { height: auto; } |
Теперь ширина картинки будет 100%, а высота начнет рассчитываться автоматически.
P.S. Я описал алгоритм работы с самописной темой. Профессиональные шаблоны, по идее, изначально должны поддерживать адаптивность.
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Вкладки в Woocommerce товарах — как убрать, добавить, изменить (сниппеты + плагин)
- Вывод Woocommerce товаров на странице с Elementor с помощью плагина
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress
- Хаки для страницы категории в WooCommerce
- Топ-5 плагинов для обеспечения безопасности WordPress сайтов
- Friend Hosting — создание WP сайта в один клик, обзор панели управления и плюсов хостера
- Размеры изображений в WordPress — как изменить, добавить свои и удалить лишние
- WooCommerce (44)
- Безопасность (12)
- Видео (6)
- Виджеты (28)
- Возможности (141)
- Вопрос-ответ (6)
- Начинающим (52)
- Новости (46)
- Оптимизация (23)
- Плагины (244)
- Сервисы (85)
- Хаки и секреты (87)
- Шаблоны (44)
- Записи и посты wordpress, оформление записи
(5,91 из 7, голосов - 47)
- Умный копирайт в footer.php для wordpress
(5,63 из 7, голосов - 30)
- Обновление плагинов и тем в WordPress: автоматическое, через FTP, скрытие уведомлений
(5,13 из 7, голосов - 30)
- Проблема с адаптивными изображениями в Gutenberg редакторе WordPress
(4,08 из 7, голосов - 36)
- Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress
(4,33 из 7, голосов - 30)
- Рубрики и категории wordpress, функция wp_list_categories
(6,05 из 7, голосов - 20)
- Иконки в меню WordPress — добавляем вручную и с плагином
(4,75 из 7, голосов - 24)

- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- Топ-3 видеокарты среднего класса от AMD: зачем платить больше?
- Доработка фильтра для повышения конферсии
- Зачем нужен домен
- Переваги застосування технології розумний будинок
- Дизайн сайта
- DLE (DataLife Engine) — движок для сателлитов
- Играть бесплатно в игровые автоматы без регистрации
- Продвижение сайта через социальные сети