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

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

Что такое размеры изображений и для чего они нужны?

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

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

Возможно вас может забеспокоить тот факт – ну как же так, WordPress генерирует столько копий, зачееем. Но а какие ещё есть варианты? До того, как появился этот функционал, помню мы использовали PHP-скрипт, в который передавался URL изображения и размеры, которые нужно создать – явно так себе вариантик.

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

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

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

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

Полный список стандартных размеров изображений в WordPress:

Как отключить и удалить стандартные размеры изображений?

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

Отключение в админке

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

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

Отключение в коде

В этом случае всё свободится к использованию фильтра intermediate_image_sizes_advanced:

add_filter( 'intermediate_image_sizes_advanced', 'true_remove_default_sizes' );
 
function true_remove_default_sizes( $sizes ) {
	unset( $sizes[ 'НАЗВАНИЕ РАЗМЕРА' ] );
	return $sizes;
}

Если вы не знаете, куда вставлять код, читайте этот урок.

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

add_filter( 'intermediate_image_sizes_advanced', 'true_remove_default_sizes' );
 
function true_remove_default_sizes( $sizes ) {
	unset( $sizes[ 'thumbnail' ] ); // миниатюра
	unset( $sizes[ 'medium' ] ); // средний
	unset( $sizes[ 'large' ] ); // крупный
	unset( $sizes[ 'medium_large' ] ); // с шириной 768
	unset( $sizes[ '1536x1536' ] );
	unset( $sizes[ '2048x2048' ] );
	return $sizes;
}

Удаление ненужных копий из папки uploads

После вставки этого кода или обновления настроек копии новых изображений с этими размерами не будут создаваться при загрузке. Однако нам как-то нужно избавиться и от старых изображений, которые уже лежат в нашей папке uploads. Для того рекомендую поставить какой-нибудь плагин, который позволит пересоздать все уже существующие копии изображений на сайте и удалить те, которые мы отключили. Мне например для этой цели нравится плагин «Force Regenerate Thumbnails».

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

Тем не менее коротко об этом расскажу ниже.

В админке

Если мы говорим о добавлении изображений в контент поста в Gutenberg, то настройки размера изображения находятся в сайдбаре справа – там же, где и настройки любого другого блока.

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

В коде

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

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

Вот пример вывода миниатюры (большого размера) текущего поста в цикле

the_post_thumbnail( 'large' );

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

Теперь попробуем добавить свой собствевенный произвольный размер изображения. Я постараюсь рассмотреть все моменты, с которыми вам возможно придётся столкнуться. И разделю эту главу на несколько шагов. Но обязателен только первый шаг.

1. Регистрация размера функцией add_image_size()

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

Это можно сделать при помощи функции add_image_size() и вот такого например кода:

add_action( 'after_setup_theme', 'true_add_image_size' );
 
function true_add_image_size() {
	add_image_size( 'nazvanie-moego_razmera', 244, 244, true );
}

В целом эту функцию рекомендуют добавлять на хук after_setup_theme, и я решил так и поступить. Но я кстати не замечал никаких проблем и при использовании этой функции напрямую без хука.

Кстати, о том, куда вставлять код.

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

Как я уже говорил выше, этот шаг необязательный. Но легко осуществимый – для этих целей нам всего лишь понадобится фильтр-хук image_size_names_choose.

add_filter( 'image_size_names_choose', 'true_new_image_sizes' );
 
function true_new_image_sizes( $sizes ) {
 
	$addsizes = array(
		'nazvanie_moego_razmera' => 'Мой размер изображения'
	);
	return array_merge( $sizes, $addsizes );
 
}

Готово:

Также благодаря хуку image_size_names_choose размер изображения появится и в Gutenberg:

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

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

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

Могу порекомендовать вам два классных плагина, которые использовал сам:

Оба плагина доступны к установке через админке WordPress «Плагины > Добавить новый».

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

Давайте сначала я опишу задачу, с которой мне пришлось столкнуться.

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

/*
 * этот фильтр будет запущен в процессе загрузки изображений на сайт
 */
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( 'page' == $type ) {
			if( 'regionfeatured' == $value ){ // отключаем regionfeatured для страниц
    				unset( $sizes[ $key ] );
    			}
		} else if ( 'region' == $type ) {
			if( ! in_array( $value, array( 'regionfeatured', 'misha335' ) ) ){ // для регионов отключаем всё, кроме regionfeatured и misha335
    				unset( $sizes[ $key ] );
    			}
		} else {
			if( 'thumbnail' != $value ){ // отключаем всё, кроме thumbnail
    				unset( $sizes[ $key ] );
    			}
		}
	}
	return $sizes;
}