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

Просмотров: 28210 | Комментариев: 11

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


20.08.2014
Добрый день,
возник вопрос по методу ResizeImageGet
если его использовать для обрезки изображений (соответственно с параметром BX_RESIZE_IMAGE_EXACT)
например: $file = CFile::ResizeImageGet(
                       $arItem["DETAIL_PICTURE"]["ID"],
                       array('width' => $newWidth, 'height' => $newHeight),
                       BX_RESIZE_IMAGE_EXACT);
можно ли сделать обрезку со смещением, т.е. "отступить" верха изображения n пикселей и наложить обрезку?  
04.12.2014
Добрый день.
Подскажите как в этот код подставить картинку с поля IMG_MINI "привязка к файлу на сервере"

Так не сохраняет пропорции


Код
$renderImage = CFile::ResizeImageGet($arItem["IMG_MINI"], Array("width" => '250px', "height" => '117px'), BX_RESIZE_IMAGE_EXACT, false); 
      echo '<a href="'.$arItem["DETAIL_PAGE_URL"].'"><img class="img" alt="'.$arItem["NAME"].'" src="'.$arItem["PROPERTIES"]["IMG_MINI"] ["VALUE"].'" /></a>';



Подозреваю что нужно менять что- то тут .$renderImage["src"]. но не пойму что именно и как. Нужно чтобы у картинки сохранялись пропорции. Спасибо за ответ.
02.02.2015
У меня не выводится alt у картинки, что с этим делать?
25.03.2016
Здравствуйте Михаил! а есть у Вас решение сделать в bitrix увеличить фото по клику, как на официальном сайте bitrix  http://www.1c-bitrix.ru/products/cms/index.php
С уважением
Михаил 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_. Проблема возникает с блокировщиками рекламы, в правилах фильтрации изображений у них присутствуют такого вида папки. Может какой-то другой выход есть?
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 - и всегда отдается одна и та же.
Если обновится исходная, то создастся новая копия. Старые удалятся если сбросите кеш сайта.
Обсудить статью на форуме

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

Вывести разделы инфоблока в которых находится элемент Битрикс

Достаточно часто, нужно в карточке товара или новости, вывести структуру разделов в котором находится элемент. С одной стороны, это умеет делать компо...

Связанные элементы в карточке товара, с помощью catalog.section

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

Автоматически помечаем новинки лейблом в каталоге битрикс

Данная заметка, является дополнением к написанной ранее. Если вы хотите помечать новинки каталога, вашего магазина на Битрикс, лейблом "Новинка". И та...

Увеличение диска на готовой виртуальной машине Битрикс

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

Умный фильтр только на последнем уровне разделов каталога.

Если в разработаываемом магазине или в принципе в каталоге на Битрикс, вы выводите умный фильтр в разделах - он выводится во всех разделах и подраздел...

Как подобрать редакцию Битрикс под задачи

Последнее время, все чаще, при общении с заказчиками, сталкиваюсь с вопросом "— Какая редакция 1С-Битрикс нужна для нашего сайта?". Сравнительна...

Показать еще
Авторизация
Напомнить пароль Зарегистрироваться
Быстрый вход через соц. сеть