Використовуємо BFI Thumb для створення кастомних розмірів зображень на WordPress

З одного боку, розробники повинні створювати для WordPress теми, які мають певні критерії розмірів зображень для завантаження на сайт. З іншого боку, неправильно обмежувати кінцевих користувачів такими рамками.

Як же бути у цій ситуації?

Дивіться також:

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

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

І в сьогоднішньому посібнику ми розглянемо, як досягти цього за допомогою PHP-бібліотеки мініатюр зображень Великий палець BFI.

Мініатюри зображень

Мініатюри зображень називали раніше просто мініатюрами (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
• $ширина - (int) (optional) Ширина мініатюри запису в пікселях. За замовчуванням: 0
• $висота - (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

Великий палець BFI відноситься до 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(), або задали параметри ширини та висоти в пікселях. Але щоб переконатися, що наше зображення є високої якості, ми використовуємо його початковий розмір. Повний.

Тепер наш код має виглядати так:

<?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 і продемонстрували, як ми можемо її використовувати для створення власних розмірів зображень з мініатюри запису або іншого зображення.

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

Джерело: code.tutsplus.com

Підпишіться на щотижневий дайджест про WordPress