Node types

The manifest file has several types of nodes-containers that contains specific content. Examples provided below demonstrate how registration is performed in the nodes key within a manifest, as well as how it looks like in the layout.

Text type

Standard text content with minimum inline html.

'.landing-block-node-card-title' => array(
   'name' => 'Description',
   'type' => 'text',
),

<h2 class="landing-block-node-card-title">Company24 video</h2>

Img type

Image. Allowed both as separate tag (<img>), and as a background (usually for the tag <div>). Recommended size is also required to be specified for this type. The reason: images can have various purpose. Profile icon can be every small and the background image can be large. At the same time, when content editors are uploading very large images as profile icons, such images will quickly deplete accounts free space and the page will frequently freeze in web browser. That is why the block authors must maintain proper declaring of such nodes. When the size is not specified, system will convert such images to a uniform small size.

'.landing-block-node-card-bgimg' => array(
   'name' => 'Background image',
   'type' => 'img',
	// image will be converted to this size
        'dimensions' => array('width' => 1920, 'height' => 1080),
	// system will decrease the image only if it's exceeds the size
	'dimensions' => array('maxWidth' => 1920, 'maxHeight' => 1080),
	// system will enlarge the image until the width
	// or height matches with specified 
        'dimensions' => array('minWidth' => 1920, 'minHeight' => 1080),
),

<div class="landing-block-node-card-bgimg"></div>

Important! This type must have attribute with an image. The img tag it is the src attribute and, evidently, it shouldn't be empty. The attribute style (tag div) it is background-image.

Link type

The link includes link text, link value, link type (link, phone, ...), as well as type of opening (opens in current window, new window, ...).

'.landing-block-node-card-button' => array(
   'name' => 'Button',
   'type' => 'link',
),

<a href="/"
   class="landing-block-node-card-button text-uppercase btn u-btn-outline-white btn-md rounded-0">
   Read more
</a>

In case of non-text link (for example, contains image or something else), skipContent parameter must be added, so that parameter wouldn't change after saving.

'.landing-block-node-card-button' => array(
   'name' => 'Button',
   'type' => 'link',
   'skipContent' => true
),

Icon type

Visually, it is similar to an image because the end user operates with variants of icons, with single exception that the user cannot upload his/her data into these nodes. Technically it is a class of an element that renders an icon via standard icon font.

'.landing-block-node-list-item-icon' => array(
   'name' => 'Icon',
   'type' => 'icon',
),

<i class="landing-block-node-list-item-icon fa fa-instagram"></i> //fa-instagram class is responsible for displaying Instagram icon

Embed type

Multimedia. For example, background video. Only two attributes are changed with this type – src and source.

'.landing-block-node-card-videobg' => array(
   'name' => 'Background video',
   '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 type

Allows to work with both selector and geo map. Presently, only Google Maps are supported. Edit mode easily allows to manage map details.

'.landing-block-node-map' => array(
   'name' => 'Your office location',
   'type' => 'map',
),

<div class="landing-block-node-map mx-auto w-100 g-min-height-430 h-100"></div>