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

Опубликовано: 01.09.2018

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

Как же быть в этой ситуации?

Смотрите также :

Лучшее решение, как в первом, так и во втором случае – это предусмотренный функционал темы, который будет сразу же генерировать нестандартный пользовательский размер картинок при загрузке.

И в сегодняшнем руководстве мы рассмотрим, как достичь этого с помощью PHP-библиотеки миниатюр изображений BFI Thumb .

Миниатюры изображений

Миниатюры изображений называли раньше просто миниатюрами (thumbnails). Поэтому вы будете встречать употребление двух вариантов одновременно.

Что такое миниатюры изображений?

Согласно WordPress Codex:

Миниатюры изображений или миниатюры – это изображения, которые используются в качестве превью (предпросмотра) для постов, страниц или пользовательских типов записей. Они отображаются на сайте в соответствии с выбранной вами темой. Наиболее удобными такие изображения являются для «журнальных» тем, в которых каждый пост предусматривает наличие картинки.

Включение поддержки для миниатюр изображений

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

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

<?php add_theme_support( 'post-thumbnails' ); ?>

Отображение миниатюр записей в вашей теме

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

<?php if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it. the_post_thumbnail(); } ?>

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

Функция add_image_size()

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

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

маленький – (150px x 150px max) средний – (300px x 300px) большой – (640px x 640px) полный размер (исходный размер загруженного изображения)

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

Новые изображения регистрируются с помощью функции add_image_size() следующим образом:

<?php add_image_size( $name, $width, $height, $crop ); ?>

Параметры :

$name - (string) (required) Название изображения с новым размером. По умолчанию: 0 $width - (int) (optional) Ширина миниатюры записи в пикселях. По умолчанию: 0 $height - (int) (optional) Высота миниатюры записи. По умолчанию: 0 $crop - (boolean/array) (optional)

Пример использования :

<?php if ( function_exists( 'add_image_size' ) ) { add_image_size( 'category-thumb', 300 ); // 300 pixels wide (and unlimited height) add_image_size( 'homepage-thumb', 220, 180, true ); // (cropped) } ?>

Чтоб отобразить новые зарегистрированные размеры изображений в используемой вами теме, разместите название миниатюры изображения вашей пользовательской записи в функции the_post_thumbnail() , как показано ниже:

<?php if ( has_post_thumbnail() ) { the_post_thumbnail(‘category-thumb’); } ?>

Знакомство с BFI Thumb

BFI Thumb относится к PHP классу или библиотеке, в которой изображения сразу же приобретают необходимый для WordPress размер.

Установка и интегрирование

Скачайте BFI Thumb с домашней страницы Загрузите файл BFI_Thumb.php в корневой каталог вашей текущей темы оформления Включите этот файл в вашу тему, добавив следующую строку кода в файл functions.php : <?php require_once('BFI_Thumb.php'); ?> Используйте следующую функцию, если вы захотите отобразить миниатюру изображения в любом месте своей темы: ?php // Resize by width and height $params = array( 'width' => 400, 'height' => 300 ); bfi_thumb( "URL-to-image.jpg", $params ); ?>

В функции выше ( bfi_thumb() ) можно заметить, что в ней используется URL изображения, размер которого нужно изменить в качестве первого параметра. А за ним следуют следующие параметры (размеры изображения). Вы, скорее всего, зададитесь вопросом, как определить URL нашей миниатюры записи?

Определить адрес миниатюры вашей записи поможет функция wp_get_attachment_image_src() , которая использует ID, размер и дополнительную иконку в качестве параметров.

<?php wp_get_attachment_image_src( $attachment_id, $size, $icon ); ?>

Поэтому мы передаем функцию get_post_thumbnail_id() в качестве первого параметра. Он принимает Post ID в качестве параметра и возвращает ID миниатюры изображения, прикрепленного к записи.

Второй параметр – это размер (size). Он может быть маленьким, средним, большим или же таким, каким вы его добавили с помощью функции add_image_size() , или же задали параметры ширины и высоты в пикселях. Но чтоб убедиться, что наше изображение является высокого качества, мы используем его изначальный размер - full .

Теперь наш код должен выглядеть следующим образом:

<?php $size = 'full'; $params = array( 'width' => 400, 'height' => 300 ); $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID, '' ), $thumb_size ); bfi_thumb( $imgsrc[0], $params ); ?>

Функция wp_get_attachment_image_src() возвращает заказанный упорядоченный ряд со значениями соответствующими

(0) url (1) ширина (2) высота (3) размер вложений изображения (или иконка, отображающая вложение).

Но нас интересует только первый возвращаемый параметр - URL. Мы передаем его функции bfi_thumb() вместе с другими параметрами (ширина и высота), чтоб получить пользовательский размер миниатюры.

Готовая функция с нужным кодом

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

<?php function tuts_custom_img( $thumb_size, $image_width, $image_height ) { global $post; $params = array( 'width' => $image_width, 'height' => $image_height ); $imgsrc = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID, '' ), $thumb_size ); $custom_img_src = bfi_thumb( $imgsrc[0], $params ); return $custom_img_src; } ?>

Сохраните этот код в своем файле functions.php .

Использование

Для изображений :

Для фоновых изображений :

<div style="background: transparent <?php echo tuts_custom_img('full', 300, 400); ?> no-repeat top center;"> ... </div>

Преимущества кастомного размера изображений в сравнении с миниатюрами

Пользовательские размеры изображений, созданные с помощью библиотеки BFI Thumb, преобладают над пользовательскими миниатюрами, которые создаются/добавляются через функцию add_image_size() и вот благодаря каким критериям:

Функция the_post_thumbnail() отражает тэг изображения. Иногда все, что вам нужно – это url изображения. Например, если вам захочется использовать изображение в качестве фона. Пользовательские размеры изображений, зарегистрированные с помощью add_image_size() , не распространяются на старые изображения, которые были загружены перед тем, как размер изображения был зарегистрирован. BFI Thumb может изменять размер изображения в сторону уменьшения или увеличения. BFI Thumb также имеет дополнительные функции, как например: градация, цвет (заливка), непрозрачность, отмена цвета.

Заключение

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

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

Мы также упомянули об ограничениях при использовании add_image_size() для создания пользовательских размеров изображения и выгодах, которые BFI Thumb имеет в сравнении с ними.