Матвей Земсков

Заметки веб-мастера

Четверг, 04 июля 2013 14:35

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

Оцените материал
(1 Голосовать)

Как известно, в элементах инфоблока 1C-Битрикс можно использовать изображения, которые будут выводиться в анонсе и подробном содержимом элементов. В настройках инфоблока можно настроить уменьшение загружаемых изображений до определенного размера по ширине и высоте. Правда, из-за соблюдения пропорций при уменьшении добиться указанного размера и по ширине, и по высоте средствами системы не представляется возможным. Это проиллюстрировано на рисунке ниже. Однако добиться желаемого размера можно попробовать другим способом – это будет сделано путем кадрирования изображений при помощи CSS, о чем я сейчас расскажу подробнее.

Уменьшение изображений средствами системы
В настройках инфоблока установлены значения 200px по ширине и 200px по высоте. Значения высоты и ширины у исходных изображений были больше чем 200px.

Сначала определимся с размерами, а также с компонентом, который будем использовать. Например, мне нужно чтобы картинки в анонсе были размером 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.

Прочитано 6836 раз
Добавить комментарий

Комментарии   

 
0 # Андрей 04.04.2015 19:57
спасибо! совет пригодился!
Ответить | Ответить с цитатой | Цитировать
 
 
0 # Матвей 13.04.2015 16:30
Пожалуйста!
Ответить | Ответить с цитатой | Цитировать
 
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: