Как вручную кадрировать миниатюру в Вордпресс

Как вручную кадрировать миниатюру в Вордпресс

25 марта 2019

Вордпресс по-умолчанию не позволяет вручную кадрировать миниатюры загружаемых изображений, что иногда жутко портит внешний вид сайта. Разбираемся, как это исправить или как хотя бы с этим жить.

Топ 10 продающих лендингов для Вордпресс

Эффект проявляется когда смысловая нагрузка изображения смещена от его центра. В результате кадрирования, на миниатюре она может оказаться на границе кропа или вовсе за его пределами. Сильнее всего проблема проявляется на фотографиях с людьми. В этом случае доверяться целиком автоматическому кропу я бы не рекомендовал.

Для примера возьмем первое попавшееся на стоке изображение.

Пример фото

Дефолтный кроп выглядит так.

Дефолтный кроп

Вырезается квадрат с длиной стороны равной меньшей стороне изображения. Миниатюра получается не очень, мягко говоря.

В идеале хорошо бы сделать что-то типа такого.

Правильный кроп

Как быть

Если все загружаемые фото ландшафтные (горизонтальные) или, наоборот, портретные (вертикальные), можно просто задать миниатюрам размеры соответствующих пропорций.

Настройка размеров миниатюр в Вордпресс

Можно перед загрузкой приводить все изображения к какому-то единому выработанному стандарту, размещая при этом всю смысловую нагрузку изображения строго в центре. Но это решение тоже так себе. Потому что не все пользователи умеют пользоваться графическими редакторами. Хотя научиться этому совсем не сложно, если что.

Кто владеет кодом, могут вместо миниатюр (thumbnail) вывести в интерфейсе изображение среднего (medium) или даже крупного (large) размера, сохранив его оригинальные пропорции. Но далеко не в каждом интерфейсе сайта можно реализовать такую штуку. Например, если плитка с жесткой высотой и заточена под горизонтальные изображения, тогда все равно без кропа никак не обойтись. Еще можно кадрировать изображение с помощью CSS и в зависимости от каких-то характеристик записи применять тот или иной стиль кадрирования. Но и это решение так себе.

Остается ручной кроп

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

Для реализации задачи рекомендую плагин с одноименным названием Crop Thumbnails. Плагин очень прост, решает только одну задачу и справляется с этим на ура.

Выглядит это так

Параметры файла

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

Crop Featured Image

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

INNERSTAT

Подписаться на обновления
Получайте полезные знания бесплатно ➤

Популярное в этом месяце

Подпишитесь на рассылку и получайте новые материалы на электронную почту

Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Добавить комментарий

Премиум-темы для Вордпресс с русскоговорящей поддержкой и пожизненной гарантией
Подробнее