Support

Use custom elements

Every page created through the Bear CMS admin UI has a zone that administrators can fill with elements (text, images, etc). You as a developer can create pages with specific elements that cannot be removed by the administrators (but can be edited). You can order them and style them the way you like.

The Bear CMS elements look like regular HTML elements. They work on the server only and are converted to valid HTML code before sending them to the client.

Here is an example heading element:
<bearcms-heading-element text="Large heading" id="element-1" editable="true" size="large"/>
  • In this example, the default value is specified in the 'text' attribute.
  • The heading element support 3 different sizes (large, medium and small) and they are specified in the 'size' attribute.
  • The element is also marked as editable. This enables administrators to edit its content. In this case, the 'id' attribute is required and it must be unique throughout the whole website.

Prerequisites

Currently, there are two Bear CMS client packages. Writing code for Bear CMS requires running Bear CMS as Bear Framework addon. Click here to learn about this package.

Supported elements

Heading

<bearcms-heading-element />
Attributes:
  • text
  • size (large, medium, small)

Text

<bearcms-text-element />
Attributes:
  • text

Link

<bearcms-link-element />
Attributes:
  • url
  • text
  • title

Image

<bearcms-image-element />
Attributes:
  • onClick (none, fullscreen, openUrl)
  • lazyLoad (true, false)
  • width
  • align (left, center, right)
  • filename
  • url (only if onClick=openUrl)

Image gallery

<bearcms-image-gallery-element />
Attributes:
  • spacing
  • type (columns, grid)
  • columnsCount (only when type=columns)
  • imageSize (tiny, small, medium, large, huge)
  • imageAspectRatio (1:1 for example)
  • lazyLoadImages (true, false)
Inner HTML:
<file filename="..."/><file filename="..."/>...

Video

<bearcms-video-element />
Attributes:
  • width
  • align (left, center, right)
  • filename
  • url

Navigation

<bearcms-navigation-element />
Attributes:
  • selectedPath
  • source (allPages, pageChildren, topPages)
  • sourceParentPageID (only when source=pageChildren)
  • showHomeLink (true, false)
  • homeLinkText
  • menuType (horizontal-down, vertical-left, vertical-right, list-vertical)

HTML code

<bearcms-html-element />
Attributes:
  • code

Blog posts

<bearcms-blog-posts-element />
Attributes:
  • source (allPosts, postsInCategories)
  • sourceCategoriesIDs (only if source=postsInCategories)
  • type (summary, full, titles)
  • showDate (true, false)
  • limit

Comments

<bearcms-comments-element />
Attributes:
  • count
  • threadID

Example code

A demo application is available at GitHub.
Almost every line in the source code is commented. We think this is the best way to get yourself familiar with the custom elements in Bear CMS.

Learn more