WordPress как на ладони
WordCamp Saint Petersburg 2018 wordpress jino

add_image_size() WP 2.9.0

Регистрирует новый размер миниатюр.

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

Чтобы для поста можно было определить картинку миниатюру, нужно активировать эту возможность функцией - add_theme_support( 'post-thumbnails' ); в файле шаблона funсtions.php.

Чтобы создавать миниатюры на лету с любым размером, вместо этой функции, используйте мой плагин Kama Thumbnail.

Используется в: set_post_thumbnail_size().

Хуков нет.

Возвращает

Ничего не возвращает.

Использование

add_image_size( $name, $width, $height, $crop );
$name(строка) (обязательный)
Название нового размера картинок.
По умолчанию: нет
$width(число) (обязательный)
Ширина миниатюры (в пикселях).
$height(число) (обязательный)
Высота миниатюры (в пикселях).
$crop(логический)

Как создавать миниатюру?

  • false - мягкое кадрирование: миниатюра создается по одной из подходящих сторон: указанной ширине или высоте. Итоговая картинка не будет точно совпадать указанным размерам;

  • true - жесткое кадрирование: миниатюра создается точно по указанным размерам. Подбирается наиболее подходящая сторона, картинка уменьшается по ней, а у противоположной стороны лишняя часть, не подходящая по пропорциям обрезается;

  • array( координата_X, координата_Y ) - указание позиции кадрирования, т.е. если указать массив (array( 'right', 'top')), то изображение будет кадрированно с указанных позиций.

crop работает только для новых изображений которые были добавлены после добавления кода.

По умолчанию: false

Зарезервированные названия размеров

thumb, thumbnail, medium, large, post-thumbnail

Названия "thumb" и "thumbnail" - это алиасы (синонимы) и относятся к одинаковым файлам.

Смотрите также описание функции image_downsize().

Также вы можете установить опции создаваемой миниатюры через:

update_option('thumbnail_size_w', 160);
update_option('thumbnail_size_h', 160);
update_option('thumbnail_crop', 1);

Примеры

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

Регистрируем новые размеры миниатюр, добавив такой код в файл шаблона functions.php:

if ( function_exists( 'add_theme_support' ) ) {
	add_theme_support( 'post-thumbnails' );
		set_post_thumbnail_size( 150, 150 ); // размер миниатюры поста по умолчанию
}

if ( function_exists( 'add_image_size' ) ) {
	add_image_size( 'category-thumb', 300, 9999 ); // 300 в ширину и без ограничения в высоту
	add_image_size( 'homepage-thumb', 220, 180, true ); // Кадрирование изображения
}

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

#1 - false (мягкое кадрирование)

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

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

#2 - 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

#3 - уменьшение по нужной стороне

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

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

#4 - 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'.

Использование новых размеров

Мы зарегистрировали 3, отличных от базовых, размера: post-thumbnailscategory-thumbhomepage-thumb. Чтобы теперь использовать эти размеры (выводить картинки в шаблоне), можно использовать следующие функции:

Избранная картинка (futured image)

Чтобы использовать новый размер при выводе картинки установленной как "Избранная картинка" поста, в файле шаблона нужно использовать функцию the_post_thumbnail():

if ( has_post_thumbnail() ) {
	the_post_thumbnail( 'category-thumb' ); // category-thumb - название размера
}

Для библиотеки картинок (админ-панель)

Чтобы добавить новый размер в выбор размеров при вставке картинки в пост, нужно использовать фильтр-хук image_size_names_choose, в котором нужно добавить размер и указать для него понятное название:

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
	return array_merge( $sizes, array(
		'category-thumb' => 'Мой размерчик',
	) );
}
razmerchik

Для основных медиафайлов (PHP/Templates)

Также можно выводить картинки (по размерам) напрямую из библиотеки WordPress по ID картинки. Для этого используйте функцию wp_get_attachment_image():

<?php
// Подразумевается, что у вас в библиотеке есть картинка с ID 42...
echo wp_get_attachment_image( 42, 'category-thumb' );
?>

Если нам нужно получить только УРЛ картинки а не готовый тег <img>, то используйте функцию wp_get_attachment_image_src().

Плагины

  1. Regenerate Thumbnails - этот плагин позволяет создать новые размеры для каждого загруженного изображения. Полезен когда вы изменили или добавили новые размеры миниатюр (через Настройки > Медиафайлы) во время когда в библиотеке уже есть загруженные изображения. Или когда вы изменили размеры "Избранного изображения" поста.

  2. Force Regenerate Thumbnails - удаляет ранее созданные размеры и создает новые, на основе текущих установок.

  3. AJAX thumbnail rebuild - позволяет пересоздать миниатюры. Полезен, если вы использовали функцию add_image_size() когда у вас уже есть загруженные изображения. (Это медленный плагин, но при этом в нем не бывает ошибок с недостатком выделенной памяти).

  4. Simple Image Sizes - позволяет создавать новые размеры миниатюр прямо из панели "Медиафайлы". Он также умеет пересоздавать миниатюры. Он добавляет новые размеры в выбор для постов, так вы можете вставлять новые размеры в посты. Вы можете выбирать какие из размеров вы бы хотели пересоздать и для каких типов постов это нужно сделать.

Код add image size: wp-includes/media.php VER 4.9.6

<?php
function add_image_size( $name, $width = 0, $height = 0, $crop = false ) {
	global $_wp_additional_image_sizes;

	$_wp_additional_image_sizes[ $name ] = array(
		'width'  => absint( $width ),
		'height' => absint( $height ),
		'crop'   => $crop,
	);
}

Cвязанные функции

Из метки: thumbnail (image картинки-миниатюры)

Еще из раздела: Миниатюры

add_image_size 38 комментов
Полезные 7 Вопросы 1 Все
  • campusboy2782 cайт: www.youtube.com/c/wpplus

    thumb, thumbnail, medium, large, post-thumbnail

    Названия "thumb" и "thumbnail" - это алиасы (синонимы) и относятся к одинаковым файлам.

    Судя по the_post_thumbnail есть ещё full, алиас которого post-thumbnail, если оное не перебито функцией set_post_thumbnail_size.

    Ответить1.7 год назад #
    • Kama5288

      full - это полный размер, оригинал картинки - это не миниатюра.

      Вот кусок внутреннего кода:

      function _wp_get_image_size_from_meta( $size_name, $image_meta ) {
      	if ( $size_name === 'full' ) {
      		return array(
      			absint( $image_meta['width'] ),
      			absint( $image_meta['height'] ),
      		);
      	} elseif ( ! empty( $image_meta['sizes'][$size_name] ) ) {
      		return array(
      			absint( $image_meta['sizes'][$size_name]['width'] ),
      			absint( $image_meta['sizes'][$size_name]['height'] ),
      		);
      	}
      
      	return false;
      }

      Т.е. если full то берутся оригинальные размеры...

      Ну и, нет смысла добавлять в промежуточный размер оригинал...

      Ответить1.7 год назад #
  • reFactorPro cайт: factor.pro

    Приветствую! А как возможно сделать миниатюру адаптивной? потому что ширину поставить в 100% нельзя, чтобы она растягивалась на 100% родительского блока. Или как лучше управлять адаптивностью миниатюры? через медиа-запросы?

    1
    Ответить1.6 год назад #
    • Kama5288

      В любом случае ставь 100%. Чтобы для разных размеров качество было приемлемым, то можно использовать атрибуты srcset wp_get_attachment_image_srcset() и есть еще атрибут sizes wp_get_attachment_image_sizes(). В описании функций все о них написано... Разумеется, для работы этих атрибутов, нужно наличие реальных картинок...

      Ответить1.6 год назад #
  • kolshix288 cайт: paxtoy.com

    Как добавить к имени файлу который сжат имя функции сжатия?

    Был файл: bolshoi_stol.jpg

    Добавили функцию

    if ( function_exists( 'add_image_size' ) ) {
    	add_image_size( 'compress-size', 1024, 1024 ); // имя любое которая подойдет под нужный случай
    	add_image_size( 'compress-size-galery', 2048, 1024 );
    }

    теперь надо, чтобы файл при загрузке получил имя:

    bolshoi_stol-compress-size-1024x600.jpg
    и
    bolshoi_stol-compress-size-galery-2048x600.jpg

    Главное чтоб добавлялось нужное имя функции к имени изображения

    2
    Ответить1.6 год назад #
  • Михаил

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

    Ответить1.5 год назад #
    • т.е. нарастить по определенным сторонам? Насколько мне известно -нет.

      1
      Ответить1.3 год назад #
  • Подскажите, можно ли добавить свой кастомный размер изображения, зареганый и выведенный в админке для выбора изображения. А мне нужно для редактирования этого размера, там где Редактирование -> Параметры файла -> Настройки миниатюры -> Сейчас редактируется (Все размеры, Миниатюра, Все размеры, кроме миниатюры)?

    1
    Ответить1.3 год назад #
  • Konstantin

    Здравствуйте! Есть картинка 700x500 (оригинал). Нужно копию 150x150, но чтоб не срезалось а сжималось. Как можно реализовать? Спасибо! thank_you

    Ответитьгод назад #
    • Kama5288

      Кажется то что тебе нужно тут сделать нельзя... Но можно в моем плагине Kama Thumbnail

      Имей ввиду, что при 150x150 часть по любому обрежется... Вопрос: как можно сжать картинку с пропорциями 7/5 под пропорции 1/1, ты это учитывал?

      Ответитьгод назад #
  • kolshix288 cайт: paxtoy.com

    можно ли под каждый размер сделать отдельное качество сжатия ??
    что-то типа (как в коде ниже не работает, просто не знаю как реализовать)

    if ( function_exists( 'add_image_size' ) ) {
    
    	add_image_size( 'thumb_quality', 100, 100 ); 
    		add_filter('jpeg_quality', function($arg){return 100;});
    
    	add_image_size( 'thumb_no_quality', 950, 950 ); 
    		add_filter('jpeg_quality', function($arg){return 50;}); 
    }
    
  • Александр

    Почему то код:

    add_filter( 'image_size_names_choose', 'my_custom_sizes' );
    
    function my_custom_sizes( $sizes ) {
    	return array_merge( $sizes, array(
    		'category-thumb' => 'Мой размерчик',
    	) );
    }

    некорректно работает: название размера появляется в выпадающем списке, но размер отображается и вставляется неверный - 640x360(высота разная)

    • Александр

      Нашёл свою ошибку, у меня в functionc.php было прописано:

      $GLOBALS['content_width'] = apply_filters( 'kolesa_content_content_width', 640 );

      Поменял на нужный мне размер, всё заработало.

  • Sanya

    Здравствуйте, подскажите плиз:
    Скачал папку uploads, вижу что миниатюры создаются к каждой загруженой картинке.
    Можно ли сделать так, чтобы миниатюра генерилась только одна к записи, а не к каждому изображению?
    Спасибо

    Ответить4 месяца назад #
    • Kama5288

      В ВП нельзя, вообще можно. Это почитай и используйте плагин kama thumbnail. Тогда будут у вас только файлы, которые используются...

      Ответить4 месяца назад #
      • Sanya

        Спасибо, Ваш плагин использую на всех впсайтах, сейчас начал новый, и хотел попробовать обойтись стандартными миниатюрами, но тема генерит миниатюры к каждому изображению в одном посте, а хотелось бы чтобы миниатюра создавалась только к первому. Вы не подскажите как отредактировать functions.php:

        $thumb_big_sizes  = apply_filters( 'root_thumb_big_sizes', array( 770, 330, true ) );
        $thumb_wide_sizes = apply_filters( 'root_thumb_wide_sizes', array( 330, 140, true ) );
        
        if ( function_exists( 'add_image_size' ) ) {
        	add_image_size( 'thumb-big', $thumb_big_sizes[0], $thumb_big_sizes[1], $thumb_big_sizes[2]);
        	add_image_size( 'thumb-wide', $thumb_wide_sizes[0], $thumb_wide_sizes[1], $thumb_wide_sizes[2] );
        }

        тоесть нужно: 1 пост - 1 миниатюра. Заранее благодарен

        Ответить4 месяца назад #
        • Kama5288

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

          Ответить3 месяца назад #
          • Sanya

            Спасибо, снова воспользовался Вашим плагином)

            1
            Ответить3 месяца назад #

Здравствуйте, !