Bx resize image proportional alt

В свойствах Элемента Инфоблока мы создали свойство типа Файл, чтобы прикрепить изображение, но оно идет без превью с масштабированием. Сегодня мы решим эту проблему.

Пользователь часто загружает изображение в 1-2Мб и шириной 2000-3000рх, т.е. прямо с фотоаппарата, например. В таком случае вообще лучше и большое фото урезать, но про него не в этой статье. Сегодня речь пойдет о превью, чтобы создать галерею или еще что либо, чтобы Посетитель мог посмотреть на все фото в уменьшенном размере.

Как это делается.

У Битрикс есть функция, недоступная простому Администратору сайта в визуальном офомлении — CFile::ResizeImageGet. С ее помощью мы все и сделаем.

Заходим в наш шаблон Инфоблока, например, news.list и в том месте, где нам нужно вывести превью картинки, из того самого свойства типа Файл, вставляем нашу функцию обработки:

152, ‘height’=>207), BX_RESIZE_IMAGE_EXACT, true);
$img = $file[‘src’];
?>

Чтобы понять, как это работает, то эта функция масштабирует и копирует фото в директорию /upload/resize_cache/путь/. После создания эта функция уже будет работать как вывод нашего превью из директории с превью.

Остальное, думаю, понятно. Задаем нужную ширину и высоту, у меня они 152 и 207, далее идет параметр, который можно менять на:

BX_RESIZE_IMAGE_EXACT — масштабирует без сохранения пропорций, т.е. обрежит фото, но сначала сожмет его по наименьшей стороне. Удобно, если нужно вывести превью все одинакового размера. Именно это я использовал в своем примере.
BX_RESIZE_IMAGE_PROPORTIONAL — масштабирует с сохранением пропорций;
BX_RESIZE_IMAGE_PROPORTIONAL_ALT — масштабирует с сохранением пропорций, улучшенна обработка вертикальных картинок.

Для массива изображений используем следующий код:

157, ‘height’=>207), BX_RESIZE_IMAGE_EXACT, true);
$img1 = $file[‘src’];
?>

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

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

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

Вот и все. В итоге новые, отресайзенные картинки попадут в папку /upload/resize_images и сами применятся в шаблоне.

Добрый день.
Подскажите как в этот код подставить картинку с поля IMG_MINI "привязка к файлу на сервере"

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

Подозреваю что нужно менять что- то тут .$renderImage["src"]. но не пойму что именно и как. Нужно чтобы у картинки сохранялись пропорции. Спасибо за ответ.

А подскажите как убрать ресайз картинок у товаров в корзине??
что только не пробовал..
в корзине путь к картинки идет — /upload/resize_cache/iblock/e72/110_110_1/e725ae01607c4b21b1 ­4ffec17cc92c26.jpg
в детальной карточке — /upload/iblock/e7b/e7bc22e91cd29476877ec0137f9adc0d.jpg — нет /resize_cache/

нужно сделать везде как в карточки.

Добрый день.
Столкнулся со следующей проблемой.

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

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

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

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

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

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

Заметки разработчика

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

Недавно я опубликовал заметку, в которой рассмотрел бесплатную панель управления хостингом: Vestа CP. Рассказал как установить ее на виртуальную машин.

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

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

Данный способ защиты не панацея, и скорее всего не спасет от профессиональной DDoS атаки, когда ваш сервер на CentOS подвергается запросам от множеств.

В этой видео-заметке расскажу как установить и оптимизировать панель управления сервером BrainyCp для использования в связке с 1С-Битрикс. Проведем ба.

Если вы хотите как-то по особенному сверстать состав заказа в почтовом уведомлении 1С-Битрикс "Новый заказ", у вас это не получится, так как переменна.

© 2011—2019 Разработка сайтов: ИП Базаров, ОГРНИП: 315784700173692.
Работает на 1С-Битрикс: Бизнес.
Сайт может содержать материалы 18+ Политика конфиденциальности

Информация на сайте, не является публичной офертой.
Копирование материалов сайта запрещено.
Дизайн, верстка и сборка сайта: Михаил Базаров

Метод уменьшает картинку и размещает уменьшенную копию в папку /upload/resize_cache/путь. Один раз уменьшив изображение получаем физический файл, который позволяет при последующих обращениях не проводить операции по уменьшению изображения. При следующем вызове метод вернет путь к уменьшенному файлу. Статический метод.

Параметры

Возвращаемое значение

Метод возвращает массив вида:

Примеры использования

Наложить водяной знак можно таким образом:

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Случалось, что автоматически инициализируемый фильтр sharpen оставлял артефакты на PNG с прозрачностью. Чтобы избежать этого, можно задать precision равным нулю

Если исходная картинка меньше, чем необходимо ужать, то в папку /upload/resize_cache/ ничего не попадает. Соответственно $file тоже пустой и картинка может не появляться. Приходится проверять попало ли что-то в массив:

Ресайз и вывод дополнительных фотографий элементов (more_photo):

Ещё один пример "динамическое масштабирование изображения средствами сервера"

——
ReturnSizes — не входит в поставку битрикс, собственная функция (легко пишется по вашим требованиям)