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

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

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

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

  • Забудьте о TimThumb. Используйте BFIThumb!
  • Как добавить пару миниатюр картинок к записи в WordPress
  • Фото галерея на WordPress с картинками заданного размера
  • Картинки в WordPress: руководство по параметру
  • Картинки в WordPress: отметки, редактирование, прикрепление изображений
  • Редактируем картинки в WordPress

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

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

Миниатюры картинок

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

Что такое миниатюры картинок?

Согласно WordPress Codex:

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

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

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

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

<?phpadd_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)

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

<?phpif( 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

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

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