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

Миниатюры

HIT

14.06.2015

1227

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

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

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

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

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' );  // Пользовательский размер миниатюры

 

Кадрирование (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');

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

Тэги:

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

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

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

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

/
Выравнивание миниатюр товаров

Выравнивание миниатюр товаров

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

/
Выводим записи у которых нет миниатюры

Выводим записи у которых нет миниатюры

Иногда нужно вывести все записи в которых отсутствуют миниатюры. Например, для интернет-магазина с множеством товаров. Сделаем это! Создаем страницу вывода Создадим шаблон страницы none-img.php, вначале обязательно прописываем название шаблона: <?php Читать далее »

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

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

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