Forums / Developer / One page, two designs. How to ?

One page, two designs. How to ?

Author Message

Kévin S.

Thursday 15 July 2010 2:17:34 am

Hello !

I am integrating a site which has two main parts. There are red pages and green pages that have only a few differences (background color and menus). There is a page that belongs to the two parts of the site, so it must have a red design and a green design, depending on the link that call it.

My problem is : in the pagelayout template, how should I proceed to automatically set the appropriate design (red or green) to the page ?

I've thought of fetching the node parent so I can know which part of the site is currently viewed, and then setting menus and divs like this (as in ezwebin templates) :

{if eq($site_design, 'red')}

    {include uri='design:page_redmenu.tpl'}
    <div id='red'>

{else}

    {include uri='design:page_greenmenu.tpl'}
    <div id='green'>

{/if}

... </div>

Is that a proper solution ? Do you have any better way to know the current part of the site, and to display the page in consequence ?
Thank you !

Brandon Chambers

Thursday 15 July 2010 9:22:20 am

The thing is, there are many "good" solutions for this.

I'm still fairly new to 'standard' eZ Publish practice, but I have some ideas for you.

Unless the templates contain many differences in code (HTML and any other template code) I would suggest using one template and pass different class/id parameters to the template so then you don't really need to clutter your templates with if/else statements and other control structures unless necessary. Then you can control the styles with those CSS classes/id's easily.

Otherwise, if the templates contain many differences as well as style, I guess you could use two different design folders to make the separation more clear (albeit with more folders and files spread out, but this allows for scalability if you have more design differences in the website).

And yes, you are right -- you can check the parent node id with {$obj.parent.node_id} to see where you're at in the site, given that you only have one level of links otherwise it can get complicated with multiple sub levels in your menu navigation.

Good luck and I hope this helps.

Brandon Chambers
brandon@granitehorizon.com
blog: http://blog.divdesigns.com
Granite Horizon / http://granitehorizon.com

Kévin S.

Friday 16 July 2010 1:37:44 am

Hi Brandon, thank you for your answer !

"

I would suggest using one template and pass different class/id parameters to the template 

"

Do you mean calling my template this way ?

{def $color=''}

{if ...}
    {$color='red'} 
{else}
    {$color='green'}
{/if}

{include uri='design:page_topmenu.tpl' param_css=$color}

Looks like a great idea, I'll test it ! But I just have to know which condition I test in the if...

Regarding the different folders to separate the "green" content from the "red" content, the original tree is made that way (the pages that can be either green or red have two locations). However, some pages are not direct children of these folders, so as you say, it is complicated to fetch the parent...

If anyone has an idea about this, it would be welcome !

Brandon Chambers

Friday 16 July 2010 8:59:46 am

You're welcome and yes, that's exactly what I mean.

I'm not sure what condition you want to use -- what constitutes a red versus a blue page? Check this sample content tree. If you have something like this then chances are you can just check for {$obj.parent.node_id} of 33 or 34 to make your decision.

-Red main page [node_id = 33]

-- red sub page

-- red sub page

-- red sub page

-Green main page [node_id = 34]

-- green sub page

-- green sub page

-- green sub page

Brandon Chambers
brandon@granitehorizon.com
blog: http://blog.divdesigns.com
Granite Horizon / http://granitehorizon.com

Kévin S.

Saturday 17 July 2010 7:55:15 am

My content tree is more like the following one :

Main frontpage

-Red main page - section 'red'

-- red subpage (object ID = 55)

-- red subpage

-Green main page - section 'green'

-- green subpage (object ID = 55)

-- green subpage

--- green subsubpage

--- green subsubpage

Since I have subsubpages, it is a bit complicated to get the main page. Yet I realize I don't have to specifically get the main page : if I get the section of the parent object, I can be able to know which design I should use (green or red). It is okay if I never add subsubpages under the object 55.

Maybe there's a fetch parameter to get the level 2 parent node (the Green or the Red main page), I'll check it out.

The differences between red and green pages are only the colors, and some parts of the navigation menu. I don't see any other way than getting the parent node to know which part of the site needs to be displayed.