CMS

CMS Documentation

LocalSignal Panels use three CMS attributes to make content editable for the client: cms-type, cms-name, and cms-id.

CMS-TYPE

CMS-Type specifies the type of data the editable area will be on the page.

CMS-NAME

The CMS-Name attribute is the label used for the editable content.

CMS-ID

The CMS-ID holds the information stored on the page in the database.

CMS-Type

CMS-Type displays the type of data the editable area will be. CMS-Types include: 

Text Type

cms-type="text"

The Text tag is used for one line or one sentence of text.

Text


1
2
3
4
5
6
7



<h2 class="sub-title"
 cms-name="Sub Title" 
 cms-type="text" 
 cms-id="subtitle"
>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
</h2>

Textarea Type

cms-type="textarea"

Textareas are for multiple lines of plain text. They will factor in paragraphs.

Textarea


1
2
3
4
5
6
7
8



<div class="sub-text"
 cms-name="Sub Text"
 cms-type="textarea"
 cms-id="subtext"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tincidunt sapien tortor, et tristique sapien maximus id. Vivamus pharetra diam eget nunc cursus porta.
Aenean interdum diam sed libero mattis rutrum. 
</div>

HTML Type

cms-type="html"

The HTML type will give the client a Rich Text Editor (Whizzywig) so they can have basic styles within their content.

HTML


1
2
3
4
5
6
7



<div 
 cms-name="Content" 
 cms-type="html" 
 cms-id="content" 
> 
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<p>Duis convallis nunc augue, sed imperdiet orci volutpat at. In lectus libero, dictum eget pellentesque vel, convallis sit amet est. Nulla ut malesuada magna. Curabitur blandit aliquam mauris, sed condimentum erat tincidunt vel. </p> </div>

Menu Type

cms-type="menu" cms-type="example"

Menus and examples are used with the Menu Section. The example code is shown until the client selects a menu for the CMS to use. The cms-global allows for the same menu to be globally selected on every instance of the panel. This is useful to update headers and footers consistently.

Menu
Attribute Notes
cms-global Used to make a cms item global across every instance of the panel
cms-menu-container Applied to the <ul> of the menu
cms-menu-item Applied to the <li>
cms-active Automatically adds an active class to the current item
cms-menu-item-link Adds the href to a tag
cms-menu-item-text Places the text inside of a tag
cms-menu-stay-if-children Edit to add specific style used for dropdown menus
cms-menu-item-container Container for dropdown menu item
Menu


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31



<div id="navbar">
 <section 
  cms-type="menu"
  cms-name="Menu"
  cms-id="menu"
  cms-global
 >
  <ul cms-menu-container class="nav">
   <li cms-menu-item cms-active>
    <a cms-menu-item-link>
     <span cms-menu-item-text></span>
     <span cms-menu-stay-if-children class="caret"></span>
    </a>
    <ul cms-menu-item-container class="dropdown-menu" role="menu"></ul>
   </li>
  </ul> 
 </section>
 <section
  cms-type="example"
  cms-name="Menu"
  cms-id="menu"
 >
  <ul class="nav">
   <li class="active"><a href="/">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">Contact</a></li>
  </ul>
 </section>
</div>

Repeatable/ Example Type

cms-type="repeatable" cms-type="example"

Repeatable types are special because they are used for allowing developers to reuse code blocks within the same panel of a website. They allow other cms-type inside of them so you can create multiple iterations of the same code. The example is used to show what the content could potentially look like. Once data is entered in the repeatable, the example is hidden.

Repeatable/ Example
Attribute Notes
cms-title Uses the content from the cms item to display the title within the page editor
cms-global Used to make a cms item global across every instance of the panel
Repeatable/ Example


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22



<section 
 cms-type="repeatable"
 cms-name="Gallery"
 cms-id="gal1"
>
 <div class="col-md-6 col-xs-12">
  <a href="" class="fancybox" rel="gallery" title="">
   <img cms-name="Photo" cms-type="image" cms-title data-image-use="thumb" data-image-parent-link="full" data-image-thumb-height="360" data-image-thumb-width="720" data-image-max-height="1300" data-image-max-width="1600" src="photo.jpg" alt="" cms-id="photo">
  </a>
 </div>
</section>
<section
 cms-type="example"
 cms-name="Gallery"
 cms-id="gal1" title=""
>
 <div class="col-md-6 col-xs-12">
  <a href="photo1.jpg" class="fancybox" rel="gallery">
   <img src="photo1.jpg" alt="">
  </a>
 </div>
</section>

Map Type

cms-type="map"

The cms-type for map is used when you want the user to have the ability to control the map on the web page. All of the values shown here will be the default setting, but each of these attributes can be modified on the Page Editor.

Learn More

Map
Attribute Example Values Notes
data-map-lat 29.7604267 Float. Latitude for the map point
data-map-lng -95.3698028 Float. Longitude for the map point
data-map-color #93c21f (Optional) Hex Value. Color overlay for the map
data-map-water #366080 (Optional) Hex Value. Color for water on map
data-map-zoom 18 (Optional) Integer. 6 - 18. 6 is the farthest out value.
data-map-marker marker.png (Optional) String. URL to the default marker image.
Map


1
2
3
4
5
6
7
8
9
10
11
12



<div class="map-canvas" 
 cms-name="Address"
 cms-type="map" 
 cms-id="address"

 data-map-lat="31.9686" 
 data-map-lng="-99.9018" 
 data-map-color="#93c21f" 
 data-map-water="#366080" 
 data-map-zoom="7" 
 data-map-marker="/mynt-marker.png" 
></div>

Form

cms-type="form"

The Form tag allows users to select from a list of LocalSignal Forms in the Content Editor.

Learn More

Form


1
2
3
4
5
6



<div
 cms-name="Form" 
 cms-type="form" 
 cms-id="form"
>
</div>

Link Type

cms-type="link"

Link is used to allow the client to change a link’s href or text. The content editor gives the client the option to choose between an internal or external URL.

Link
Attribute Notes
cms-link-no-text Overrides the CMS to make sure the panel code is not overwritten by the CMS content
cms-global Used to make a cms item global across every instance of the panel
Link


1



<a cms-type="link" cms-name="Link" href="#" cms-id="link">Lorem Ipsum</a>

Image Type

cms-type="image"

The image tag is used so clients and developers to have the ability to upload and use images through the LocalSignal page editor.

Image
Attribute Example Values Notes
data-image-use full, thumb String
data-image-parent-link full, thumb String. Used for Lightbox
data-image-width 600 Integer. Pixel width for final output
data-image-height 600 Integer. Pixel heght for final output
data-image-min-width 400 Integer. Min. pixel width for output
data-image-min-height 800 Integer. Min. pixel height for output
data-image-max-width 1920 Integer. Max pixel width for output
data-image-max-height 1080 Integer. Max pixel height for output
data-image-ratio 2:1, 1:1 String. Aspect ratio for cropping. W:H
data-image-thumb-width 720 Integer. Pixel width for final thumbnail size
data-image-thumb-height 720 Integer. Pixel height for final thumbnail size
Image


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23



<img cms-name="Test Image" 

 cms-type="image" 
 cms-id="image" 

 data-image-use="thumb" 
 data-image-parent-link="full" 

 data-image-width="100"
 data-image-height="50"

 data-image-min-width="100"
 data-image-min-height="50"

 data-image-max-width="100"
 data-image-max-height="50"

 data-image-ratio="2:1"

 data-image-thumb-width="100"
 data-image-thumb-height="50"

 src="images/mynt-sample-image.svg" />

Background Image Type

cms-type="bg-image"

Editable background images in LocalSignal use the bg-image cms type. The background image is then styled with CSS.

Background Image
Attribute Notes
cms-global Used to make a cms item global across every instance of the panel
Background Image


1
2
3
4
5
6
7



<div cms-type="bg-image" cms-name="Background Image" cms-id="background- image" data-image-max-height="1080" data-image-max-width="1920">
 <div class="container">
  <div class="sec-title-row">
   <h2 cms-type="text" cms-name="Panel Title" cms-id="panel-title">Background Image</h2>
  </div>
 </div>
</div>

Video

cms-type="video"

Easily embed a YouTube video with the video cms-type.

Video
Attribute Notes
cms-global Used to make a cms item global across every instance of the panel
rel=0 Add this to the end of a Youtube URL to hide the related videos that appear after the video has finished.
autoplay=1 Add to the end of a youtube URL in the CMS in order to enable autoplay
Background Image


1
2
3
4
5
6



<div cms-type="video" 
 cms-name="Feature" 
 cms-id="feature-video" 
 class="video"
 >
</div>

Markdown Type

cms-type="markdown"

Markdown is a CMS Type that allows developers to display code directly on a page. Markdown utlizies Pygments to show differenciate between coding languages.

Note: LocalSignal recommends you use the HTML cms-type whenever possible.

Markdown
Code Notes
cms-type="markdown" Allows the use of markdown in the page editor.
Markdown


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25



<div cms-type="markdown" 
 cms-name="Content" 
 cms-id="content" 
 >
 A First Level Header
    ====================

    A Second Level Header
    ---------------------

    Now is the time for all good men to come to
    the aid of their country. This is just a
    regular paragraph.

    The quick brown fox jumped over the lazy
    dog's back.

    ### Header 3

    > This is a blockquote.
    > 
    > This is the second paragraph in the blockquote.
    >
    > ## This is an H2 in a blockquote
</div>

Mod Type

cms-type="mod"

Mod stands for modifer. It is an empty type that allows you to store data. It is used in conjuction with CMS-Name and the attribute cms-attr-class as well as cms-attr-id.

It can also be used to add an optional class or id to panel code that display in the Content Editor.

Mod
Attribute Notes
cms-global Used to make a cms item global across every instance of the panel
cms-attr-id Allows the user to define an ID in the Content Editor. That ID is then added to the item on the page
cms-attr-class="" Allows the user to define a class in the Content Editor. That class is them added to the item on the page. The class options must be defined by the developer.
Mod Anchor


1
2
3
4
5
6
7



<div class="anchor"
 cms-name="Anchor" 
 cms-type="mod" 
 cms-id="anchor"
 cms-attr-id
>
</div>
Basic Icon Sets
Code Notes
cms-attr-class="cms_fa_4_social" Outputs a dropdown list of social media icons using FontAwesome 4.
cms-attr-class="cms_fa_4_social_basic" Outputs a basic dropdown list of social media icons using FontAwesome 4.
cms-attr-class="cms_fa_4_payment" Outputs a basic dropdown list of payment icons using FontAwesome 4.
cms-attr-class="cms_fa_4_social_official" Outputs a basic dropdown list of official social media icons using FontAwesome 4.
cms-attr-class="cms_fa_4_social_square" Outputs a basic dropdown list of square social media icons using FontAwesome 4.
cms-attr-class="cms_fa_4_accessibility" Outputs a basic dropdown list of accessibility icons using FontAwesome 4.
cms-attr-class="cms_fa_4_contact" Outputs a basic dropdown list of basic contact icons using FontAwesome 4.
Basic Social Media Icons


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16



<section cms-type="repeatable" cms-name="Social Media" cms-id="social-media" cms-global>
 <a href="#" cms-type="link" cms-name="Link" cms-id="link" cms-link-no-text>
  <i class="fa " cms-type="mod" cms-name="Icon" cms-id="sm-icon" cms-attr-class="cms_fa_4_social_basic" cms-title></i>
 </a>
</section>
<section cms-type="example" cms-name="Social Media" cms-id="social-media">
 <a href="#">
  <i class="fa fa-facebook"></i>
 </a>
 <a href="#">
  <i class="fa fa-google-plus"></i>
 </a>
 <a href="#">
  <i class="fa fa-linkedin"></i>
 </a>
</section>
Custom Class List


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26



<section cms-type="repeatable" cms-name="Icon List" cms-id="icon-list" cms-global>
 <div>
  <i class="fa" cms-type="mod" cms-name="Icon" cms-id="sm-icon" cms-attr-class="
  Gear fa-gear
  'Paper Plane' fa-paper-plane-o
  'Hand Pointer' fa-hand-pointer-o
  Bank fa-university
  Calendar fa-calendar
  "></i>
  <h3 cms-type="text" cms-name="List Item Title" cms-id="list-item-title" cms-title>Nullam sagittis</h3>
 </div>
</section>
<section cms-type="example" cms-name="Icon List" cms-id="icon-list">
 <div>
  <i class="fa fa-gear"></i>
  <h3>Nullam sagittis</h3>
 </div>
 <div>
  <i class="fa fa-paper-plane-o"></i>
  <h3>Cras porttitor massa</h3>
 </div>
 <div>
  <i class="fa fa-calendar"></i>
  <h3>Vivamus congue diam</h3>
 </div>
</section>
Class Added to a Repeatable Paragraph


1
2
3
4
5
6
7
8
9
10
11
12
13
14



<section cms-type="repeatable" cms-name="Content" cms-id="panel-content">
 <p cms-type="textarea" cms-name="Paragraph" cms-id="paragraph" cms-attr-class="
  None ''
  'Align Left' 'text-left'
  'Align Right' 'text-right'
  'Align Center' 'text-center'
 ">
 </p>

</section>
<section cms-type="example" cms-name="Content" cms-id="panel-content">
 <p class="text-center">Duis convallis nunc augue, sed imperdiet orci volutpat at. In lectus libero, dictum eget pellentesque vel, convallis sit amet est. Nulla ut malesuada magna.</p>
 <p class="text-right">Duis convallis nunc augue, sed imperdiet orci volutpat at. In lectus libero, dictum eget pellentesque vel, convallis sit amet est. Nulla ut malesuada magna.</p>
</section>
Adding a Custom ID Field


1
2
3
4
5
6
7



<div
 cms-name="ID" 
 cms-type="mod" 
 cms-id="example-id"
 cms-attr-id
>
</div>

CMS-Name

The CMS-Name attribute is what is shown to the client when they go to edit the content of their website. Therefore, it is important to choose a name that has meaning. The following are the recommended CMS-Names for the common code cases.

Titles & Text

Titles and text for in the CMS use the cms-type Text. This renders an input line for the user on the page editor. For blocks of text with line breaks, use the cms-type Textarea. Finally, use the HTML type for a more versatile option.

Titles & Text
Code CMS-Type Example CMS-Names
h1 cms-type="text" Hero Title, Page Title
h2 cms-type="text" Heading 2, Panel Title
h3 cms-type"text" Heading 3, Panel Sub Title
h4 cms-type"text" Heading 4
h5 cms-type"text" Heading 5
h6 cms-type"text" Heading 6
p cms-type"textarea" Paragraph

Content

Content
Code CMS-Type Example CMS-Names
div cms-type"html" Content, Main Content, Sidebar

Header and Footer

Header and Footer
CMS-Type Example CMS-Names
cms-type"menu" Menu
cms-type"menu" Footer Menu

Repeatables

Repeatables
CMS-Type Example CMS-Names
cms-type"repeatable" List Item
cms-type"repeatable" Content

Maps

Maps
CMS-Type Example CMS-Names
cms-type"map" Map, Full Width Map, Service Map

Links

Links
CMS-Type Example CMS-Names
cms-type"link" Social Media Link
cms-type"link" Footer Link

Images

Images
CMS-Type Example CMS-Names
cms-type="image" Left Image
cms-type="image" Image

Background Images

Background Image
CMS-Type Example CMS-Names
cms-type"bg-image" Panel Background
cms-type"bg-image" Gallery Image

CMS-ID

Every CMS element requires the use of a CMS-ID. The cms-id type is what holds the information stored by the client. It is recommended to use a semantic name when choosing the ID. Each ID must be unique in the scope of the panel it is used in.

CMS-IDs cannot have spaces or invalid characters. CMS-ID does support underscores and hyphens.

WARNING: Changing the cms-id will delete all information from all instantiated panels of that blueprint. e.g. In the panel editor if you change the cms-id on a div in a panel called “My Test Panel”, all pages that have instances of “My Test Panel” will loose the data stored for that div. 

Titles & Text

Titles & Text
CMS-Type Example CMS-ID
cms-type"text" text, txt, heading, sub-title, panel-title, sub-text
cms-type"textarea" subtext,

Content

Content
CMS-Type Example CMS-ID
cms-type="html" content, html

Header and Footer

Header & Footer
CMS-Type Example CMS-ID
cms-type="menu" nav, main-nav, side-nav, footer-nav

Repeatables

Repeatables
CMS-Type Example CMS-ID
cms-type="repeatable" content, gal,

Maps

Maps
CMS-Type Example CMS-ID
cms-type="map" map, fw-map

Links

Links
CMS-Type Example CMS-ID
cms-type="link" link
cms-type="link" btn, btn-nav, btn-cta, cta,

Images

Images
CMS-Type Example CMS-ID
cms-type="image" image, photo, svg, icon, logo

Background Images

Background Images
CMS-Type Example CMS-ID
cms-type"bg-image" bg-image