С одной стороны, разработчики должны создавать для 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

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

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

  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

Вам понравился материал?

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

Такой e-mail уже зарегистрирован. Воспользуйтесь формой входа или введите другой.

Вы ввели некорректные логин или пароль

Извините, для комментирования необходимо войти.

2 комментария

сначала новые
по рейтингу сначала новые по хронологии
Виталий

Загружаю изображение в медиа-библиотеку. Размер файла 26 кбайт. BFI Thumb создает файл размер которого 120 кбайт. С чем это может быть связано? Спасибо

Владимир Петрозаводский

офигенный способ создать нагрузку на сервер