TYPO3 Agency - coding, design and website development

Fluidtemplate 2: Zmena vzhľadu stránky

Zadanie

Takáto požiadavka je v praxi veľmi častá - prihlásený backend užívateľ potrebuje pre vybrané stránky určovať rôzny vzhľad.
Možných riešení sa v Typo3 ponúka viacero, takže ak čas a boh dovolí, pokúsim sa ich postupne zverejniť čo najviac.
V tomto návode si uvedieme jednoduchšiu variantu, ako daný problém riešiť.

Budeme mať dve možnosti vzhľadu stránky:

  1. Normálny: menu + obsah
  2. Dva stĺpce: menu + obsah + pravý stĺpec

 
Vzhľad budeme meniť vlastnosťou stránky "Frontend Layout":

Nastavenie vlastnosti stránky 'Frontend Layout'

Riešenie

TS config (page)

Najprv v nastavení stránky TS config upravíme položky vlastnosti Frontend layout tak,
aby sa tam užívateľovi zobrazovalo len to, čo potrebuje, aj príslušným názvom (Normálny, Dva stĺpce).

TCEFORM {
    pages {
        layout {
            altLabels {
                0 = Normálny
                1 = Dva stĺpce
            }
            removeItems = 2, 3
        }
    }
}

Takto potom vyzerajú nové položky vlastnosti Frontend Layout:

Nastavenie vlastnosti stránky 'Frontend Layout' so zmenenými položkami

TS setup

Všimnite si, ako vlastnosť stránky layout odovzdáme ako premennú s rovnakým názvom do objektu FLUIDTEMPLATE.

temp.menu = HMENU
temp.menu {
  special = directory
  special.value = 29
}
temp.menu.1 = TMENU
temp.menu.1 {
  wrap = <ul>|</ul>
  NO {
    allWrap = <li>|</li>
    ATagTitle.field = title
  }
}

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/user_upload/fluidtemplate_2/index.html
  variables {
    layout = TEXT
    layout {
      field = layout
    }

    title = TEXT
    title {
      field = subtitle // title
    }
    menu < temp.menu
    content < styles.content.get
    contentRight < styles.content.getRight
  }
}

HTML šablóna (súbor index.html)

V HTML prepínanie vzhľadu zabezpečuje podmienka f:if (f:then, f:else)
podľa už spomínanej premennej layout.

<section>
    <header>
        <h1>{title}</h1>
        <nav>
            <f:format.raw>{menu}</f:format.raw>
        </nav>
    </header>
    <f:if condition="{layout} == 1">
        <f:then>
            <article>
                <f:format.raw>{content}</f:format.raw>
            </article>
            <aside>
                <f:format.raw>{contentRight}</f:format.raw>
            </aside>
        </f:then>
        <f:else>
            <article>
                <f:format.raw>{content}</f:format.raw>
            </article>
        </f:else>
    </f:if>
</section>

Výsledok pre Frontend Layout "Normálny"

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Page Layout 0</title>
        <meta name="generator" content="TYPO3 6.2 CMS">
    </head>
    <body>
        <section>
            <header>
                <h1>Page Layout 0</h1>
                <nav>
                    <ul>
                        <li><a href="index.php?id=30" title="Page Layout 0">Page Layout 0</a></li>
                        <li><a href="index.php?id=31" title="Page Layout 1">Page Layout 1</a></li>
                    </ul>
                </nav>
            </header>
            <article>
                <h2>Content header</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </article>
        </section>
    </body>
</html>

Výsledok pre Frontend Layout "Dva stĺpce"

Pribudol druhý stĺpec uzavretý v tagu aside.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Page Layout 1</title>
        <meta name="generator" content="TYPO3 6.2 CMS">
    </head>
    <body>
        <section>
            <header>
                <h1>Page Layout 1</h1>
                <nav>
                    <ul>
                        <li><a href="index.php?id=30" title="Page Layout 0">Page Layout 0</a></li>
                        <li><a href="index.php?id=31" title="Page Layout 1">Page Layout 1</a></li>
                    </ul>
                </nav>
            </header>
            <article>
                <h2>Content header</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
            </article>
            <aside>
                <h2>Right Content header</h2>
                <p>Morbi ac neque non metus facilisis scelerisque eget a ipsum. Etiam  malesuada...</p>
            </aside>
        </section>
    </body>
</html>

Čo poviete, celkom jednoduché nie?
S týmto si vystačíme v mnohých prípadoch.
Je to naozaj len základ, Typo3 a FLUIDTEMPLATE toho ponúka ešte oveľa viac.

A preto - neváhajte a experimentujte!