В свойствах Элемента Инфоблока мы создали свойство типа Файл, чтобы прикрепить изображение, но оно идет без превью с масштабированием. Сегодня мы решим эту проблему.
Пользователь часто загружает изображение в 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’];
?>
Метод уменьшает картинку и размещает уменьшенную копию в папку /upload/resize_cache/путь. Один раз уменьшив изображение получаем физический файл, который позволяет при последующих обращениях не проводить операции по уменьшению изображения. При следующем вызове метод вернет путь к уменьшенному файлу. Статический метод.
Встала задачка: на собственном сайте, уменьшить размер превьюшек картинок у анонсов раздела дизайн. Само собой, перезаливать все картинки и лень и долго и глупо. Можно воспользоваться стандартной функцией битрикс CFile::ResizeImage и изменить размеры картинок на лету
Для того, чтобы отресайзерить уже загруженные изображения в нужном месте шаблона компонента, вставляем:
Параметры масштабирования и обрезки можно установить такими переменными
— BX_RESIZE_IMAGE_EXACT — масштабирует в прямоугольник $arSize c сохранением пропорций, обрезая лишнее (в примере выше именно оно);
— BX_RESIZE_IMAGE_PROPORTIONAL — масштабирует с сохранением пропорций, размер ограничивается $arSize;
— BX_RESIZE_IMAGE_PROPORTIONAL_ALT — масштабирует с сохранением пропорций за ширину при этом принимается максимальное значение из высоты/ширины, размер ограничивается $arSize, улучшенная обработка вертикальных картинок.
Вот и все. В итоге новые, отресайзенные картинки попадут в папку /upload/resize_images и сами применятся в шаблоне.
Источник: