Responsive + Nested Editable Regions

Permalink
I'm in need of something that I don't believe is possible with C5 - even after reading similar posts from the past several years.

What I'm looking to do:

- Add a Blank Page type to a page
- Within that page type add a custom Block called "Section" (this would create markup tailored a responsive design using sections (i.e. <div class="section"></div>
- The ability to add a block inside of that with multiple columns allowing me to specific the column width (again, also integrating with responsive).

The goal of this is to have only one page type that allows for the easy creation of sections and columns. The "Layout" tool within C5 isn't sufficient because it isn't tailored to responsiveness.

This COULD be completed using the add-on DESIGNER CONTENT only if editable regions could be added within that. In that case, I would be all set.

Any thoughts on how to accomplish it.

 
anete replied on at Permalink Reply
anete
Have you seen the Designer Content Pro add-on that has just recently been released? I think this might be close to what you are wanting.
fotogenic replied on at Permalink Reply
HI Anete, Designer content is great, but it's a slightly different concept that achieves something similar but not specific to what I'm looking for. Thanks for your help!
mhawke replied on at Permalink Reply
mhawke
You are talking about a 'Block of Blocks' which has been discussed many times.

http://www.concrete5.org/community/forums/block_requests/block_insi...

This has been accomplished only for some simple things (like this:http://www.concrete5.org/index.php?cID=42071... ) but the current architecture doesn't make this easy. You might want to wait until version 5.7 because I've heard they have plans to tidy up the layouts tool.
juliandale replied on at Permalink Reply
juliandale
Hi Chris,

From trying to understand what you are asking for, I think I have done something along those lines that might work for you. Basically, I created a page type that had all of the combinations of different section layouts that I needed, then added some checking to only display the areas that have content in them. So for example, you could have a page type that is laid out like this:

-----------------------
Span12
-----------------------
Span3 | Span6 | Span3
-----------------------
Span6 | Span6
-----------------------
Span4 | Span8
-----------------------
Span8 | Span4
-----------------------

...but the public would only see the sections that have content within them, so they may only see this:

-----------------------
Span12
-----------------------
Span8 | Span4
-----------------------

The sections are wrapped in code so that they only display when either the page is in edit mode, or one of the areas in that section has blocks in it, like this:

<?php
global $c; 
$pageObject = Page::getCurrentPage();
// Once we have our page object, use it
//to check if an area has blocks within it
$hasStuff = false;
$pageBlocks = $pageObject->getBlocks('Section 1 Span 3 Left');
foreach ($pageBlocks as $pb) {
  if ($pb->btHandle != NULL) { $hasStuff = true; }
  break;
}
$pageBlocks = $pageObject->getBlocks('Section 1 Span 6');
foreach ($pageBlocks as $pb) {
  if ($pb->btHandle != NULL) { $hasStuff = true; }
  break;


Does that make sense? It's essentially a single page type that can have multiple layout options, without having to use the Concrete layout tool. It's not a particularly efficient way to build a site, but it is a way to maintain some control over the responsiveness of a site without having to resort to the layout tool.
fotogenic replied on at Permalink Reply
Thanks juliandale,

This is fairly close to what I'm looking for. I will test this out.

Ideally, I'd love to have a blank page where I can add those sections on the fly. In your case, the sections are there and can be hidden, but I couldn't add additional sections down the page with varying spans/widths. I would be restricted to the order that is laid out initially.

Either way, I'll give this a shot to see how I like it as an alternative.

Thanks for your help and response.
mhawke replied on at Permalink Reply
mhawke
I like the concept but that's an awful lot of processing and db access to generate the page. I wouldn't be surprised if the resulting page is slow to render, especially after adding a bunch of blocks to the sections but hey, give it a go and let us know how it works out.
tsilbermann replied on at Permalink Reply
tsilbermann
Hi Julian,

this is a nice solution :)
I use a framework that has always parent divs like:

<div class="units-row">
   <div class="unit-50 border-r">
      <?php 
      $a = new Area('Row-50-1');
      $a->display($c);
      ?>
  </div>
  <div class="unit-50 border-r">
      <?php 
      $a = new Area('Row-50-2');
      $a->display($c);
      ?>
   </div>
</div>


I have to hide the div units-row when no content in, because of the bottom-margin.
Is there a solution to hide these parent divs?

Best regards

Torsten
juliandale replied on at Permalink Reply
juliandale
Hi Torsten,

You can use the code mentioned in the posts above to test whether either of those areas contain blocks, then hide the whole row if they are both empty. For you, it would work like this:

<?php
$hasStuff = false;
$pageBlocks = $c->getBlocks('Row-50-1');
foreach ($pageBlocks as $pb) {
  if ($pb->btHandle != NULL) { $hasStuff = true; }
  break;
}
$pageBlocks = $c->getBlocks('Row-50-2');
foreach ($pageBlocks as $pb) {
  if ($pb->btHandle != NULL) { $hasStuff = true; }
  break;
}
if ($hasStuff || $c->isEditMode()) { ?>
<div class="units-row">
   <div class="unit-50 border-r">


Is that what you were after?
tsilbermann replied on at Permalink Reply
tsilbermann
Thanks Julian, that works well :)
vanjum replied on at Permalink Reply
Hello Julian:

I just saw your profile on Concrete5 website. Will you be available to help me build a professional website using Concrete5?

Thank You
Vaseem Anjum
vanjum@schoolcity.com
+1 408 202 8459
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
I'm available to help you! If interested, send me a private message or email directly with details.

brad@pinecreativelabs.com
vanjum replied on at Permalink Reply
Vaseem Anjum
President & CEO
[image:http://www.schoolcity.com] <http://www.schoolcity.com/> Mobile:
408-202-8459
Office: 650-934-6123
Sales: 800-343-6572
Fax: 650-963-3384
Email: vanjum@schoolcity.com
http://www.schoolcity.com [image: SchoolCity Facebook]
<http://facebook.com/schoolcityinc> [image: SchoolCity Google+]
<https://plus.google.com/104045389453858174933/posts> [image: SchoolCity
Twitter] <https://twitter.com/schoolcity> [image: SchoolCity Pinterest]
<https://www.pinterest.com/schoolcity/> [image: SchoolCity Instagram]
<https://instagram.com/schoolcity_inc/>
--
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
I've sent you an email from my Gmail. May need to check your spam.
pvernaglia replied on at Permalink Reply
pvernaglia
Hi, you could make an attribute for the number of columns, then when you add a new page set the number of columns you want. In the page type have a bit of code to loop through however many times the attribute is set and make a div with an editable area. Divs could have a class name like 'column4' and you could set the width with css
mhawke replied on at Permalink Reply 1 Attachment
mhawke
@pvernaglia - nice concept. I have attached a Page Type file that I used to test your idea.

Warning... adapt this for your theme. My file might generate extra (or missing) DIV elements and the names of my div elements might conflict with the ones in your theme.

For those unsure of how to install this as a new Page Type:

1) Visit "Dashboard->Attributes" under Pages & Themes
2) Create a 'Number' page attribute called 'Columns' with a handle of 'columns'.
3) Download the attached file and change it's extension to 'php'.
4) Upload it to your theme directory.
5) Visit 'Dashboard->Page Types' and add a new page type called 'Dynamic Columns' with a handle of 'dynamic_columns' (no php extension)
6) After you've added the new page type, click it's 'Settings' button and add the 'Columns' attribute to it.

Play around with it and see how it works for you. I plan to use it in an upcoming project.