Concrete5: Possible to repeat multiple blocks in a specific layout?

Question

I am creating a custom template for a page using Concrete5. I have three blocks, wrapped in a div class, that I want to repeat throughout one page. For example:

<div class="block-wrapper">
   <div class="title"><?php $a = new Area('Title'); $a->display($c);?></div>
   <div class="description"><?php $a = new Area('Description'); $a->display($c);?></div>
   <div class="autonav"><?php $a = new Area('Autonav'); $a->display($c);?></div>
</div>

And the CSS for would be something like this:

.block-wrapper {
        padding: 20px 5px 20px 5px;
        border: 1px solid #e8e8e8;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    }

.title {
        float: left;
}

.description {
        float: right;
}

What I want is to be able to repeat the block-wrapper with the 3 editable blocks inside. For example, the generated page would look like:

    <div class="block-wrapper">
      <div class="title">Steve</div>
      <div class="description">Engineer</div>
      <div class="autonav">Link A | Link B | Link C</div>
</div>

    <div class="block-wrapper">
       <div class="title">Betty</div>
       <div class="description">Designer</div>
       <div class="autonav">Link D | Link E | Link F</div>
</div>

...and so forth. I hope I am being clear enough. Is this possible? What are my options? Ideally, I'd have as much freedom to style the blocks and block-wrapper as possible.

Answer 1

Depending on what exactly your situation is, there are a few different solutions. The built-in Concrete5 approach is to use the setBlockWrapper methods on the Area object. For example:

<?php
$a = new Area('Main');
$a->setBlockWrapperStart('<div class="block-wrapper">');
$a->setBlockWrapperEnd('</div>');
$a->display($c);
?>

Note that the block wrapper is not displayed while in edit mode.

Another approach (as @BGundlach mentions) is to use the free Designer Content addon and create a custom blocktype with separate fields for each piece of data, and provide the appropriate wrapper HTML around each field. Looking at your example, though, I see you have one of those fields being an "autonav" of sorts... so I'm not sure how exactly this would be populated.

A third approach is the non-free Designer Content Pro addon, which lets you create custom blockstypes with repeating items (which might be good for your nav field... so users could choose any number of nav links if they wanted... but this would be more of a "manual nav" versus an "auto nav").

Disclaimer: I'm the author of both the Designer Content and Designer Content Pro addons (but they were created to solve this exact sort of problem so I think it's a good fit here).

Answer 2

If I understand you correctly a possible option is to programmatically create the three areas. For example you could create a new Page attribute with a handle number_of_bio_blocks and then something like this

<?php
    $num = intval(Page::getCurrentPage()->getAttribute('number_of_bio_blocks'));
    if ($num) {
        while ($num--) {
?>
            <div class="block-wrapper">
                <div class="title"><?php $a = new Area('Title ' . $num); $a->display($c);?></div>
                <div class="description"><?php $a = new Area('Description ' . $num); $a->display($c);?></div>
                <div class="autonav"><?php $a = new Area('Autonav ' . $num); $a->display($c);?></div>
            </div>
<?php
        }
    }
?>

Or possibly just set an arbitrary number of Areas like 10 as those that are not filed in will not be displayed. There is not, to my knowledge, a way to add Areas through the interface. Also, creating those Areas like that would populate the database with additional unused Areas. I'm not sure if that is a concern to you.

Designer Content was suggested, and there is now Designer Content Pro which allows you to add multiple repeating fields in a block. This wouldn't allow arbitrary blocks, but if you need things like rich text and images, that might be a good option.

Answer 3

Why not use one area and a repeating block type? Fewer areas allows for better sure performance.

I'm not sure there's an autonav option in Jordanlev's designer content block, but I'm sure it will do all this for you. http://www.concrete5.org/marketplace/addons/designer-content/ I've used this as the basis for many of my own blocks. It puts you in control of all the markup.

The description states:

Designer Content is an invaluable tool that allows designers to easily create custom block types. The purpose of this is to make content editing straightforward for your users, and to ensure that your styles are maintained -- without having to rely on the complicated and error-prone TinyMCE styles. For example, let's say some of the pages on your site will contain information about company employees, and each employee has a name, a bio image, and a brief description -- you can create a custom block with a textbox field for the name, an image selector for the bio image, and a wysiwyg editor for the description. You can also surround each element in html snippets (divs with classes, for example) to ensure that the content will be styled appropriately, without your users having to deal with the finicky TinyMCE toolbar.