Repeatable 3 columns divs
Permalink
I have hard coded into a template a three column layout. Which is made up from a number if divs. I want this three column layout to be repeatable within the page. How can this be done? Would I need to build a block to make this layout repeatable?
I have three section Id's called box1,2,3 each containing a new area for each one. I want to repeat the whole 3 boxes as a group. My code is:
<section id ="box1">
<?php $a = new Area ('box1'); $a->display($c) ?>
</section>
Three of which for box1, box2, box3
<section id ="box1">
<?php $a = new Area ('box1'); $a->display($c) ?>
</section>
Three of which for box1, box2, box3
Can you post a screenshot of your design or a wireframe or just a drawing of what it is you're trying to achieve with this layout?
I think there might be a better way to do what you want, but I would need to visually see what your goal is first.
I think there might be a better way to do what you want, but I would need to visually see what your goal is first.
I'm not in front of a computer at the moment, but basically I want to repeat these three divs as a group to hold different content below each other on a page
Hmm... still not exactly sure I understand, but I think you're saying that you can't just have one area for each column and let users stack blocks in them because you need the <div> to go around every block, not just the entire area.
And you can't just add 6 or 9 or however many areas because the user may want to have different numbers of them on different pages?
A few of possible solutions:
1) Keep just 1 row of areas, but use blockwrappers to put the section tag around each one:
The problem with this is if you wanted more than 1 block per <section>
2) Just have one area, and use Area Layouts to divide the area into three columns, and as many rows as are needed for a page. Then use CSS in your theme stylesheet to apply those section styles to the area layout wrapper div class (not sure what it is, just add one to a page and view source to see though). This wouldn't be as semantic or html5-ish since it's not using the <section> tag, but visually should give you the desired effect.
3) If you know only certain kinds of content are going to appear in each section, you could create a custom block with Designer Content and put the section wrappers as "static HTML" before and after the fields:http://www.concrete5.org/marketplace/addons/designer-content...
There might be some other solutions I can't think of right now.
-Jordan
And you can't just add 6 or 9 or however many areas because the user may want to have different numbers of them on different pages?
A few of possible solutions:
1) Keep just 1 row of areas, but use blockwrappers to put the section tag around each one:
<?php $a = new Area('box1'); $a->setBlockWrapperStart('<section class="box1">'); $a->setBlockWrapperEnd('</section>'); $a->display($c); ?> ...etc.
The problem with this is if you wanted more than 1 block per <section>
2) Just have one area, and use Area Layouts to divide the area into three columns, and as many rows as are needed for a page. Then use CSS in your theme stylesheet to apply those section styles to the area layout wrapper div class (not sure what it is, just add one to a page and view source to see though). This wouldn't be as semantic or html5-ish since it's not using the <section> tag, but visually should give you the desired effect.
3) If you know only certain kinds of content are going to appear in each section, you could create a custom block with Designer Content and put the section wrappers as "static HTML" before and after the fields:http://www.concrete5.org/marketplace/addons/designer-content...
There might be some other solutions I can't think of right now.
-Jordan
Thank you for all your feedback on how I should approach this. I have been working my way through your feedback, and wonder if I am over complicating this, and whether there is a simpler way to do this.
My closest answer is the Designer blocks, however this seems like it should be simpler. Basically I want to be able to repeat this layout as a group:
<section id="box1">
<?php $a = new Area('box1'); $a->display($c); ?>
</section>
<section id="box2">
<?php $a = new Area('box2'); $a->display($c); ?>
</section>
<section id="box3">
<?php $a = new Area('box3'); $a->display($c); ?>
</section>
<div class="clear"></div>
Therefore this could be repeated underneath, and I am able to put in different content.
Basically I understand that a new area will repeat, but I want to repeat the whole code above again underneath as a group.
My closest answer is the Designer blocks, however this seems like it should be simpler. Basically I want to be able to repeat this layout as a group:
<section id="box1">
<?php $a = new Area('box1'); $a->display($c); ?>
</section>
<section id="box2">
<?php $a = new Area('box2'); $a->display($c); ?>
</section>
<section id="box3">
<?php $a = new Area('box3'); $a->display($c); ?>
</section>
<div class="clear"></div>
Therefore this could be repeated underneath, and I am able to put in different content.
Basically I understand that a new area will repeat, but I want to repeat the whole code above again underneath as a group.
It seems this also is not possible with the designer content areas as it wont allow me to add three wysiwyg areas - only one. So back to the beginning again
I am just speculating here, as others have a much better idea of how things work than I do and I am still fairly new to C5.
The clever code could be in a new page type.
Rather than output all the blocks in the main area in one go, create a loop that outputs the blocks one at a time and intelligently inserts the div elements to do 3 columns across and then next row of 3 across.
Then you need a means of how this area output can be instructed when to go to a new column and when to go to a new row. Here my ideas get a bit vague:
- Have a fixed number of blocks hard coded for each column/row.
- Use a custom attribute for the block that say c1,c2,c3 (but I don't even know if you can declare/attach custom attributes to blocks) to flag columns and rows.
- Create a custom block type that does not output anything, but can be inserted to flag columns and rows.
- include some text/marker in each block and parse the block output in php.
- Add a CSS class to each block for C1, C2, C3, then either parse the output text for this class in php (as above), or do it after the page has loaded with jQuery.
If you are going to do it with jQuery, you may not need the custom page type. Just add the classes to the blocks and do the clever stuff in the browser.
The clever code could be in a new page type.
Rather than output all the blocks in the main area in one go, create a loop that outputs the blocks one at a time and intelligently inserts the div elements to do 3 columns across and then next row of 3 across.
Then you need a means of how this area output can be instructed when to go to a new column and when to go to a new row. Here my ideas get a bit vague:
- Have a fixed number of blocks hard coded for each column/row.
- Use a custom attribute for the block that say c1,c2,c3 (but I don't even know if you can declare/attach custom attributes to blocks) to flag columns and rows.
- Create a custom block type that does not output anything, but can be inserted to flag columns and rows.
- include some text/marker in each block and parse the block output in php.
- Add a CSS class to each block for C1, C2, C3, then either parse the output text for this class in php (as above), or do it after the page has loaded with jQuery.
If you are going to do it with jQuery, you may not need the custom page type. Just add the classes to the blocks and do the clever stuff in the browser.
Hi,
Not sure if I reading you properly, but does this help?
Firstly you cannot repeat id's with same name only classes.
Secondly you cant repeat new Area with same name just like an id.
For me I would create classes. Then repeat in my template and obviously style them with CSS.
Example:
Not sure if I reading you properly, but does this help?
Firstly you cannot repeat id's with same name only classes.
Secondly you cant repeat new Area with same name just like an id.
For me I would create classes. Then repeat in my template and obviously style them with CSS.
<section class="box"> <div class="box1"> <?php $a = new Area('box1'); $a->display($c); ?> </div> <div class="box1"> <?php $a = new Area('box2'); $a->display($c); ?> </div> <div class="box1"> <?php $a = new Area('box3'); $a->display($c); ?> </div> </section> <section class="box"> <div class="box1"> <?php $a = new Area('box4'); $a->display($c); ?> </div>
Viewing 15 lines of 22 lines. View entire code block.
Example:
.box{width:960px;margin:10px 0;padding:0} .box1{float:left;width:280px;height:200px;background:#000;margin:5px 10px 5px 0;padding:10px}
Sections aren't repeatable, only new areas. So when I want to repeat the three boxes again as a group I have to add them to my template again. What I need is the block of three areas to be repeatable together. The only way possible seeks to be using add layout which is very messy.
Hi,
OK, so you need to use the designer block.
I successfully produced what you wanted, but 'WYSIWYG' was only allowed once in the code.
I had three rows of three cols, first was a 'WYSIWYG' part, then all others were text areas.
With my example CSS and all worked well.
Perhaps Jordan could modify the block to repeat the 'WYSIWYG' section.
Hope that helped.
OK, so you need to use the designer block.
I successfully produced what you wanted, but 'WYSIWYG' was only allowed once in the code.
I had three rows of three cols, first was a 'WYSIWYG' part, then all others were text areas.
With my example CSS and all worked well.
Perhaps Jordan could modify the block to repeat the 'WYSIWYG' section.
Hope that helped.
Unfortunately I can't make this change to Designer Content -- the limitation of 1 WYSIWYG field is due to some bugs in the core system which I am not able to spend the time on fixing. Maybe some day... (but maybe not).
What are you trying to repeat?
Are the DIV columns each containing an "add block" zone?
Is that what you want to repeat?
Once you have defined zones, your blocks will stack up underneath each other, so I'm not sure from your e-mail what you want to repeat.