Template Composer Containers - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 10. There's an updated version available that covers our most recent release.

12-05-2015

Template Composer Containers

When creating web pages, a developer can configure certain regions in the web page to be editable by webmasters. These regions are called containers.

Layout defined by xtype

A container renders a number of items in the page. The layout of these items (horizontal, vertical, etc.) depends on the 'xtype' of container. HST Template Composer supports the following xtypes out of the box:

xtype

Description

Remarks

HST.vBox

Renders a  <div> element with all the child components wrapped in a  <div> element.

 

HST.UnorderedList

Renders a  <ul> element with all the child components wrapped in an  <li> element.

 

HST.OrderedList

Renders a  <ol> element with all the child components wrapped in an  <li> element.

 

HST.Table

Renders a  <table> element with all the child components wrapped in a  <tr> &  <td>element.

 

HST.Span

Renders a  <div> element with all the child components wrapped in a  <span> element.

This container is intended for horizontally aligned components.

HST configuration 

A container is defined in the HST configuration by a node of type hst:containercomponent. For example, if you want to add a vertical box of items to the page you need to define the container component as shown below:

<sv:node sv:name="home-page-boxes">
  <sv:property sv:name="jcr:primaryType" sv:type="Name">
    <sv:value>hst:containercomponent</sv:value>
  </sv:property>
  <sv:property sv:name="hst:xtype" sv:type="String">
    <sv:value>HST.vBox</sv:value>
  </sv:property>
</sv:node>

Note that all the child nodes of the hst:containercomponent node need to be of the type hst:containeritemcomponent. The HST will add such child nodes when a CMS user drags a component into the container.

To add containers to a page, a developer has to  configure the containers of a page in the HST workspace.

Component toolbar

A developer can also configure a list of items that can be added to a container. These items will be shown in the  component toolbar in the template composer. Users can drag a component from the component toolbar and drop it in any container.

Each item in the toolbar is an HST component. To add a component to the component toolbar, add its configuration to the HST catalog.

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?