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

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

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

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

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

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

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

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

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

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

В примере мы зарегистрировали три различных размера изображений. Каждый из них определяется своим режимом:

  • hard crop (жесткая обрезка);
  • soft crop (мягкая обрезка);
  • unlimited height (неограниченная высота).

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

Режим жесткой обрезки.

Здесь мы задали значение ‘true’, добавленное после высоты. Это значение сообщает WordPress о том, что нам необходимо обрезать изображение до жестко заданных размеров (в нашем случае 220х300px).

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

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

Жесткая обрезка изображений в wordpress

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

Изменить размер изображения WordPress пропорционально

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

настроить размеры картинок в WordPress

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

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

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

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

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

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

настроить размеры дополнительных картинок wordpress

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

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

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

настройка размера картинок wordpress

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

Уроки WordPress - настройка размеров картинок

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

Ссылки на материал о работе с картинками в WordPress

Купить хостинг WordPress


Читайте также:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *