Масштабирование картинки в свойстве элемента типа Файл
В свойствах Элемента Инфоблока мы создали свойство типа Файл, чтобы прикрепить изображение, но оно идет без превью с масштабированием. Сегодня мы решим эту проблему.
Пользователь часто загружает изображение в 1-2Мб и шириной 2000-3000рх, т.е. прямо с фотоаппарата, например. В таком случае вообще лучше и большое фото урезать, но про него не в этой статье. Сегодня речь пойдет о превью, чтобы создать галерею или еще что либо, чтобы Посетитель мог посмотреть на все фото в уменьшенном размере.
Как это делается.
У Битрикс есть функция, недоступная простому Администратору сайта в визуальном офомлении - CFile::ResizeImageGet. С ее помощью мы все и сделаем.
Заходим в наш шаблон Инфоблока, например, news.list и в том месте, где нам нужно вывести превью картинки, из того самого свойства типа Файл, вставляем нашу функцию обработки:
<!--Функция ресайза -->
<?$resizer = $arItem['PROPERTIES']['НАЗВАНИЕ_СВОЙСТВА']['VALUE'];
$file = CFile::ResizeImageGet($resizer, array('width'=>152, 'height'=>207), BX_RESIZE_IMAGE_EXACT, true);
$img = $file['src'];
?>
<!--Вывод нашей картинки с ссылкой на оригинал -->
<a href="<?= $arItem["DISPLAY_PROPERTIES"]["НАЗВАНИЕ_СВОЙСТВА"]["FILE_VALUE"]["SRC"]." "; ?>"><img src="<?=$img;?>" />
Чтобы понять, как это работает, то эта функция масштабирует и копирует фото в директорию /upload/resize_cache/путь/. После создания эта функция уже будет работать как вывод нашего превью из директории с превью.
Остальное, думаю, понятно. Задаем нужную ширину и высоту, у меня они 152 и 207, далее идет параметр, который можно менять на:
BX_RESIZE_IMAGE_EXACT - масштабирует без сохранения пропорций, т.е. обрежит фото, но сначала сожмет его по наименьшей стороне. Удобно, если нужно вывести превью все одинакового размера. Именно это я использовал в своем примере.
BX_RESIZE_IMAGE_PROPORTIONAL - масштабирует с сохранением пропорций;
BX_RESIZE_IMAGE_PROPORTIONAL_ALT - масштабирует с сохранением пропорций, улучшенна обработка вертикальных картинок.
Для массива изображений используем следующий код:
<!-- Условие, что если условие не содержит данных, код не выполнять -->
<?php if ($arItem["PROPERTIES"]["НАЗВАНИЕ_СВОЙСТВА"]["VALUE"]) {?>
<!-- Далее идет цикл с нашей функцией создания превью -->
<?foreach($arItem["PROPERTIES"]["НАЗВАНИЕ_СВОЙСТВА"]["VALUE"] as $resizer):?>
<?
$file = CFile::ResizeImageGet($resizer, array('width'=>157, 'height'=>207), BX_RESIZE_IMAGE_EXACT, true);
$img1 = $file['src'];
?>
<!-- Выводим наше изображение с ссылкой на большое -->
<a href="<?=CFile::GetPath($resizer); ?>"><img src="<?=$img1;?>" /></a>
<?endforeach?>
<?php }?>
Количество показов: 11888
