Добавление собственных размеров изображений в загрузчик медиафайлов

Когда мы добавляем изображение в свой пост, нам предлагается выбрать размер, который следует вставить (Миниатюра, Средний, Большой, Полный). А если нам эти размеры не подходят и нужно добавить ещё один?

Во-первых, действительно ли вам не подходят стандартные размеры? Вы ведь знаете, что их параметры ширины и высоты можно изменить в Настройки > Медиафайлы?

Если ваша версия WordPress 3.5 и выше

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

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

Для этих целей нам понадобится функция add_image_size() и хук image_size_names_choose. Просто вставляем этот код в файл functions.php (тот, который находится непосредственно в директории темы), заменив все параметры на свои собственные:

1
2
3
4
5
6
7
8
9
10
11
add_image_size( 'true-fullwd', 700 );
 
add_filter('image_size_names_choose', 'true_new_image_sizes');
 
function true_new_image_sizes($sizes) {
	$addsizes = array(
		"true-fullwd" => 'По ширине контента'
	);
	$newsizes = array_merge($sizes, $addsizes);
	return $newsizes;
}

Для уже загруженных картинок новые разрешения не будут работать — в этом случае вам поможет плагин Force Regenerate Thumbnails.

Код для старых версий (WordPress 2.9 — 3.5)

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

Задача будет следующей.

До:

разрешения изображений по умолчанию в wordpress

После:

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

Приступим к реализации — сначала вставляем этот хук в functions.php:

function true_get_the_sizes() {
	$s = array('');
	global $_wp_additional_image_sizes;
	if ( isset($_wp_additional_image_sizes) && count($_wp_additional_image_sizes) ) {
		$s = apply_filters( 'intermediate_image_sizes', $_wp_additional_image_sizes );
		$s = apply_filters( 'true_get_the_sizes', $_wp_additional_image_sizes );
	}
	return $s;
}
 
function true_sizes_input_fields( $fields, $post ) {
	if ( !isset($fields['image-size']['html']) || substr($post->post_mime_type, 0, 5) != 'image' )
		return $fields;
 
	$s = true_get_the_sizes();
	if ( !count($s) )
		return $fields;
 
	$items = array();
	foreach ( array_keys($s) as $size ) {
		$l = apply_filters( 'img_sz_name', $size );
		$element_id = "image-size-{$size}-{$post->ID}";
		$ds = image_downsize( $post->ID, $size );
		$enabled = $ds[3];
		$html  = "<div class='image-size-item'>\n";
		$html .= "\t<input type='radio' " . disabled( $enabled, false, false ) . "name='attachments[{$post->ID}][image-size]' id='{$element_id}' value='{$size}' />\n";
		$html .= "\t<label for='{$element_id}' style='margin:0 0 0 2px;'>{$l}</label>\n";
		if ( $enabled )
			$html .= "\t<label for='{$element_id}' class='help'>" . sprintf( "(%d&amp;nbsp;&amp;times;&amp;nbsp;%d)", $ds[1], $ds[2] ). "</label>\n";
		$html .= "</div>";
		$items[] = $html;
	}
 
	$items = join( "\n", $items );
	$fields['image-size']['html'] = "{$fields['image-size']['html']}\n{$items}";
 
	return $fields;
}
 
add_filter( 'attachment_fields_to_edit', 'true_sizes_input_fields', 11, 2 );

Функция add_image_size()

Чтобы добавить нужный размер изображения, просто юзаем эту функцию (перейти к ее описанию и параметрам) в functions.php сразу после хука.

Пример:

add_image_size('icon', 48, 48, true);

Теперь при загрузке изображения, WordPress будет создавать в папке uploads ещё один дополнительный размер для него.

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

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

  • Демьян13 июля 2015 в 15:07 #

    Опишите подробнее про вставку кода в functions.php на версии 3.5+, что-то у меня не выходит. Да, и не плохо бы было, чтобы этот размер уже стоял по умолчанию и не нужно было в него тыкать.

    • Миша14 июля 2015 в 09:07 #

      Берёте самый первый листинг кода — вставляете в functions.php. Всё.

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

      Что касается установки размера по умолчанию — возможно это поможет.

  • Анатолий29 января 2016 в 14:01 #

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

    //Добавим в стандартныесвой размер картинки к выводу
    add_image_size( 'true-fullwd', 300, 225, true );
    add_filter('image_size_names_choose', 'true_new_image_sizes');
    function true_new_image_sizes($sizes) {
    	$addsizes = array(
    		"true-fullwd" => 'Для портфолио галереи'
    	);
    	$newsizes = array_merge($sizes, $addsizes);
    	return $newsizes;
    }

    Для добавления еще одного размера дописываю еще внизу:

    //Добавим в стандартныесвой размер картинки к выводу
    add_image_size( 'true-fullwd', 300, 225, true );
    add_filter('image_size_names_choose', 'true_new_image_sizes');
    function true_new_image_sizes($sizes) {
    	$addsizes = array(
    		"true-fullwd" => 'Для портфолио галереи'
    	);
    	$newsizes = array_merge($sizes, $addsizes);
    	return $newsizes;
    }
     
     
    //Добавим в стандартныесвой размер картинки к выводу
    add_image_size( 'true-sm', 200, 100, true );
    add_filter('image_size_names_choose', 'true_new_image_sizes');
    function true_new_image_sizes($sizes) {
    	$addsizes = array(
    		"true-sm" => 'Малый размер'
    	);
    	$newsizes = array_merge($sizes, $addsizes);
    	return $newsizes;
    }

    После этого выдает ошибку:

    Fatal error: Cannot redeclare true_new_image_sizes() (previously declared in X:\home\domen.local\www\wp-content\themes\mytheme\functions.php:407) in X:\home\domen.loc\www\wp-content\themes\mytheme\functions.php on line 425

    425 строка это последняя закрывающая скобка }

    • Миша30 января 2016 в 09:01 #

      Привет)
      Второй раз функцию не надо создавать, достаточно добавить размер в массив:

      $addsizes = array(
      		"true-fullwd" => 'Для портфолио галереи',
      		"true-sm" => 'Малый размер'
      );
      • Анатолий30 января 2016 в 13:01 #

        Понятно, спасибо.
        Я не мог найти как задать свои размеры к стандартным миниатюрам что создаются при загрузке файла в медиагалерею. Все пишут что они задаются в Настройки -> Медиафайлы, но замена там значений ничего не давало. Все равно загружались и резались на свои какие-то размеры. И все же нашел решение. Нужно просто при добавлении add_image_size в functions написать стандартные имена:

        //My size MEDIUM
        add_image_size( 'medium', 300, 225, true );
        //My size LARGE
        add_image_size( 'large', 450, 338, true );

        И теперь при загрузке картинки в стандартных именно на такие размеры и режутся.

      • Анатолий30 января 2016 в 13:01 #

        PS. А где размер-то задавать для второй свое картинки?

        $addsizes = array(
        		"true-fullwd" => 'Для портфолио галереи',
        		"true-sm" => 'Малый размер'
        );

        Здесь я вижу что просто оно в меню выбора добавится. А размер ее?

        • Миша31 января 2016 в 10:01 #

          Размер обычным способом, я просто не счёл нужным копировать весь код, но если возникли трудности, не вопрос)

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

phpjsHTMLCSSSQLПросто код
  Комментарии закрыты.