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

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

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

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

• Забудьте о TimThumb. Используйте BFIThumb!
• Как добавить несколько миниатюр изображений к записи в WordPress
• Фото галерея на WordPress с изображениями заданного размера
• Изображения в WordPress: руководство по настройке
• Изображения в WordPress: отметки, редактирование, прикрепление картинок
• Редактируем изображения в 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()

С помощью функции 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

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

1. Скачайте BFI Thumb с домашней страницы
2. Загрузите файл BFI_Thumb.php в корневой каталог вашей текущей темы оформления
3. Включите этот файл в вашу тему, добавив следующую строку кода в файл functions.php:

   <?php 
   require_once('BFI_Thumb.php'); 
   ?>

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

   ?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.

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

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

<img src="<?php echo tuts_custom_img('full', 300, 400);?>" />

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

<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 имеет в сравнении с ними.

Источник: code.tutsplus.com

Алексей Шевченко

редактор wpcafe

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующийся на создании сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/