Кадрирование изображений в компонентах «1С-Битрикс».

Сначала определимся с размерами, а также с компонентом, который будем использовать. Например, мне нужно чтобы картинки в анонсе были размером 150px × 150px, а компонент будет – bitrix:news.list.

Как обычно все действия я провожу на «демо-версии для разработчиков» редакции «Стандарт». В ней по адресу /content/news/ уже размещен комплексный компонент bitrix:news, с ним и будем работать. Предварительно не забудьте добавить изображения к элементам инфоблока «Новости магазина» (ID 3). Копируем шаблон компонента в папку шаблона сайта. При копировании я назвал шаблон “crop_preview”. Теперь открываем файл /bitrix/templates/books/components/bitrix/news/crop_preview/bitrix/news.list/.default/template.php и проводим изменения в нем. После этих изменений будет происходить кадрирование изображений в анонсах ленты новостей.

Находим в коде следующий фрагмент:

PHP

<?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
	<?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
		<a href="/<?=$arItem["DETAIL_PAGE_URL"]?>"><img class="preview_picture" border="0" src="/<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>" style="float:left" /></a>	
      <?else:?>
		<img class="preview_picture" border="0" src="/<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>" height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>" style="float:left" />
      <?endif;?>
<?endif?>

И заменяем его приведенным ниже кодом

PHP

<?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
	<?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
		<a href="/<?=$arItem["DETAIL_PAGE_URL"]?>" style="float:left;width:150px;height:150px;background:url(<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>) no-repeat 50% 50%;margin:0 4px 6px 0;"></a>
	<?else:?>
		<span style="float:left;width:150px;height:150px;background:url(<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>) no-repeat 50% 50%;margin:0 4px 6px 0;"></span>
	<?endif;?>
<?endif?>

После этих действий в ленте новостей будут выводиться блоки определенного размера с изображением для анонса в качестве фона. Высота и ширина блока 150px × 150px - такая, как мы задумали в начале статьи. Кстати, можно эти данные сделать параметрами шаблона («вынести» их в файл .parameters.php, находящийся в папке шаблона компонента).

Вот так и происходит кадрирование изображений в ленте новостей с использованием CSS. Однако, есть момент на который нужно обращать внимание при добавлении новостей – это размеры уменьшенных изображений. Они не должны быть меньше размеров блока, в котором будут размещаться.

Кроме описанного выше способа, кадрировать изображения можно при помощи Bitrix Framework, а именно метода CFile::ResizeImageGet(). У этого метода есть несколько типов масштабирования. Тип масштабирования передается методу в качестве одного из параметров. Например, если указать тип ”BX_RESIZE_IMAGE_EXACT”, то в результате его работы мы получим аналогичное изображение. Только в этом случае не нужно будет делать его фоном и обрезать по границам контейнера, используя для этого CSS.