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

Типы нод

Как вы можете узнать из файла манифеста, существует несколько типов нод – контейнеров, в которых расположен тот или иной контент. Давайте рассмотрим какие они есть на данный момент. В примерах показано как регистрировать в манифесте в ключе 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-2019, «1С-Битрикс», 2019
Наверх