Телеграм: @camouf_ru Почта: mihail@bazarow.ru

Изменить размер картинок на лету в битрикс

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

Встала задачка: на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздела дизайн. Само собой, перезаливать все картинки и лень и долго и глупо. Можно воспользоваться стандартной функцией битрикс CFile::ResizeImage и изменить размеры картинок на лету.

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

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

Параметры масштабирования и обрезки можно установить такими переменными

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

    Михаил Базаров 26.03.2016
    Цитата
    Александр написал:
    Здравствуйте Михаил! а есть у Вас решение сделать в bitrix увеличить фото по клику, как на официальном сайте bitrix   http://www.1c-bitrix.ru/products/cms/index.php
    С уважением
    Просто подключите любой плагин, типа fancybox, и сверстайте под ваш дизайн. Тут особо и делать нечего
    Артур 04.08.2016
    А подскажите как убрать ресайз картинок у товаров в корзине??
    что только не пробовал..
    в корзине путь к картинки идет - /upload/resize_cache/iblock/e72/110_110_1/e725ae01607c4b21b1­4ffec17cc92c26.jpg
    в детальной карточке - /upload/iblock/e7b/e7bc22e91cd29476877ec0137f9adc0d.jpg - нет /resize_cache/

    нужно сделать везде как в карточки.
    Борис Лобода 22.04.2017
    Михаил, подскажите, как поменять название папки в которую resizer картинки кладет, например /300_250_ или /400_300_. Проблема возникает с блокировщиками рекламы, в правилах фильтрации изображений у них присутствуют такого вида папки. Может какой-то другой выход есть?
    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
    Цитата
    Макс Терещенко написал:
    Добрый день
    Если используется эта функция имеет смысл использовать сервис  Optipic  ?
    В принципе да, еще подсожмет.
    Но я от сервиса отказался, он мне визуально много картинок подпортил.
    Алексей Клёнин 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
    Цитата
    Алексей Клёнин написал:
    Добрый день.
    Столкнулся со следующей проблемой.

    Всё почти-что здорово работает, но иногда на некоторых страницах при первой загрузке выводится вместо первой большой картинки на весь экран, маленькая. Отресайзенная (оу щит, сори за такой слэнг) до размеров которые мы задали ранее. Хотя по логике должна выводится большая и далее миниатюры.
    Это вам нужно поразбираться с самой фоторамой, быть может не успевает отработать на странице, при ее загрузке.
    Александр Коваленко 06.11.2019
    Получается при уменьшении картинки на лету имея входное изображение 1.jpg при вызове ресайза создастся 2.jpg и покажет его. Тут все класс. А как насчет кеширования заресайзенных картинок связь 1.jpg и 2.jpg где-то сохраняется? Или же при обновлении страницы опять таки из базы приходит ссылка на 1.jpg уменьшение на лету делает из нее 3.jpg такую же как и 2.jpg и отображает уже новую превьюшку. И так получается после каждого обновления будут создаваться новые картинки, а старые, такие же, просто неконтролируемо заполнять место на сервере.
    Михаил Базаров 07.11.2019
    Цитата
    Александр Коваленко написал:
    И так получается после каждого обновления будут создаваться новые картинки, а старые, такие же, просто неконтролируемо заполнять место на сервере.
    Не должны. Если не меняется исходная картинка- то ее обработанная копия, лежит в /upload/resize_cache - и всегда отдается одна и та же.
    Если обновится исходная, то создастся новая копия. Старые удалятся если сбросите кеш сайта.

Записная книжка разработчика

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

Как вывести свойства инфоблока по отдельности и немного плюшек не в т... Просмотров: 105359 Если у инфоблока несколько свойств- то при выводе их всех, скажем в детальном описании нов... Denwer c PHP 7.1.8 и MYSQL 5.7 оптимизированный для Битрикс Просмотров: 29478 В последнее время, все чаще приходиться работать на Windows, хотя и не люблю эту ОС- с точ... Подключение мобильной версии шаблона Битрикс сайта, с автопереключени... Просмотров: 42247 Предпочитаю, что бы сайт не грузил кучу скриптов и стилей. При загрузке адаптивного шаблон... Автоматическая загрузка каталогов из csv файлов в Битрикс Просмотров: 10610 Если требуется настроить автоматический импорт каталогов из csv файлов, от поставщиков. В... Запретить изменения описаний товаров при выгрузке из 1С УТ на сайт Просмотров: 16837 При разработке сайтов на Битрикс, с интеграцией с 1С Управление Тороговлей, нужно запретит... Глобальные фильтры на всякие случаи жизни Просмотров: 44460 Глобальный фильтр, нужен чаще всего, для вывода определенных элементов, из общего массива... Вывести множественное свойство типа файл с названием и весом файла в ... Просмотров: 20138 В этой заметке расскажу как красиво вывести множественное свойство типа файл в инфоблоке 1... Автоматически отгрузить заказ и сменить статус отгрузки, при выполнен... Просмотров: 320 Проблема: Заказы, на сайте, обрабатываются только в 1С. При этом 1С не работает с отгрузка... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 744 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Цвета торговых предложений из Highload инфоблоков в списке товаров Просмотров: 14065 Подвернулся на доработку очень старый сайт, работал еще на 11-ой версии Битрикс. Выполнили... Вывести производителей на сайте с отбором его товаров из каталога Просмотров: 18190 Достаточно частая задачка для каталога или интернет-магазина: вывести список производителе... Установить цену товара из свойства инфоблока Просмотров: 8674 На одном из проектов, нужно было единоразово заполнить цены товаров из свойства инфоблока... Если предложение SKU в корзине, поменять кнопку добавления на "В корз... Просмотров: 3112 Данная заметка является дополнением к ранее опубликованной: Есл... Минимальная сумма заказа в корзине и оформлении заказа в 1С-Битрикс Просмотров: 8435 В этой заметке добавим возможность установки минимальной суммы заказа, в новом шаблоне кор... Модифицировать состав заказа #ORDER_LIST# в почтовом событии "Новый з... Просмотров: 28401 Если вы хотите как-то по особенному сверстать состав заказа в почтовом уведомлении 1С-Битр... Основные функции вывода в шаблонах Битрикс Просмотров: 155253 Знаю, что все их знают. Но иногда не бывает лишним собрать все самое используемое в одну к... Менять большую картинку, при клике на маленькую, в детальной карточке Просмотров: 1749 Мини скриптик, может кому пригодится для каталога товаров или новостей при использовании д... Ленивая подгрузка картинок в компоненте, на vue js Битрикс Просмотров: 9424 Если на одну страницу сайта выводится большое количество картинок, которые могут долго под... Вывести общее количество товаров в шаблоне корзины 1С-Битрикс Просмотров: 5685 Задача: вывести общее количество товаров в корзине (именно количество единиц товара, а не ... Вывод элементов с помощью API битрикс Просмотров: 22370 Иногда, выводить элементы инфоблока с помощью компонентов, может оказаться избыточным. Нап...