Разное

Bitrix кадрирование изображений: Карта сайта

Содержание

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

Оцените материал

  • 1
  • 2
  • 3
  • 4
  • 5

(2 голосов)

Как известно, в элементах инфоблока 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 border="0" src="/<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"PREVIEW_PICTURE"]["WIDTH"]?>"PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>" /></a>	
      <?else:?>
		<img border="0" src="/<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"PREVIEW_PICTURE"]["WIDTH"]?>"PREVIEW_PICTURE"]["HEIGHT"]?>" alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>" />
      <?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"]?>"PREVIEW_PICTURE"]["SRC"]?>) no-repeat 50% 50%;margin:0 4px 6px 0;"></a>
	<?else:?>
		<spanPREVIEW_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.

Другие материалы в этой категории: « Проблема с выгрузкой цен из «1С» на сайт Устанавливаем разные значения заголовков у окна браузера и на странице »

Наверх

Категории блога

  • Битрикс (40)
  • HTML-верстка (54)
  • Joomla (18)
  • JavaScript, jQuery (26)
  • PHP (10)
  • Базы данных (5)
  • Разное (23)

Мои услуги

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

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

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

Скачать

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

  • Шаблон документа HTML5 (zip, 35.
    41 Кб)
  • Шаблон jQuery-плагина (zip, 426 байт)
  • Шаблон сайта 1С-Битрикс (zip, 3.11 Кб)

Полезное