Forums

Nestable Dynamic Content Areas

Permalink
Hi, I'm totally new to Concrete5 (moving over from WordPress) and I have to say that so far I love the CMS! However there are one or two things that I'm not sure how to do.

I realise that there's been a lot of discussions already regarding nesting blocks / stacks within one another etc. and I have looked to several of these for advice but cannot see the best solution for my problem. (i.e. I don't think I'm understanding well enough how to work with C5 yet!).

Before using any kind of CMS or other developer platforms/frameworks I work first and foremost in hand-coded HTML / PHP, which allows me ultimate flexibility to craft very specific structures on which to layout a site's content. In doing so I have grown accustomed to using a modular, semantic structure for both the HTML and CSS in my projects, which often involves a degree of nested 'primary' structures.

For example, I have a main header block for the whole page which may contain sub-blocks for social-media, branding (i.e. logo/name/slogan), quick-search form, contact-info and possibly navigation (although sometimes this is in it's own block outside of the header).

The problem I'm having is that I'm not sure how / how best to implement these structures into C5 user editable areas?

Specifically it seems to me that C5 is very 2 dimensional in that you can only define an area/stack and then a series of 'single level' blocks to apply within it. HTML is made up of elements within elements on multiple levels and it seems strange to me that the CMS doesn't seem to support this.

Please help me to understand how to go about creating multi-level user editable content areas.
 
ScottSandbakken replied on at Permalink Reply
ScottSandbakken
You would just define different block areas for each nested section. For instance, I have a non-eCommerce site that displays product information. The main section has three areas defined, product image, description, and price.

<div class="prod-image">
  <?php $as = new Area('Product Image');  $as->setBlockLimit(1); $as->display($c); ?>
</div>
<div class="prod-desc">
  <?php $as = new Area('Product Description'); $as->display($c); ?>
  <div class="prod-price">
    <?php $as = new Area('Product Price'); $as->display($c); ?>
  </div>
</div>
gordonFeeman replied on at Permalink Reply
Thanks for your answer, I see what you mean but I'm not sure that this is exactly what I'm looking for. My apologies I should have been clearer in my OP, but I would like to keep the output as lean and semantic as possible.

Ideally I'd like to be able to implement something that resembles this...

<header class="header">
    <?php $a = new GlobalArea('page_header'); $a->display($c); ?>
    <?php # define sub-area within 'page_header':
        $s = new SubArea('branding', 'page_header');
        $s->getArea($a)->display($c); # perhaps need to wrap the area->display call ?
    ?>
    <?php # ..and maybe even be able to define (some) blocks to be applied by default, like this:
        $s->staticBlocks('brand_logo','brand_name','brand_tagline');
    ?>
</header>


Is this kind of thing likely to be possible, even if it would require a custom plugin/mod?

Thanks
mkly replied on at Permalink Reply
mkly
Typically Areas(and GlobalAreas) are not nested. Each Area is a container of Blocks. You can add some additional markup to each Block in an Area with something like this.
$a = new Area('Header');
$a->setBlockWrapperStart('<div class="block-header">');
$a->setBlockWrapperEnd('</div><!-- .block-header -->');
$a->display($c);

That would wrap each Block in that Area in a <div>

Think of Areas more as Block containers than a way of organizing content.
gordonFeeman replied on at Permalink Reply
Thanks I think I get it, so I don't really want to use/think of Areas as elements within the HTML structure, more as places to put groups of structural HTML 'blocks'.

But this still leaves me with the problem that I cannot nest Blocks and so therefore cannot structure the HTML in a sufficient manner. In a semantic HTML structure I have multiple levels of elements and sub-elements.

<header class="page-header">
    <ul class="social-media">
        <li><a href="facebook.com/..."><img src="img/facebook.jpg" /></li>
        ....etc.
    </ul>
    <div class="branding">
        <div class="logo">
            <img src="img/logo.jpg" />
        </div>
        <hgroup>
            <h1 class="brandname">Brand Name</h1>
            <h2 class="tagline">We're so awesome you should buy our stuff!</h2>
        </hgroup>
        ...etc.
    </div>
Viewing 15 lines of 16 lines. View entire code block.


...for example. However I need the structural HTML to be contained in custom blocks so that the content editor of the site does _not_ have to know or write any HTML!

I'm guessing that (at least for now) this is not possible in C5?
ScottSandbakken replied on at Permalink Reply
ScottSandbakken
Generally, I would code logos and tag lines into the template itself. The user rarely has need to change these.

However, to use your example...

<header class="page-header">
    <!-- Set this up as an auto-nav, then pull the images in as a page property -->
    <ul class="social-media">
        <li><a href="facebook.com/..."><img src="img/facebook.jpg" /></li>
        ....etc.
    </ul>
    <div class="branding">
        <div class="logo">
            <?php $as = new GlobalArea('Logo'); $as->setBlockLimit(1); $as->display($c); ?>
        </div>
        <hgroup>
            <h1 class="brandname"><?php $as = new GlobalArea('Brand Name'); $as->setBlockLimit(1); $as->display($c); ?></h1>
            <h2 class="tagline"><?php $as = new GlobalArea('Tag Line'); $as->setBlockLimit(1); $as->display($c); ?></h2>
        </hgroup>
        <?php $as = new GlobalArea('Main'); $as->setBlockLimit(1); $as->display($c); ?>
Viewing 15 lines of 18 lines. View entire code block.
gordonFeeman replied on at Permalink Reply
Thanks @NetJunky279 that makes a lot of sense and is pretty much the conclusion I had come to too, although I hadn't thought of making the social links an AutoNav block. Great tip, thanks!

I do think that Concrete5 is a fantastic CMS platform for it's "end user friendly" on-page/in-line editing (amongst other features), but as a developer I've still got a lot to learn about it. I sort of threw myself in at the deep end going straight in to a client project with C5 before I'd even had a chance to play around with it and familiarize myself with it first. I just thought it was the best tool for the job.

Thanks again for all your help!
ScottSandbakken replied on at Permalink Reply
ScottSandbakken
Be sure you are leveraging the page attributes. For instance, you can hard-code the output of the page title in H1 tags, add an image attribute to output a header image, etc. rather than adding additional areas.

Also, be sure to use global areas where appropriate.
freestylemovement replied on at Permalink Reply
freestylemovement
Hi, i wanted to revive this old thread with the possibility of having some clarity. mkly, i like how you made your suggestion, and i was hoping to do something very similar but can't figure out a clean solution.

what i'm looking to do is to print the page title from a particular page into its "main' area, so that i can load it via ajax into a main page. i realize there might be a few other ways to go about this, but this is the method i'm commited to based on the site i have.

sofar, i have 

$a = new Area('Main');
$a->setBlockWrapperStart('<h1><?php print $c->getCollectionName();
?></h1>');
$a->setBlockWrapperEnd('<!-- .block-header -->');
$a->display($c);