Настроить размеры картинок в wordpress.

- Николаенко Максим · Опубликовано 11 сентября, 2012 · Обновлено 27 августа, 2020

Содержание скрыть

2 Функция регистрации дополнительных размеров изображения

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

3.1 Как восстановить дополнительные размеры изображений

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

Создание дополнительных размеров изображений в WordPress можно проводить несколькими способами, как при помощи плагинов, так и при помощи встроенных средств wordpress. Не так давно примерно год назад была найдена сильная уязвимость в работе популярного скрипта который используют множество тем WordPress. Скрипт под названием TimThumb, предназначен для изменения размеров картинки.

Если в вашей теме используется timthumb.php, то рекомендуется его обновить. Последнюю версию скрипта можно скачать тут.

Если вы уже пользуетесь этим скриптом то для вас есть плагин WordPress, который проверяет на автомате новые версии скрипта. Называется плагин «Timthumb Vulnerability Scanner«.

Встроенные возможности WordPress

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

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

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

add_theme_support( 'post-thumbnails' );

1	add_theme_support( 'post-thumbnails' );

После подключения поддержки миниатюр в файле функций, мы сможем использовать в своей теме функцию add_image_size( ‘My-Thumbnail’, width, height, crop mode );. Указанная функция сможет зарегистрировать в wordpress новые дополнительные размеры картинок.

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

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

add_image_size( 'sidebar-thumb', 220, 300, 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 о том, что нам необходимо обрезать изображение до жестко заданных размеров (в нашем случае 220х300px).

Указанный метод нередко используется в дизайне, при верстке шаблонов, чтобы задать необходимые пропорции. Функция автоматически обрежет изображение либо fпо сторонам, либо сверху и снизу в зависимости от его размеров.

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

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

Режим неограниченной высоты. Часто необходимо в дизайне использовать очень длинные изображения. При их выводе таких картинок надо обязательно зафиксировать ширину. Как в таком случаи быть с высотой? Жесткая обрезка изображения на странице с не очень то подойдет. Самый простой ход — это определение требуемой ширины, при этом высота остается неограниченной, что позволяет исключить какие-либо искажения при его выводе. На картинке ниже можно посмотреть пример:

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

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

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

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

Код необходимо вставлять в цикл вывода статей!

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

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

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

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

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

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