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

Миниатюры

HIT

14.06.2015

1086

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

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

Добавление миниатюр записям (в файле 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');

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Галерея изображений в виде карусели

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


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

/
Миниатюры меток

Миниатюры меток

Произвольными полями делаем поле «миниатюра (изображение)» в метках. Там где надо вывести миниатюру ставим <?php // номер метки $tag_id = get_query_var( 'tag_id' ); // данные о текущей категории $tag = Читать далее »

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

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

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

/

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

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

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