Обрезка (уменьшение) картинки из свойств инфоблока перед выводом

  • 1066
   
Разделы

Я не претендую на право называться автором всей размещенной здесь информации, так как некоторые моменты были заимствованы в доступных источниках и немного переработаны для удобства пользования.


По возможности указываю ссылки на источники.


Копируйте, комментируйте, переделывайте, пользуйтесь. Кому не жалко, оставляйте ссылку на источник.

Частный вебмастер по разработке сайтов на 1С Битрикс и WordPress

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

Пример того, как выглядит метод:

CFile::ResizeImageGet(идентификатор файла, size, метод масштабирования, флаг)

  • идентификатор файла - можно получить из результирующего массива типа $arResult ($arResult ["PROPERTIES"]["ATT_IMG"]["VALUE"])
  • size – здесь задается ширина и высота конечного, уменьшенного файла в виде Array("width" => 300, "height" => 150)
  • метод масштабированияBX_RESIZE_IMAGE_EXACT (масштабирует в прямоугольник size c сохранением пропорций, обрезая лишнее), BX_RESIZE_IMAGE_PROPORTIONAL (масштабирует с сохранением пропорций, размер ограничивается size), BX_RESIZE_IMAGE_PROPORTIONAL_ALT (масштабирует с сохранением пропорций за ширину при этом принимается максимальное значение из двух указанных в size)
  • флаг – True (возвращает в результирующий массив размеры уменьшенной картинки), false (не возвращает)

Примеры применения метода CFile::ResizeImageGet()

Вывод одной обрезанной картинки
<!-- Вывод одной обрезанной картинки -->
<?
// получаем идентификатор картинки
$image = $arResult["PROPERTIES"]["ATT_IMG"]["VALUE"];
// обрезаем
$crop_image = CFile::ResizeImageGet($image, Array("width" => 300, "height" => 150), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, false);
?>
<!-- выводим уменьшенную картинку -->
<img src="<?=$crop_image["src"]?>" alt="" />
Вывод массива обрезанных картинок
<!-- Вывод массива обрезанных картинок -->
<?foreach($arResult["PROPERTIES"]["ATT_IMG"]["VALUE"] as $image):?>
<div class="image">
<!-- обрезаем картинку -->
<?$crop_image = CFile::ResizeImageGet($image, Array("width" => 300, "height" => 150), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, false); ?>
<!-- выводим уже обрезанную картинку -->
<img src="<?=$crop_image["src"]?>" alt="" />
</div>
<?endforeach?>
Вывод альбома fancybox c автоматической обрезкой картинок
<!-- Вывод альбома fancybox c автоматической обрезкой картинок -->
<?foreach($arResult["PROPERTIES"]["ATT_IMG"]["VALUE"] as $image):?>
<div class="image">
<!-- выводим ссылку с оригинальной картинкой -->
<a href="<?=CFile::GetPath($image);?>" data-fancybox="gallery" data-caption="">
<!-- обрезаем картинку -->
<?$crop_image = CFile::ResizeImageGet($image, Array("width" => 300, "height" => 150), BX_RESIZE_IMAGE_PROPORTIONAL_ALT, false); ?>
<!-- выводим уже обрезанную картинку -->
<img src="<?=$crop_image["src"]?>" alt="" />
</a>
</div>
<?endforeach?>

Комментарии

Комментарий отправлены на валидацию!