Page 1 of 1
How to setup 2 col. content design best way...
Posted: Wed Mar 13, 2013 6:34 pm
by Bekker
Hi!
Im working on a design, where the admin should be able to add pages in 2 different ways.
1st.:
single colum content design, easy enough... like:
http://www.juleshow.dk/kobenhavn/showet
2nd.:
2 colum content, where admin is able to add to content in 2 cols..
like this:
http://www.juleshow.dk/
I was thinking about a structure like this:
Code: Select all
Home (2col page)
- Left
- Content block
- Content block
- Right
- Content Block
Page (single col page, with content indside this node)
And then make some sort of smarty that could see if Left and right is there, and then output it the right way.
And and if not, just make a single colum with the content...
Not sure how though, and am i going about this the right way?
Re: How to setup 2 col. content design best way...
Posted: Thu Mar 14, 2013 12:51 am
by paulbaker
Bekker wrote:Not sure how though, and am i going about this the right way?
That's probably the way I would do it. That doesn't mean it is the best way though! Interested in other's ideas on this.
Re: How to setup 2 col. content design best way...
Posted: Thu Mar 14, 2013 3:00 am
by calguy1000
in your template you could do something like:
Code: Select all
{content assign='main_content'}
{content block='othercolumn' assign='othercolumn'}
{* using twitter bootstrap scaffolding *}
<div class="row">
{if $othercolumn != ''}
{* want 2 column layout *}
<div class="span4">{$othercolumn}</div>
<div class="span8">{$main_content}</div>
{else}
{* want one column layout *}
<div class="span12">{$main_content}</div>
{/if}
</div>
This would provide two content areas for editors. if the second one was filled in you would get a 2 column layout... otherwise you would get a one column layout.
Re: How to setup 2 col. content design best way...
Posted: Thu Mar 14, 2013 7:57 am
by Rolf
Re: How to setup 2 col. content design best way...
Posted: Thu Mar 14, 2013 8:09 am
by velden
Just curious: why not making two different (inherited) templates?
Re: How to setup 2 col. content design best way...
Posted: Thu Mar 14, 2013 8:11 pm
by Bekker
Hi guys!
Thanks for all the ideas...
I have been looking on the content block concept.
But its not really what im looking for, i want to able to add "blocks" of content.
Like a news feed.... and then be able to put them i either right or left.
Or just display 1 full page.
Is it possible to get sub items of a page in smarty? so i could foreach them out or somthing? and then use somthing like the structe i wrote in my initial post?
Re: How to setup 2 col. content design best way...
Posted: Thu Mar 14, 2013 8:28 pm
by velden
So you want to have to have the possibility to add blocks of content to a page. Without knowing how much beforehand?
And on each block you should be able to choose right or left position?
You might want to look at the module ListIt2/ListitExtended
http://dev.cmsmadesimple.org/projects/listit2
However, it will be a little less simple for an editor to add content when it comes to adding a new page.
An items in ListIt2 could be a content block. You could define custom fields so editors can choose either right or left.
But then you must have a possibility for each item to tell it to which page(s) is belongs. Could be a category for example, but you should define those categories before. If an editor adds a new PAGE then a new category should be added.
Things get less complicated when no new pages will be added.
I got a feeling there is a better solution I'm not aware of...
Re: How to setup 2 col. content design best way...
Posted: Thu Mar 14, 2013 8:39 pm
by Bekker
Well the overall pages shouldnt change...
Only the content blocks...
So not sure if the list plugin is the right thing...
if i build a content structe like this:
Code: Select all
Home
- Left
- Block of content
- Block of content
- Right
- Block of content
- Block of content
- Block of content
SomePage
- Block of content
And then some smarty code in laylout to control it.
but not sure how to get the sub pages with smarty?
Re: How to setup 2 col. content design best way...
Posted: Thu Mar 28, 2013 2:22 am
by applejack
Re: not sure how to get the sub pages with smarty?
Use CGSimpleSmarty module then you can pull in content from other pages.
Re: How to setup 2 col. content design best way...
Posted: Fri Mar 29, 2013 1:32 pm
by chrisbt
The following might be the solution that you are looking for. I am now using something similar to the following as a default site layout.
Requires ECB module.
Code: Select all
{content label='Top Section' assign='content1'}
{content_module module='ECB' field='dropdown' block='leftSidebarOptions' label='Left Sidebar Options:' values='--- none ---=,Latest News=latest-news,News Categories=news-categories,Request Catalogue=request-catalogue,Social Media=social-media' multiple=1 size=5 assign='leftSidebarOptions'}
{content_module module='ECB' field='dropdown' block='rightSidebarOptions' label='Right Sidebar Options' values='--- none ---=,Latest News=latest-news,News Categories=news-categories,Request Catalogue=request-catalogue,Social Media=social-media' multiple=1 size=5 assign='rightSidebarOptions'}
{if $leftSidebarOptions && $rightSidebarOptions}
{$leftSidebarWidth='grid2'}{$contentWidth='grid8'}{$rightSidebarWidth='grid2'}
{elseif $leftSidebarOptions && !$rightSidebarOptions}
{$leftSidebarWidth='grid2'}{$contentWidth='grid10'}{$rightSidebarWidth=''}
{elseif !$leftSidebarOptions && $rightSidebarOptions}
{$leftSidebarWidth=''}{$contentWidth='grid10'}{$rightSidebarWidth='grid2'}
{else}
{$leftSidebarWidth=''}{$contentWidth='grid12'}{$rightSidebarWidth=''}
{/if}
...
<div id="main" class="row"><!--______ main ______-->
{if $leftSidebarWidth}
<aside id="left-sidebar" class="{$leftSidebarWidth}">
{global_content name='optionsLeftSidebar'}
</aside>
{/if}
<div id="content" class="{$contentWidth}">
{$content1}
</div><!-- content -->
{if $rightSidebarWidth}
<aside id="right-sidebar" class="{$rightSidebarWidth}">
{global_content name='optionsRightSidebar'}
</aside>
{/if}
</div><!-- main-->
Then a GCB 'optionsLeftSidebar' & something similar for the right.
Code: Select all
{$options=","|explode:$leftSidebarOptions}
{foreach $options as $option}
{if $option=='education-promo'}
{elseif $option=='latest-news'}
{news number='5' summarytemplate='News_Titles'}
{elseif $option=='news-categories'}
{news action='browsecat'}
{elseif $option=='request-catalogue'}
<img src="{uploads_url}/images/website-images/request-catalogue-temp.jpg" class="bottom3" />
{elseif $option=='social-media'}
<img src="{uploads_url}/images/website-images/social-media-temp.jpg" class="bottom3" />
{/if}
{/foreach}
Note: inspiration taken from
http://www.i-do-this.com/blog/36/Give-Y ... ir-Sidebar
plus the many other awesome devs that contribute to CMSMS and this forum.