Website lay-out wijzigen afhankelijk van de paginainhoud

[Rolf]

De websites die ik maak probeer ik altijd met zo weinig mogelijk templates te maken. Simpelweg omdat de technische kant van de website overzichtelijker blijft en daardoor voor de developer, maar ook voor de eindgebruiker eenvoudiger is bij te werken.
Zo moest ik voor mijn schoonvader een website maken met verschillende pagina lay-outs, dat willen zeggen 1, 2 óf 3 kolommen met content.
Met wat Smarty heb ik het toen zo gemaakt dat afhankelijk van het vullen van de drie beschikbare Content blokken de pagina lay-out automatisch wordt aangepast...

Stylesheet

Code: Select all

div#content {
        min-height: 300px;
        border: #ccc 2px solid;
        background: #fff;
}

div#sidebar-left {
        float: left;
        width: 375px;
        padding: 10px 15px;
}

div#sidebar-right {
        float: right;
        width: 375px;
        padding: 10px 15px;
}

HTML Template

Code: Select all

{* Start Content *}
<div id="content">

{content block="content_left" wysiwyg="true" label="Left column" assign="content_left"}
{content label="Main content (Required)" assign="content_main"}
{content block="content_right" wysiwyg="true" label="Right column" assign="content_right"}

{* Start sidebar left *}
{if $content_left}

{literal}
    <style type="text/css">
div#main {
padding-left: 410px;
}
    </style>
{/literal}

<div id="sidebar-left">
{$content_left}
</div>
{/if}
{* End sidebar left *}

{* Start sidebar right *}
{if $content_right}

{literal}
    <style type="text/css">
div#main {
padding-right: 410px;
}
    </style>
{/literal}

<div id="sidebar-right">
{$content_right}
</div>
{/if}
{* End sidebar right *}


{* Start Content *}
<div id="main">
{$content_main}
</div>
{* End Content Area *}

<div class="clear"></div>
</div>
{* End Content *}

Niet helemaal W3c valid, maar erg flexibel

Grtz. Rolf

[mcDavid]

Nice! Ik zie gelijk al legio mogelijkheden. Denk alleen dat het op mijn eigen site erg veel werk zou zijn om de pagina's aan te passen op een andere template.
Heb je misschien een live sample? Heb wel zin om ff wat met de HTML te experimenteren (met firebug).