OpenCms documentation
OpenCms documentation

Usage of containers

A container in OpenCms is a place on a web page where content can be inserted by content editors.

Basic usage

<cms:container name="main" type="article,section,faq">
  <div class="notification is-info is-light">
    <h3>Main container</h3>
    <p>Drag and drop new articles, sections, and FAQs here.</p>
  </div>
</cms:container>
<cms:container name="footer" type="linklist,address" maxElements="5" editableby="ROLE.ADMINISTRATOR">
  <div class="notification is-info is-light">
    <h3>Footer container</h3>
    <p>Drag and drop new link lists and address contents here.</p>
  </div>
</cms:container>

While templates define the static frame of a website, OpenCms inserts content dynamically for the <cms:container> tag. A template may define one or more containers. 

The most important attributes of <cms:container> are these:

  • name. Unique name of the container. Required attribute. The name must be unique for the template. In the example above, the container is named main. There may be containers named side or footer defining other places on the website where content elements can be inserted.
  • type. A comma separated list of container type identifiers. Optional attribute. If not defined, content elements of any type can be inserted into a container. Although the attribute is optional, the content types allowed should be restricted. In the example above, content elements of type article, section, and faq can be inserted in the main container. 
  • maxElements. The maximum number of elements that can be placed in a container. Optional attribute, defaults to 100. The maxElements attribute in the example above restricts the number of elements to 30.
  • editableby. Specifies who is allowed to add, edit, and remove elements from a container. Optional attribute. If not set, any logged in user has permissions. Typically, roles are specified, e.g., ROLE.ELEMENT_AUTHOR, ROLE.EDITOR, ROLE.DEVELOPER, etc. In the example above.

Above the three attributes, there should be an HTML <div> tag (or another HTML block element) inside a container representing a drop area to insert contents. Since the <div> tag is shown when a container is empty, make sure that the <div> has a defined width and height.

An extraordinary feature of containers is that they can realize responsive layouts with grids, rows, and columns, for example. The technique is called nested containers. Containers can be nested in any depth. For example, a nested structure can be defined such that a layout area container may contain rows, a row container may contain columns, and a colum container may contain content elements of type article, section, or faq.

Nested containers are described in more detail here.

For further details about of the <cms:container> element, see the TagLib reference.