Как разработчики тем WordPress, мы могли бы создать тему — или темы — которые требуют, чтобы изображения имели определенный определенный размер (размеры). В то же время мы не можем возложить ответственность за создание таких специфичных для измерения изображений на конечных пользователей наших тем.
Так в чем же решение? Лучший способ справиться с этой проблемой — включить в нашу тему (ы) функциональность для создания изображений нестандартного размера на лету.
В этом уроке я покажу вам, как использовать PHP-библиотеку BFI Thumb для достижения этой цели.
Избранные изображения
Что такое избранные изображения
Согласно Кодексу WordPress:
Избранное изображение — это изображение, которое выбирается в качестве репрезентативного изображения для сообщений, страниц или пользовательских типов сообщений. Отображение этого изображения до темы. Это особенно полезно для тем в стиле журнала, где у каждого сообщения есть изображение.
Избранные изображения назывались миниатюрами до того, как имя было изменено. Таким образом, вы найдете эти два термина взаимозаменяемыми.
Включение поддержки избранных изображений
Темы должны заявить о своей поддержке миниатюр постов, прежде чем интерфейс для назначения этих изображений появится на экранах «Добавить пост / Редактировать пост».
Чтобы включить поддержку миниатюр сообщений в вашей теме, добавьте следующую строку в файл functions.php :
|
1
2
3
|
<?php
add_theme_support( ‘post-thumbnails’ );
?>
|
Отображение миниатюр сообщений в вашей теме
Чтобы отобразить миниатюры сообщений в вашей теме, вставьте следующий код в соответствующее место в вашем конкретном файле шаблона:
|
1
2
3
4
5
|
<?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 создает изображения следующих размеров, когда пользователь добавляет изображение в библиотеку мультимедиа:
- миниатюра — (максимум 150 пикселей x 150 пикселей)
- средний — (300 x 300 пикселей)
- большой — (640 пикселей x 640 пикселей)
- полный — исходный размер загружен
Регистрация нового размера изображения
Чтобы зарегистрировать новые размеры изображений, мы используем add_image_size() например:
|
1
2
3
4
|
<?php
add_image_size( $name, $width, $height, $crop );
?>
<br> |
Параметры:
-
$name— ( строка ) ( обязательно ) Новое имя размера изображения. По умолчанию: нет -
$width— (int) (необязательно) Ширина эскиза поста в пикселях. По умолчанию: 0 -
$height— (int) (необязательно) Высота миниатюры сообщения в пикселях. По умолчанию: 0 -
$crop— (логическое / массив) (необязательно)
Пример использования
|
1
2
3
4
5
6
|
<?php
if ( function_exists( ‘add_image_size’ ) ) {
add_image_size( ‘category-thumb’, 300 );
add_image_size( ‘homepage-thumb’, 220, 180, true );
}
?>
|
Чтобы отобразить вновь зарегистрированные размеры изображений в вашей теме, просто передайте имя размера настраиваемого большого пальца после the_post_thumbnail() функции the_post_thumbnail() , например:
|
1
2
3
4
5
|
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail(‘category-thumb’);
}
?>
|
Представляя BFI Thumb
BFI Thumb — это класс или библиотека PHP, которые действуют как средство изменения размера / обрезки / обрезки серого / colorizer / opacitor для WordPress, разработанное Benjamin Intal .
Установка и интеграция
1. Скачайте BFI thumb с GitHub и сохраните его в корневом каталоге вашей темы.
2. Включите в свою тему, добавив следующую строку в ваш файл functions.php :
|
1
2
3
|
<?php
require_once(‘BFI_Thumb.php’);
?>
|
3. Используйте следующую функцию там, где вы хотите отобразить изображение нестандартного размера:
|
1
2
3
4
5
|
<?php
// Resize by width and height
$params = array( ‘width’ => 400, ‘height’ => 300 );
bfi_thumb( «URL-to-image.jpg», $params );
?>
|
Если вы посмотрите на вышеупомянутую функцию ( bfi_thumb() ), вы заметите, что в качестве первого параметра требуется изменить размер URL-адреса изображения, а затем другие параметры (размеры изображения). Итак, вы должны спросить себя, как мы можем определить URL-адрес миниатюры нашего сообщения?
Чтобы определить URL-адрес миниатюры сообщения, мы используем функцию wp_get_attachment_image_src() которая принимает идентификатор вложения, размер и необязательный значок в качестве параметров.
|
1
|
<?php wp_get_attachment_image_src( $attachment_id, $size, $icon );
|
Таким образом, мы передаем get_post_thumbnail_id() в качестве первого параметра. Он принимает Post ID в качестве параметра и возвращает ID избранного изображения, прикрепленного к сообщению.
Вторым параметром является size который может быть либо строковым ключевым словом (миниатюра, средний, большой или полный), либо любым нестандартным размером изображения, добавленным с помощью функции add_image_size() или массивом из двух элементов, представляющих ширину и высоту в пикселях. Но чтобы обеспечить высокое качество изображения нестандартного размера, мы будем использовать исходный размер — full .
К настоящему времени наш код должен выглядеть примерно так:
|
1
2
3
4
5
6
|
<?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() вместе с другими нашими параметрами (ширина и высота), чтобы получить изображение нестандартного размера.
Завершение в функцию
Поскольку мы, вероятно, будем использовать этот код снова и снова в нашей теме — или темах — давайте обернем его в функцию.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
<?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 .
использование
Для изображений:
|
1
|
<img src=»<?php echo tuts_custom_img(‘full’, 300, 400);?>» />
|
Или для фоновых изображений:
|
1
2
3
|
<div style=»background: transparent <?php echo tuts_custom_img(‘full’, 300, 400); ?> no-repeat top center;»>
…
</div>
|
Преимущества нестандартных изображений над миниатюрами
Изображения нестандартного размера, созданные на лету с использованием библиотеки, такой как BFI Thumb, имеют следующие преимущества по сравнению с пользовательскими миниатюрами, созданными / добавленными с помощью функции add_image_size() :
-
the_post_thumbail()отображает тег изображения. Иногда вы хотите, чтобы URL изображения. Примером может быть использование изображения в качестве фона. - Пользовательские размеры изображений, зарегистрированные с помощью
add_image_size(), не будут применяться к более старым изображениям, которые были загружены до того, как был зарегистрирован размер изображения - BFI Thumb имеет возможность изменять размеры изображений как вверх, так и вниз
- BFI Thumb также имеет дополнительные функции, такие как: оттенки серого, цвет (colorize), непрозрачность, отрицание
Вывод
В этом кратком совете мы рассмотрели избранные изображения — что это такое и как мы можем использовать их в наших темах. Мы также посмотрели на add_image_size() чтобы увидеть, как мы можем использовать ее для добавления пользовательских размеров изображения при загрузке изображения в библиотеку мультимедиа.
Мы представили PHP-библиотеку BFI THumb и проиллюстрировали, как мы можем использовать ее для создания изображения нестандартного размера из миниатюры или избранного изображения.
Затем мы рассмотрели ограничения использования add_image_size() для создания нестандартных размеров изображений и преимущества, которые имеет BFI Thumb над ним.
Добавьте эту функцию в ваш файл functions.php и используйте ее всякий раз, когда вам нужно создать изображение нестандартного размера из эскиза.