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

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

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

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

Вам нужно будет начать с добавления поддержки почтовых миниатюр, поместив следующий код в вашу тему в файл functions.php:

add_theme_support('post-thumbnails');

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

Пример кода выглядит так:

add_image_size('sidebar-thumb', 130, 130, true); // обрезать Жесткий режим
add_image_size('homepage-thumb', 210, 170); // режим мягкой обрезки
add_image_size('singlepost-thumb', 600, 9999); // Высота не ограничивается режиме

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

Жесткий режим кадрирования – как вы заметили, здесь добавлено значение “true” после высоты. Истинное значение говорит WordPress, чтобы обрезалось изображение до размеров, которые мы определили (в данном случае 130 х 130px). Этот метод мы часто используем в наших проектах темы, чтобы убедиться, что все пропорционально и наш дизайн в норме. Эта функция будет автоматически обрезать изображение, по бокам или снизу и сверху в зависимости от заданного размера. Недостаток жесткого обрезка, в том, что Вы не контролируете, какая часть изображения отображается а какая обрежется.

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

Мягкий режим – включен по умолчанию режим мягкой обрезки, вот почему Вы не видите каких-либо дополнительного размера, добавленного по высоте. Мягкий режим изменяет пропорционально размер изображения, не искажая его. Так что вы можете не получить размеры, которые вы хотели. Обычно он совпадает с шириной, а высота отличаются на основе каждого изображения пропорционально. Пример отображения будет выглядеть так:

Неограниченный режим высоты – Бывают случаи, когда у вас есть супер длинные изображения, которые вы хотите использовать в вашем дизайне, но вы хотите убедиться, что ширина ограничена. Основное применение мы нашли для этого рода размер изображения на инфографике. Инфографика, как правило, очень длинная и полная информация. Жесткое обрезание таких изображений на одной странице поста это не очень хорошая идея. Но по своей природе инфографика шире, чем ширина содержимого. Так что вы можете указать ширину, которая не будет ломать ваш дизайн, оставляя высоту быть неограниченной, так что все инфографики могут быть показаны без каких-либо искажений. Пример отображения будет выглядеть так:

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

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

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

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

Регенерация изображений.

Если вы не делаете новый сайт, то вам, вероятно, придется когда нибудь перегенерировать миниатюры. Кстати add_image_size() функция работает так, что она только генерирует размеры от того момента, когда была добавлена в тему. Так любой пост, которые были добавлены до включения данной функции не будут иметь новый размер изображения. Так что мы должны сделать, это восстановить новый размер изображения для размещенных давно фотографий. Это делается легко, плагин называется Перегенерировать миниатюры. После вы установите и активируете этот плагин, добавится новая опция в меню: “Инструменты » Реген. Эскизы

Нажмите Regenerate all Thumbnail и плагин сам сделает свою работу.

Еще один плагин, который может сделать регенерацию миниатюр вместо этого: Simple Image Sizes.

Включение дополнительных размеров изображения для публикации контента

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

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

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

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

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

Мы считаем этот метод должен быть добавлен в соответствии с передовой практикой для всех разработчиков темы WordPress. Каковы ваши мысли?

(1 оценок, среднее: 5,00 из 5)

Загрузка...