Меню

Изменить размер картинок по ID файла, в 1C-Битрикс

Просмотров: 58753

Задача: изменить размер картинок загруженных в элементы инфоблока, для оптимизации их размера и подгонки под содержимое. Для этого можно воспользоваться стандартной функцией битрикс CFile::ResizeImage и изменить размеры картинок на лету.

Для того, чтобы изменить уже загруженные изображения в нужном месте шаблона компонента (новостей или каталога), вставляем:

<?$renderImage = CFile::ResizeImageGet(
    $arItem['PREVIEW_PICTURE'],
    Array(
       'width' => НОВАЯ_ШИРИНА,
       'height' => НОВАЯ_ВЫСОТА
    ),
    BX_RESIZE_IMAGE_EXACT,
    false
);?>
<img src="<?=$renderImage["src"]?>">

В качестве первого параметра передается массив описания файла или его ID (если массив еще не сформирован и у вас есть только ID). Не обязательно использовать именно в инфоблоках, в любом месте где можете получить ID картинки/файла через API - можно использовать CFile::ResizeImageGet Параметры масштабирования и обрезки можно установить c помощью:

  • BX_RESIZE_IMAGE_EXACT - масштабирует в прямоугольник c сохранением пропорций, обрезая лишнее (в примере выше именно оно);
  • BX_RESIZE_IMAGE_PROPORTIONAL - масштабирует с сохранением пропорций, размер ограничивается указанными width и height;
  • BX_RESIZE_IMAGE_PROPORTIONAL_ALT - масштабирует с сохранением пропорций за ширину при этом принимается максимальное значение из высоты/ширины, размер ограничивается $arSize, улучшенная обработка вертикальных картинок.
В итоге отмасштабированные картинки сохранятся в директории /upload/resize_images/. При переносе сайта на новый хостинг эту директорию можно не копировать, при первом запросе картинки снова перемасштабируются.

Параметры метода CFile::ResizeImageGet:

array CFile::ResizeImageGet(
    mixed file,
    array arSize,
    const resizeType = BX_RESIZE_IMAGE_PROPORTIONAL,
    bool bInitSizes = false,
    array arFilters = false,
    bool bImmediate = false,
    bool jpgQuality = false
);
  • file Идентификатор файла из таблицы b_file или массив описания файла (Array(FILE_NAME, SUBDIR, WIDTH, HEIGHT, CONTENT_TYPE)), полученный методом GetFileArray.
  • Size Массив в виде Array("width"=>WIDTH, "height"=>HEIGHT) со значениями ширины и высоты для уменьшаемой картинки. Оба ключа обязательны.
  • resizeType Тип масштабирования:
  • InitSizes Флаг возвращения в результирующем массив размеров измененной картинки. True - возвращает, false - нет
  • Filters Массив массивов для постобработки картинки с помощью фильтров.
  • Immediate Флаг передается в обработчик события OnBeforeResizeImage, по смыслу означает масштабирование непосредственно при вызове метода. Обработчик в принципе может выполнять отложенное масштабирование.
  • jpgQuality Число, устанавливающее в процентах качество JPG при масштабировании. Чем больше значение, тем выше качество и больше размер файла изображения.

Наложение водяного знака на картинки

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

$renderImage = CFile::ResizeImageGet(
    $arItem['DETAIL_PICTURE'],
    Array(
       'width' => 400,
       'height' => 400
    ),
    BX_RESIZE_IMAGE_EXACT,
    true,
    array(
		'name" => 'watermark',
		'position" => "bottomright", // Положение снизу справа
		'type" => 'image',
		'size" => 'real',
		'file" => $_SERVER['DOCUMENT_ROOT'] . '/upload/copy.png', // Путь водяному знаку
		'fill" => "exact",
	),
    false,
    false,
    90 // Потеря визуально не заметна на jpeg-ах но ощутимо уменьшает вес
);
Александр 25.03.2016
Здравствуйте Михаил! а есть у Вас решение сделать в bitrix увеличить фото по клику, как на официальном сайте bitrix  
Михаил Базаров 26.03.2016
Просто подключите любой плагин, типа fancybox, и сверстайте под ваш дизайн. Тут особо и делать нечего
Артур 04.08.2016
А подскажите как убрать ресайз картинок у товаров в корзине??
что только не пробовал..
в корзине путь к картинки идет - /upload/resize_cache/iblock/e72/110_110_1/e725ae01607c4b21b1­4ffec17cc92c26.jpg
в детальной карточке - /upload/iblock/e7b/e7bc22e91cd29476877ec0137f9adc0d.jpg - нет /resize_cache/

нужно сделать везде как в карточки.
almix 30.11.2017
Здравствуйте, Михаил, создание превью изображений этой функцией. Но получаемые превью оказываются с артефактами - белый цвет иногда заменяется соседним f4f4f4, из-за этого картинка становится неяркой.
Код
$arFile = CFile::GetFileArray($arItem['PREVIEW_PICTURE']['ID'];
    $imgWidth = $imgHeight = 260;
    $arrImage = CFile::ResizeImageGet(
        $arFile,
        array("width" => $imgWidth, "height" => $imgHeight),
        BX_RESIZE_IMAGE_EXACT,
        true, 
        array("name" => "sharpen", "precision" => 100),//array(),//$arFilter
        false,
        100
    );
Но любые изменения в её параметрах не влияют на итог, думаю дело в работе gd. Нашёл такой вариант решения - http://mithrandir.ru/professional/php/gd-resizing-artefacts-fix.html, но может в битриксе есть настройки для этого?
Макс Терещенко 30.03.2018
Добрый день
Если используется эта функция имеет смысл использовать сервис Optipic ?
Михаил Базаров 30.03.2018
В принципе да, еще подсожмет.
Но я от сервиса отказался, он мне визуально много картинок подпортил.  
Алексей Клёнин 24.10.2018
Добрый день.
Столкнулся со следующей проблемой.

Есть задача вывести несколько изображений в детальной новости. Для этого дела используем fotorama.

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

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

Что я делаю не так?

Вот, код всего этого действа

Код
<div class="col-12 p-0 fotorama"
         data-nav="thumbs" data-thumbwidth="250" data-thumbheight="141" data-allowfullscreen="true">
      <? 
      // additional photos 
      if(count($arResult["MORE_PHOTO"])>0):?> 
      <?foreach($arResult["MORE_PHOTO"] as $PHOTO):?>
      <? $file = CFile::ResizeImageGet($PHOTO, array('width'=>'250', 'height'=>'141'), BX_RESIZE_IMAGE_EXACT, true); ?>
      <a href="<?=$PHOTO["SRC"]?>"> 
      <img border="0" src="<?=$file["src"]?>"   alt="<?=$arResult["NAME"]?>" title="<?=$arResult["NAME"]?>" /> 
      </a> 
      <?endforeach?> 
      <?endif?>
    </div>
Михаил Базаров 24.10.2018
Это вам нужно поразбираться с самой фоторамой, быть может не успевает отработать на странице, при ее загрузке.

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

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

Разработка интернет-магазина с максимальной оптимизацией от 350 000 руб.
от 4-х недель

Cоздание интернет-магазина на 1С-Битрикс. Разработка с нуля, оптимизация кода и производительности под конкретный проект и требования. Реализация любого функционала без ограничений готовых решений.

Запуск интернет-магазина на готовом решении от 60 000 руб.
от 7-ми дней

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

Мобильное приложение от 400 000 руб.
от 1-го месяца

Разработка кроссплатформенного мобильного приложения, которое не уступает нативным решениям как в производительности, так и пользовательском опыте. Публикуется в AppStore, GooglePlay и RuStore

Опросник на разработку. После ознакомления, задам уточняющие вопросы и оценю проект по стоимости и срокам разработки.