/ Сайтостроение / Wordpress / Миниатюры

Миниатюры

HIT

14.06.2015

1505

Миниатюра — это графическое изображение передающее её суть записи. При удалении изображения, удаляются все его миниатюры.

Миниатюра записи

Добавление миниатюр записям (в файле funсtions.php)

//добавление поддержки миниатюр
if ( function_exists('add_theme_support') ) {
add_theme_support('post-thumbnails');
}

Если отсутствует миниатюры выдает placeholder (в верстке)

<?php if( has_post_thumbnail() ) {
	the_post_thumbnail();
} else {
	echo '<img src="'.get_bloginfo("template_url").'/images/img-default.jpg" />';
}
?>

Генерируемый placeholder — https://placeholder.com/ Работает это так: запрашиваем необходимый размер миниатюры и помещаем url к нему в переменную: $image = ‘http://placehold.it/800×490’;

Фон из миниатюры в div’е

<?php if( has_post_thumbnail() ) : ?>

<?php
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'has_post_thumbnail' );
$url = $thumb['0'];
?>
<div id="post-div-pic" style="background-image:url(<?=$url?>);"></div> 

<?php endif; ?>

не помню..

<?php if ( function_exists("has_post_thumbnail") && has_post_thumbnail() ) { the_post_thumbnail(array(300,225), array("class" => "alignleft post_thumbnail")); } ?>

Пользовательские миниатюры

Добавление нового типоразмера миниатюры

add_image_size( 'square', 300, 300, array( 'center', 'top' ) );

Включение пользовательской миниатюры, при импорте изображения в страницу

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
	return array_merge( $sizes, array(
		'square' => 'Квадратная',
	) );
}

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

Обновление миниатюр

Старые миниатюры нужно перезагружать плагином Regenerate Thumbnails. В плагине всего одна кнопка — обновить.
В последних версиях Regenerate Thumbnails изменил алгоритм работы. На некоторых сайтах не обновляются миниатюры, ошибка:
Unable to fetch a list of attachment IDs to process from the WordPress REST API. You can check your browser’s console for details.
Это происходит на сайтах у которых не работает Rest Api. В частности у меня не работало по причине хуков отключающих Rest Api.

При регенерации миниатюр — нужно чтобы интерфейс был открыт. т.е. если уйти со страницы Regenerate Thumbnails — процесс пересохранения миниатюр будет остановлен. Нужно будет начинать заново. Это может иметь существенное значение, когда миниатюр много.

С последней версией плагина появилась возможность перезагружать отдельно любую миниатюру.

Размеры миниатюр

Стандартные размеры миниатюр

the_post_thumbnail();                  // Передается параметр -> 'post-thumbnail'
the_post_thumbnail('thumbnail');       // Размер по умолчанию: 150px x 150px max
the_post_thumbnail('medium');          // Размер по умолчанию: 300px x 300px max
the_post_thumbnail('large');           // Размер по умолчанию: 640px x 640px max
the_post_thumbnail('full');            // оригинальный размер загруженного файла
the_post_thumbnail( array(100,100) );  // Произвольный размер (100px x 100px)
the_post_thumbnail( 'square' );  // Пользовательский размер миниатюры

Недавно заметил, что появился еще один размер миниатюры —
medium_large. Не обрезанная и не измененная по пропорциям миниатюра с шириной до 1024 px (по умолчанию). При этом large определяется по большей стороне (ширина или высота).

Кадрирование (crop)

Flase (мягкое кадрирование)

Эта строка укажет WP, что при загрузке нового файла, нужно создать его уменьшенную копию. В этом случае миниатюра будет подогнана под ширину или высоту, смотря какая из сторон подходит больше, а противоположная сторона будет уменьшена пропорционально и скорее всего не будет больше указанного размера. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Картинка будет уменьшена до размеров — 250х180 px, т.е. высота будет 180, как мы и указали, однако ширина получится выше указанной 250 а не 220. В этом случае картинка не кадрируется и уменьшенная копия сохраняет пропорции полностью.

add_image_size( 'homepage-thumb', 220, 180 );

True (жесткое кадрирование)

Если установить четвертый параметр в true, то миниатюра будет уменьшена и обрезана точно под указанные размеры. Например, у нас оригинал картинки 2500х1800 пикселей мы делаем миниатюру 220х180 пикселей. Оригинал будет уменьшен до высоты 180xp (тогда ширина его как бы равна 250px), а ширина будет обрезана по краям по 15px и в итоге получим уменьшенную копию: 220х180 пикселей:

add_image_size( 'homepage-thumb', 220, 180, true ); // 220 pixels wide by 180 pixels tall, hard crop mode

Уменьшение по нужной стороне

Чтобы уменьшить картинку по одной из нужных нам сторон, нужно указать противоположной стороне огромное значение. Например, у нас есть картинка 2500х1800, нам нужно получить миниатюру 500х1800, тогда указываем так:

add_image_size( 'homepage-thumb', 500, 9999 );

Array( x, y ) (жесткое кадрирование с указанием позиций)

С версии 3.9 появилась возможность указывать позицию кадрирования. Давайте добавим размер миниатюры, которая будет размером 220х220 пикселей и будет фрагментом от оригинала, который будет взят с левого верхнего угла (left, top):

add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

Х_позиция может быть: ‘left’ ‘center’ или ‘right’.
Y_позиция может быть: ‘top’, ‘center’ или ‘bottom’.

Placeholder через funсtions

// Placeholder если отсутствует миниатюра

add_filter( 'post_thumbnail_html', 'default_thumbnail' );

function default_thumbnail( $html ) {
 if ( '' !== $html )
 {
 return $html;
 }
 return '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/img-default.jpg" />'; 
}

Данная функция подставляет placeholder вне зависимости от того какой размер миниатюры запрашивается. Подходит, если на сайте изображения одного размера. Для нескольких видов миниатюр требуется доработать

Отключение стандартных миниатюр

function true_unset_image_sizes( $sizes) {
    unset( $sizes['thumbnail']); // миниатюра
    unset( $sizes['medium']); // средний
    unset( $sizes['large']); // большой
    return $sizes;
}
 
add_filter('intermediate_image_sizes_advanced', 'true_unset_image_sizes');

Либо есть альтернативный способ: прописать нули в настройках размеров миниатюр.

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Миниатюра — фон сайта

Миниатюра — фон сайта

Мы можем использовать миниатюру записи для самых разных целей. В данной статье рассмотрим вариант использовать миниатюру в виде фонового изображения сайта. Вывод миниатюры в виде фона В цикл вывода миниатюры Читать далее »

/
Галерея изображений товара в категории

Галерея изображений товара в категории

Создадим переключающиеся изображения товара при наведении мыши, либо галерею изображений товара в шаблоне категории. Под галереей изображений (Featured Images) понимаются дополнительные изображения помимо основного изображения. Выводим дополнительные изображения function woocommerce_feature_gallery() Читать далее »

/
Атрибуты миниатюры

Атрибуты миниатюры

У миниатюры (thumbnail) есть служебная функция назначения атрибутов. Манипулируя атрибутами можно добиться интересных результатов. Фильтр wp_get_attachment_image_attributes распространяется на миниатюры, а также на вложенные изображения wp_get_attachment_image($image->ID, ‘rectangle’). Как сделать отложенную загрузку Читать далее »

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

Пока нет комментариев. Будь первым!

Миниатюры
Первая последняя записи в ряду
Рекомендации для васПервая последняя записи в рядуOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.