Размеры изображений

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

  • непосредственно в постах,
  • в портфолио,
  • опять же в постах или в портфолио — во всплывающем окне с увеличенной версией изображения,
  • в качестве миниатюр на страницах рубрик или тегов,
  • в виджетах, например «Популярные записи», «Распродажа» (если у вас интернет-магазин например) и т.д.,
  • да даже в админке можно сделать, чтобы посты или рубрики отображались с превьюшками;

В общем существует множество различных вариантов использования одного и того же изображения на сайте. Согласитесь, это нецелесообразно, если каждая картинка будет одного и того же размера.

Конечно, с дополнительными размерами изображений тоже лучше не злоупотреблять, ведь, чем их больше:

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

Стандартные размеры изображений WP

По умолчанию WordPress уже поддерживает несколько размеров изображений. Вы можете увидеть их и отредактировать в админке на странице «Настройки > Медиафайлы».

стандартные размеры изображений в WordPress

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

Например, вы загрузили на сайт фотографию 1024х765, у вас в итоге получатся следующие копии: крупный — 1024х765, средний — 300х224, миниатюра — 150х150. Ну в общем думаю механизм понятен.

Также если вам не нужны некоторые (или все) из этих размеров и вы не хотите, чтобы WP создавал для каждого из них копию, то можете просто отключить их, о том как — читайте здесь.

Как использовать дополнительные размеры изображений на сайте

В админке

Ну тут всё просто — всё, что нам нужно, это при вставке изображения в запись выбрать размер, который хотим вставить.

выбираем нужный нам размер изображения в медиазагрузчике

В коде

В WordPress есть различные функции для работы с изображениями в коде. Для вывода изображений я например чаще всего пользуюсь функциями get_the_post_thumbnail(), the_post_thumbnail(), wp_get_attachment_image_src().

Большинство из них имеет параметр $size, в котором вы можете задать название размера. К слову вот названия для стандартных:

Название в админке Название в функциях
Миниатюры thumbnail
Средний размер medium
Крупный размер large
Оригинал full

Вот простейший пример:

the_post_thumbnail('large');

Как добавить собственный размер изображения

Процесс добавления своего размера состоит из двух этапов — обязательного и необязательного.

Этап 1. add_image_size()

Открываем свой functions.php и вставляем туда что-то вроде:

add_image_size( 'nazvanie-moego-razmera', 244, 244 );

В принципе из этого примера уже понятно, что означают первые три параметра функции, тем не менее я рекомендую ознакомиться вам с документацией add_image_size() на моем сайте.

Этап 2. Добавление размера в медиазагрузчик

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

Как обновить изображения при изменении их размеров или смене темы

Возможно вы сталкивались с такой ситуацией, что после изменения параметров функции add_image_size() или же и вовсе при смене темы, у вас на сайте по-прежнему отображались изображения со старыми размерами или же их оригиналы.

Что делать в этой ситуации? Если на вашем сайте 2-3 картинки, вы можете их просто перезагрузить. А если 2-3 тысячи? Не перезагружать же все картинки по-новой.

Могу порекомендовать вам два классных плагина, которые использовал сам — Ajax Thumbnail Rebuild и Force Regenerate Thumbnail.

Как избавиться от неиспользуемых размеров изображений в WP

Вот мы и подошли к ключевой главе, ради которой собственно я и решил написать этот пост. Сначала подробное описание задачи / проблемы

Итак, на сайте имеется 10 зарегистрированных типов постов, при этом для каждого из них в шаблоне задействовано по 2-3 размера. Нетрудно перемножить эти числа, чтобы понять, что при загрузке любой фотки на сайт у нас создается по 20-30 копий!

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

/*
 * этот фильтр будет запущен в процессе загрузки изображений на сайт
 */
add_filter( 'intermediate_image_sizes', 'true_reduce_image_sizes' );
 
function true_reduce_image_sizes( $sizes ){
	/*
	 * $sizes - массив с размерами, например Array ( [0] => thumbnail [1] => medium [2] => large [3] => post-thumbnail )
	 * получаем тип поста при помощи get_post_type()
	 */
	$type = get_post_type($_REQUEST['post_id']);
 
	/*
	 * прокручиваем массив с размерами через цикл, $key - индекс массива, $value - название размера
	 */
	foreach( $sizes as $key => $value ){
 
		/*
		 * задаем условия для каждого из типов, если их (типов записей) слишком много, используйте switch
		 */
		if( $type == 'page' ) {
			if( $value == 'regionfeatured' ){ // отключаем regionfeatured для страниц
    				unset( $sizes[$key] );
    			}
		} else if ( $type == 'region' ) {
			if( !in_array( $value, array('regionfeatured','misha335') ) ){ // для регионов отключаем всё, кроме regionfeatured и misha335
    				unset( $sizes[$key] );
    			}
		} else {
			if( $value != 'thumbnail' ){ // отключаем всё, кроме thumbnail
    				unset( $sizes[$key] );
    			}
		}
	}
	return $sizes;
}
Подпишитесь, чтобы раз в неделю получать свежие статьи с блога по email.

Смотрите также

Комментарии 14

  • Анастасия11 апреля 2015 в 06:04 #

    Полезный код, спасибо, как раз актуально для моих постов в 20-30 картинок
    А вот у меня используется 3 размера - для миниатюр на главной, в блоге и самые мелкие. Получается, мне надо просто два первых размера отключить для загружаемых на страницах и записях изображений ?

    А после добавления кода плагином Force Regenerate Thumbnail лишние размеры можно удалить?

    • Миша11 апреля 2015 в 08:04 #

      Код, который я привёл, актуален только при использовани типов постов.

      Если ваши картинки загружаются только к записям post, то его смысл теряется.

    • Миша11 апреля 2015 в 08:04 #

      Да, после настройки кода, можно плагином Force Regenerate Thumbnail почистить.

      • Анастасия11 апреля 2015 в 08:04 #

        Хм, а в записях post нельзя отключить создания размеров миниатюр для загружаемых картинок, если упростить этот код?
        У меня два размера выводятся через add_image_size и не используются на страницах записей

        • Миша12 апреля 2015 в 08:04 #

          То есть сделать, чтобы размеры не создавались при загрузке картинок через пост? Конечно можно.

          • Анастасия12 апреля 2015 в 09:04 #

            Да, мне размеры нужны только в ленте постов
            А не подскажете, как? Я вчера пыталась через unset отключить для типа=post, но вроде не сработало

            • Миша13 апреля 2015 в 09:04 #

              Вы похоже не совсем поняли механизм работы кода. Есть картинки, которые загружаются либо на странице редактирования поста, либо на странице редактирования страницы, либо просто через медиазагрузчик. Вот для одного из этих вариантов размеры мы и можем отключить.

              • Анастасия13 апреля 2015 в 09:04 #

                Ну допустим, как-то так:

                add_filter( 'intermediate_image_sizes', 'true_reduce_image_sizes' );
                 function true_reduce_image_sizes( $sizes ){
                	$type = get_post_type($_REQUEST['post_id']);
                		if( $type == 'post' ) {
                			unset( $sizes['home-thumbnail'] );
                    			}
                	return $sizes;
                }
                • Миша14 апреля 2015 в 08:04 #

                  Да, код верный, для изображений, загруженных через пост, мы отключаем генерацию размера home-thumbnail.

                  Он выполняет нужную вам задачу?

                  • Анастасия14 апреля 2015 в 09:04 #

                    Вот в том-то и дело, что все размеры создаются =(

                    UPD Поковырялась немного и вроде заработал следующий вариант:

                    add_filter( 'intermediate_image_sizes', 'ratfelt_image_sizes', 999 );
                        function ratfelt_image_sizes( $image_sizes ){
                         $rat_image_sizes = array( 'home-thumbnail' ); 
                    					if( isset($_REQUEST['post_id']) === get_post_type( $_REQUEST['post_id'] ) ) {
                         	return $rat_image_sizes;     
                    					} else {
                    						return $image_sizes;
                        }
                    				}
  • влад и яша3 июля 2015 в 16:07 #

    Спасибо! Два дня искал нужный код! it works!

  • Евгений31 октября 2015 в 08:10 #

    А есть плагин, который дает возможность выбрать, какие копии делать, при загрузке изображения?

  • Виталий20 ноября 2015 в 12:11 #

    Не знаю, правильно ли я понял, но решение своей проблемы с ресайзом картинок, которые создает WP вижу в следующем:
    когда я загружаю картинку в пост через кнопку "Добавить медиафайл" http://joxi.ru/RmzgyGjfGBR62O ресайзы картинок не должны создаваться,
    а когда добавляю миниатюру http://joxi.ru/VrwQxvGHv9442X , вот здесь уже они создаются.
    Это было бы идеально, но подозреваю, что т.к. и в том, и в др. случае картинки все равно попадают в Медиабиблиотеку, то так, наверное, не получится сделать?

Оставить комментарий / вопрос

phpjsHTMLCSSSQLПросто код
  Для того, чтобы оставить комментарий, пожалуйста, зарегистрируйтесь или авторизуйтесь на сайте.
Получайте новости блога по email или следите за мной в социальных сетях.
  • Миша: Да, точно)

  • Владимир: и на третьей строке не хватает скобки ) закрывающей if :)

  • Миша: Добрый вечер! Рекомендую получить ID пользователя через функцию get_current_user_id().

  • Дмитрий: Миша, подскажите пожалуйста, я использую такой редирект, но он не срабатывает: add_action( 'template_redirect', funct...

  • Миша: Ну как не определена - это аргумент функции. Или я просто вас не до конца понимаю.