/ Wordpress / Миниатюры

Миниатюры

HIT

14.06.2015

1845

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

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

Добавление миниатюр записям (в файле 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 — процесс пересохранения миниатюр будет остановлен. Нужно будет начинать заново. Это может иметь существенное значение, когда миниатюр много.

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

Удаление лишних миниатюр

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

Чтобы избавиться от лишних миниатюр поможет плагин Media Cleaner (20 000+).

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

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

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

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');

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

Не желательно отключать формирование основной миниатюры (thumbnail).т.к. этот размер используется для вывода миниатюр в медиабиблиотеке. И если его отключить, то будут выводится исходники и медиабиблеотека будет загружаться дольше.

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Несколько миниатюр записи

Несколько миниатюр записи

В некоторых случаях необходимо, чтобы у записи было несколько миниатюр. Например, если запись это товар с несколькими изображениями. Добавим эту возможность при редактировании записи. Плагин Multiple Featured Images После установки Читать далее »

/
Адаптивные изображения (атрибут srcset)

Адаптивные изображения (атрибут srcset)

Давно интересовал вопрос адаптивности изображений с помощью атрибута srcset. Как это работает и как правильно настроить. Пришло время это выяснить. Теория srcset В атрибуте srcset выводятся все варианты миниатюры и Читать далее »

Галерея изображений в виде карусели

Галерея изображений в виде карусели

Нужно переделать стандартное представление галереи изображений в карточке товара. Сделаем данный функционал более похожим на привычный в виде карусели. Для этого подключаем функционал карусели slick, и создать скрипт инициализации Рекомендуемые Читать далее »

/

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

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

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