Блог специалистов
05.02.2013

Масштабирование картинки в свойстве элемента типа Файл

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

Пользователь часто загружает изображение в 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 }?>


Количество показов: 6361




Возврат к списку