Документация для разработчиков
Темная тема

Типы нод

Описание

Как вы можете узнать из файла манифеста, существует несколько типов нод – контейнеров, в которых расположен тот или иной контент. Давайте рассмотрим какие они есть на данный момент. В примерах показано как регистрировать в манифесте в ключе nodes, и как это выглядит в верстке.

text

Обычный текстовый контент с минимум инлайнового html.

'.landing-block-node-card-title' => array(
   'name' => 'Описание',
   'type' => 'text',
),
<h2 class="landing-block-node-card-title">Company24 video</h2>

img

Изображение. Допускается как отдельным тегом (<img>), так и фоновое (как правило для тега <div>). Для данного типа необходимо также указывать рекомендуемый размер. Для чего это сделано? Картинки могут быть разные по своему предназначению. Аватарка может быть очень маленькой, а фон напротив - большим. Вместе с тем, если в аватарку контент-редакторы будут загружать огромные картинки, они очень быстро исчерпают свободное место портала, а страница будет виснуть в браузере. Поэтому авторам блока необходимо самим заботиться о декларировании данных нод. Если размер не указан, система будет приводить такие картинки к единому небольшому размеру.

    '.landing-block-node-card-bgimg' => array(
        'name' => 'Фоновая картинка',
        'type' => 'img',
        // изображение будет приведено к данному размеру
        'dimensions' => array('width' => 1920, 'height' => 1080),
        // система уменьшит изображение, только если оно превысит размер
        'dimensions' => array('maxWidth' => 1920, 'maxHeight' => 1080),
        // систему будет увеличивать изображение, пока ширина
        // или высота не будет совпадать с указанными
        'dimensions' => array('minWidth' => 1920, 'minHeight' => 1080),
    ),
<div class="landing-block-node-card-bgimg"></div>

Важно! У данного типа обязательно должен присутствовать атрибут с изображением. У тега img это атрибут src и, очевидно, он не должен быть пустым. У атрибута style (тег div) это background-image.

link

Ссылка, несет в себе текст ссылки, значение ссылки, тип ссылки (ссылка, телефон, ...), а также тип открытия (в текущем окне, новом, ...).

'.landing-block-node-card-button' => array(
   'name' => 'Кнопка',
   'type' => 'link',
),
<a href="/"
   class="landing-block-node-card-button text-uppercase btn u-btn-outline-white btn-md rounded-0">
   Read more
</a>

Если ссылка не является текстовой (например, несет в себе картинку, или что-либо еще), то следует добавить параметр skipContent, чтобы при сохранении он не изменялся.

'.landing-block-node-card-button' => array(
   'name' => 'Кнопка',
   'type' => 'link',
   'skipContent' => true
),

icon

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

'.landing-block-node-list-item-icon' => array(
   'name' => 'Иконка',
   'type' => 'icon',
),
<i class="landing-block-node-list-item-icon fa fa-instagram"></i> //класс fa-instagram отвечает за вывод иконки Инстаграмм

embed

Мультимедиа. Например, фоновое видео. При данном типе меняются только два атрибута – src и source.

'.landing-block-node-card-videobg' => array(
   'name' => 'Фоновое видео',
   'type' => 'embed',
),
<iframe
      class="landing-block-node-card-videobg bg-video__video"
      width="100%"
      src="//www.youtube.com/embed/q4d8g9Dn3ww?autoplay=1&controls=0&loop=1&mute=1&rel=0"
      data-source="https://www.youtube.com/watch?v=q4d8g9Dn3ww"
      frameborder="0"
      allowfullscreen=""></iframe>

map

Позволяет работать с селектором как с гео-картой. В данный момент поддерживаются только карты Google. В режиме редактирования позволяет легко управлять балунами.

'.landing-block-node-map' => array(
   'name' => 'Местоположение нашего офиса',
   'type' => 'map',
),
<div class="landing-block-node-map mx-auto w-100 g-min-height-430 h-100"></div>


© «Битрикс», 2001-2022, «1С-Битрикс», 2022
Наверх