Типы нод

Описание

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