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

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

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

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

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

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

Как вручную кадрировать миниатюру в Вордпресс
Дефолтный кроп

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

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

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

Как быть

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

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

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

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

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

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

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

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

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

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

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

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

Больше полезных материалов по веб-разработке на моем канале в Телеграм.
Обязательно подпишитесь.

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

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

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