В прошлом месяце в WordPress была найдена опасная уязвимость, расположенная в популярном скрипте для изменения размеров изображений – TimThumb. Силами сообщества WordPress проблема была быстро решена. Однако остался вопрос: стоит ли вообще полагаться на сторонние скрипты в своей работе? Ведь базовые механизмы WordPress позволяют быстро справиться с возникшими задачами. В этой статье мы покажем вам, как создать дополнительные размеры изображений в WordPress без применения сторонних сценариев.

WordPress обладает встроенной возможностью Post Thumbnails (миниатюры записей), также известной как Featured Images. С помощью функции add_image_size() пользователь может определять размеры изображения и обрезать его в случае необходимости. В большинстве случаев использование базовых функций позволяет избежать подключения различных сторонних скриптов, таких как TimThumb.

Регистрация дополнительных размеров изображений в теме

Для начала нам придется добавить поддержку миниатюр записей. Делается это просто – добавляем в файл functions.php темы следующий фрагмент кода:

add_theme_support( 'post-thumbnails' );

Как только поддержка миниатюр будет подключена, мы сможем использовать в своей теме функциональность, отвечающую за регистрацию дополнительных размеров изображений. Для этой цели нам понадобится функция add_image_size(). Вызов функции имеет следующий вид: add_image_size( ‘name-of-size’, width, height, crop mode );

Примеры использования функции:

add_image_size( 'sidebar-thumb', 120, 120, true ); // Hard Crop Mode
add_image_size( 'homepage-thumb', 220, 180 ); // Soft Crop Mode
add_image_size( 'singlepost-thumb', 590, 9999 ); // Unlimited Height Mode

Здесь мы определили три различных размера изображений. Каждый из них определяется своим режимом: hard crop (жесткая обрезка), soft crop (мягкая обрезка) и unlimited height (неограниченная высота). Давайте рассмотрим каждый из этих режимов подробнее.

Режим жесткой обрезки. Как вы можете заметить, здесь мы задали значение ‘true’, добавленное после высоты. Это значение сообщает WordPress о том, что нам необходимо обрезать изображение до жестко заданных размеров (в нашем случае 120х120px). Указанный метод нередко используется в дизайне, чтобы задать необходимые пропорции. Функция автоматически обрежет изображение либо по сторонам, либо сверху и снизу в зависимости от его размеров. Недостаток жесткой обрезки: вы не можете управлять тем, какая часть изображения будет выведена на экран. К примеру, миниатюры могут быть следующими:

Режим мягкой обрезки. Режим мягкой обрезки включен по умолчанию. Этот метод изменяет размеры изображения пропорционально, не искажая его. Следовательно, вы можете не получить заданных размеров. Значение ширины обычно берется за основу, а высота уже подгоняется в соответствии с пропорциями изображения. Миниатюры в данном случае примут следующий вид:

Режим неограниченной высоты. Иной раз нам требуется использовать в дизайне очень длинные изображения. Зачастую такие изображения являются информационными графиками. При их выводе необходимо обязательно зафиксировать ширину. А вот как быть с высотой? Жесткая обрезка изображения на странице с отдельной записью не является хорошим решением. Обычно ширина информационных графиков превосходит ширину контента. Самый простой ход – это определение требуемой ширины, чтобы график не разрушил дизайн; при этом высота графика остается неограниченной, что позволяет исключить какие-либо искажения при его выводе. Изображения в данном случае примут следующий вид:

Вывод дополнительных размеров изображений в теме WordPress

Теперь, когда мы добавили функциональность для требуемых размеров изображений, давайте посмотрим, как вывести созданные размеры в теме WordPress. Откройте файл темы, в котором вы хотите вывести на экран изображение, и добавьте в него следующий код:

<?php the_post_thumbnail( 'your-specified-image-size' ); ?> 

Примечание: этот код должен быть вставлен в цикл записей.

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

Восстановление дополнительных размеров изображений

Если вы ведете работу с сайтом, который уже существует некоторое время в сети, вам, скорее всего, понадобится восстановить миниатюры. Функция add_image_size() начинает генерировать размеры только с момента ее подключения к теме. Таким образом, любые изображения, добавленные до включения этой функции, будут обладать старыми размерами. Нам необходимо восстановить размеры для изображений, добавленных ранее. Делается это с помощью простого плагина, который носит название Regenerate Thumbnails (альтернатива: Simple Image Sizes).

Использование дополнительных размеров изображений в записях

Простое подключение размеров изображений к теме не несет в себе никакого смысла. Авторы не могут использовать их при добавлении изображений в записи. Чтобы исправить это недоразумение, достаточно воспользоваться плагином Simple Image Sizes.

После его установки и активации плагина вы увидите страницу с его настройками, на которой можно будет увидеть список всех доступных размеров, определенных в теме. Все, что вам понадобится, это щелкнуть на флажок “Show in post insertion” под необходимым размером.

Все размеры, которые вы отметили флажком, будут доступны авторам для использования в записях.

С помощью плагина Simple Image Sizes можно также создавать произвольные размеры изображений прямо из консоли WordPress.

http://www.wpbeginner.com/wp-tutorials/how-to-create-additional-image-sizes-in-wordpress/