Containers

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:

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.

<?php
defined('C5_EXECUTE') or die("Access Denied.");
use Concrete\Core\Area\ContainerArea;
?>
<div class="stripe one-column bg-light">
<?php
$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); ?>
                </div>
            </div>
        </div>
    </div>
<?php }
?>
<?php
$area = new ContainerArea($container, 'Body');
$area->setAreaGridMaximumColumns(12);
$area->enableGridContainer();
$area->display($c);
?>
</div>