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, улучшенная обработка вертикальных картинок.

Читайте также:  Microsoft net framework не запускается

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

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

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

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

Цитата
Александр написал:
Здравствуйте Михаил! а есть у Вас решение сделать в bitrix увеличить фото по клику, как на официальном сайте bitrix http://www.1c-bitrix.ru/products/cms/index.php
С уважением

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

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

Цитата
Макс Терещенко написал:
Добрый день
Если используется эта функция имеет смысл использовать сервис Optipic ?

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

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

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

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

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

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

Цитата
Алексей Клёнин написал:
Добрый день.
Столкнулся со следующей проблемой.

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

Читайте также:  В таблице эксель вместо цифр формула

Цитата
Александр Коваленко написал:
И так получается после каждого обновления будут создаваться новые картинки, а старые, такие же, просто неконтролируемо заполнять место на сервере.

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

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

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

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

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

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

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

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

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

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

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

Параметры

Параметр Описание С версии
file Идентификатор файла из таблицы b_file или массив описания файла (Array(FILE_NAME, SUBDIR, WIDTH, HEIGHT, CONTENT_TYPE)), полученный методом GetFileArray.
Size Массив в виде Array("width"=>WIDTH, "height"=>HEIGHT) со значениями ширины и высоты для уменьшаемой картинки. Оба ключа обязательны.
resizeType Тип масштабирования:

  • BX_RESIZE_IMAGE_EXACT – масштабирует в прямоугольник $arSize c сохранением пропорций, обрезая лишнее;
  • BX_RESIZE_IMAGE_PROPORTIONAL – масштабирует с сохранением пропорций, размер ограничивается $arSize;
  • BX_RESIZE_IMAGE_PROPORTIONAL_ALT – масштабирует с сохранением пропорций за ширину при этом принимается максимальное значение из высоты/ширины, размер ограничивается $arSize, улучшенная обработка вертикальных картинок.
InitSizes Флаг возвращения в результирующем массив размеров измененной картинки. True – возвращает, false – нет
Filters Массив массивов для постобработки картинки с помощью фильтров: array(array("name" => "sharpen", "precision" => 15)). Фильтров пока один – sharpen. Задавать его не обязательно – будет инициализирован автоматом. Используется для наведения резкости у миниатюр. 10.0.4
Immediate Флаг передается в обработчик события OnBeforeResizeImage, по смыслу означает масштабирование непосредственно при вызове метода. Обработчик в принципе может выполнять отложенное масштабирование. 12.0.10
jpgQuality Число, устанавливающее в процентах качество JPG при масштабировании. Чем больше значение, тем выше качество и больше размер файла изображения. 12.5.0
Читайте также:  Aerocool aero 800 отзывы

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

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

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

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

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

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

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

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

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

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

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

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

Код

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector