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

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

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

Встала задачка: на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздела дизайн. Само собой, перезаливать все картинки и лень и долго и глупо. Можно воспользоваться стандартной функцией битрикс 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-го года пишу заметки по разработке сайтов на Битрикс.
Вы можете задавать уточняющие вопросы в комментариях- отвечаю или дополняю заметки по возможности.

Вывести разделы инфоблока по первым буквам не меняя структуру каталог... Просмотров: 2502 Например: у нас есть инфоблок с большим количеством разделов. И мы хотим, на сайте разбить... Снять ограничение на количество символов в комментарии к заказу магаз... Просмотров: 12604 Как многим известно, в интернет-магазине на Битрикс имеется ограничение на количество симв... Вывести новости из конкретного раздела инфоблока Битрикс Просмотров: 55236 Бывает что требуется вывести конкретные новости или статьи из одного раздела инфоблока в Б... Сравнение двух типов цен для иммитации системы скидок, в Битрикс Просмотров: 6819 Встала задачка, иммититровать систему скидок в интернет магазине на Битрикс. Из 1С-УТ, на ... Memcached на сайте под управлением битрикс, при использовании Веб Окр... Просмотров: 7819 Если вам важна скорость отдачи сайта, а у вашего сервера медленный диск для использования ... Вывод даты создания элемента в правильном формате в Битрикс Просмотров: 23239 Если нужно вывести дату создания новости, статьи или товара в каталоге, в принципе любого ... Перенос Битрикс сайта с хостинга на хостинг, инструкция Просмотров: 27390 Достаточно часто спрашивают как перенести сайт работающий на 1С Битрикс с одного хостинга ... Подключение jquery из ядра битрикс и объединение своих скриптов в оди... Просмотров: 20892 Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие г... Создание PWA для сайта на 1С-Битрикс Просмотров: 3266 Технология PWA позволяет создать приложение для любого сайта. Не обязательно работающего ... Ссылка и название раздела в списке новостей Битрикс Просмотров: 11467 Если нужно вывести название раздела инфоблока в котором находится конкретный элемент/новос... Малая корзина Битрикс, упрощенный шаблон Просмотров: 13606 Шаблон малой корзины битрикс, который можно вывести в боковом разделе шаблона или в шапке ... Добавление и удаление из сравнения на AJAX: Битрикс Просмотров: 18757 Рецепт лежал у меня в закромах, почти о нем и забыл, но тут подвернулся под руку- решил оп... Настройка обмена между 1С:Предприятие и магазином на "1С-Битрикс24: И... Просмотров: 3430 В этой заметке расскажу как настроить синхронизацию между 1С:предприятие и "1С-Битрикс24: ... Адаптивное гамбургер меню для битрикс Просмотров: 15139 Заметка коротенькая, но решил оставить ее - так как самому часто нужно нечто подобное. В а... FTP доступ на Виртуальной машине Битрикс Просмотров: 17247 Бывает что нужно открыть FTP доступ к заранее известной папке на сайте под управлением 1С ... Добавить свойство в административную форму заказа Просмотров: 3759 Задача, кастомизировать административную форму заказа: добавить свойство заказа в шапку фо... Композитный сайт на 1С-Битрикс Просмотров: 3600 Для новых клиентов: Все новые проекты будут включать в себя применение технологии "Компози... Сгенерировать скидочные купоны, при заказе и отправить на почту Просмотров: 1693 Задача: после того как пользователь сделал заказ, нужно сгенерировать одноразовые купоны д... Самодельная форма добавления элемента на API Битрикс Просмотров: 45278 Компонент iblock.element.add.form написан таким образом, что вы не сможете (не попотев изр... Как подобрать редакцию Битрикс под задачи Просмотров: 7019 Последнее время, все чаще, при общении с заказчиками, сталкиваюсь с вопросом "— К...