Let us know by posting here.

Streamlining Layouts with Containers in Concrete CMS

Concrete CMS's tools historically divided larger areas into smaller columns using Layouts. These work fine for quick design needs by a content editor on the fly, however, they have limitations:

  • No ability to add multiple sections within layouts.
  • Can't stack rows on top of each other.
  • Limited to a single row with various column-based areas.

Layouts don't fully address modern web needs, where developers and site editors often need to create versatile content sections reusable across pages. Traditional block types offer a solution, but lead to numerous unique blocks, each requiring documentation and specific functionality.

Containers offer a solution by allowing custom HTML, PHP, and editable Concrete areas to be added as if they were unique block types, with the capability to nest containers.

Example: Dividing a Page Section

Consider dividing a page section into two parts, like this:

Example Image

To create such a section, traditional methods include:

  1. Custom Block: Creating a block with defined HTML for text and image areas. Limitation: restricts use of other Concrete blocks.
  2. Page Template Area: Utilizing an area in the page template, filling it with existing Concrete blocks. Drawback: the section remains even if unused.
  3. Custom Grid Layout: Using a grid layout divided into columns, requiring custom CSS.

Containers overcome these limitations by allowing the creation of flexible, reusable sections, functioning similarly to blocks but with enhanced adaptability.

Up Next: Creating and Using Containers

The next section will guide you on creating and effectively utilizing containers.

Setting Up Containers in Concrete CMS

To set up a container in your theme:

  1. Location: Place container files under themes/theme_dir/elements/containers/.

  2. Create Container Template File:

    • Navigate to Dashboard->Pages & Themes->Containers.
    • Click "Add Container," name it, and ensure the handle matches your PHP file name in the containers directory.
    • In your PHP file, start with use Concrete\Core\Area\ContainerArea;.
    • Define a container area: php $area = new ContainerArea($container, ‘container_name’); $area->display($c);
  3. Create Containers via Content XML: Containers can be created alongside a theme, as seen in the Atomik theme documentation.

  4. Add Containers to a Page: This process is similar to adding a block.

Using Containers in Atomik Theme

Atomik Theme includes default containers:

  1. Access Documentation: In Pages & Themes, click the Settings icon for Atomik theme. Under Documentation, click Install for Atomik Theme documentation.

  2. Explore Containers: Once installed, the documentation provides details on the included containers.

Example: Light Stripe Container

The Light Stripe container in Atomik:

  • Uses a light background.
  • Creates two rows: a header (displayed in edit mode or with blocks) and a content row.
  • Allows containers and layouts in the content row.
defined('C5_EXECUTE') or die("Access Denied.");
use Concrete\Core\Area\ContainerArea;
<div class="stripe one-column bg-light">
$titleArea = new ContainerArea($container, 'Title');
if ($c->isEditMode() || $titleArea->getTotalBlocksInArea($c) > 0) { ?>
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="stripe-title">
                    <?php $titleArea->display($c); ?>
<?php }
$area = new ContainerArea($container, 'Body');