TYPO3 Agency - coding, design and website development

Zmena vzhľadu stránky

Zadanie

Potrebujeme, aby backend užívatelia mohli meniť vzhľad stránok na frontend-e zmenou nastavenia stránok.
Budeme mať dve možnosti vzhľadu:

  • jednostĺpcový obsah (Normal)
  • dvoj-stĺpcový obsah (Two columns)

Riešenie

Na prepínanie vzhľadu použijeme vlastnosť stránky Frontend Layout (na obrázku štandardný výber TYPO3):

TYPO3 stránka: Frontend Layout

Page TS config

Najprv zmeníme samotný výber vzhľadu stránky na nami požadované položky.
Odstránime niektoré štandardné typy (2, 3) a zvyšné si premenujeme podľa našich potrieb (0, 1).

TCEFORM.pages.layout {
altLabels {
0 = LLL:fileadmin/cmstypo3_v3/xml/locallang.xml:pages.layout.I.0
1 = LLL:fileadmin/cmstypo3_v3/xml/locallang.xml:pages.layout.I.1
}
removeItems = 2, 3
}

Jazykový súbor (locallang.xml)

Umiestnenie súboru: fileadmin/cmstypo3_v3/xml/locallang.xml

 

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3locallang>
<meta type="array">
<type>module</type>
</meta>
<data type="array">
<languageKey index="default" type="array">
<label index="pages.layout.I.0">Normal</label>
<label index="pages.layout.I.1">Two columns</label>
</languageKey>
<languageKey index="sk" type="array">
<label index="pages.layout.I.0">Normálny</label>
<label index="pages.layout.I.1">Dva stĺpce</label>
</languageKey>
</data>
</T3locallang>

Potom budeme mať vo vlastnostiach stránky na výber tieto možnosti:

TYPO3 stránka: Frontend Layout - užívateľsky definované možnosti

HTML šablóna (index.html)

Pripravíme si HTML šablónu, ktorá sa bude používať v TYPO3 na generovanie výstupu na frontend.
Umiestnenie súboru: fileadmin/cmstypo3/user_upload/wiki/index.html
Subpart LAYOUT_NORMAL sa použije pre jednostĺpcový vzhľad a subpart LAYOUT_TWO_COLUMNS pre dvoj-stĺpcový.

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Page TS config: Layout</title>
</head>
<body>

<!-- ###DOCUMENT_BODY### begin -->
###LAYOUT###
<!-- ###DOCUMENT_BODY### end -->

<!-- ###LAYOUT_NORMAL### begin -->
<article style="width: 600px;">
###CONTENT###
</article>
<!-- ###LAYOUT_NORMAL### end -->

<!-- ###LAYOUT_TWO_COLUMNS### begin -->
<article style="width: 600px;">
<section style="width: 290px; float: left;">
###CONTENT###
</section>
<section style="width: 290px; float: right;">
###CONTENT_RIGHT###
</section>
</article>
<!-- ###LAYOUT_TWO_COLUMNS### end -->

</body>
</html>

TS setup

Nakoniec nastavenie Typoscriptu, ktorý nám to všetko spojí dohromady:

# základné nastavenia: doctype, encoding, language
config {
  locale_all = sk_SK
  language = sk
  metaCharset = utf-8
  doctype = html5
  htmlTag_langKey = sk
}

# načítanie HTML šablóny
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
  template = FILE
  template.file = fileadmin/cmstypo3/user_upload/wiki/index.html
}

# štandardne použi subpart LAYOUT_NORMAL
temp.layout < temp.mainTemplate
temp.layout {
  workOnSubpart = LAYOUT_NORMAL
  marks {
    CONTENT < styles.content.get
  }
}

# ak je nastavená vlastnoť stránky Frontend Layout na hodnotu "Normálny" (1)
# použi subpart LAYOUT_TWO_COLUMNS
[page|layout = 1]
  temp.layout {
    workOnSubpart = LAYOUT_TWO_COLUMNS
    marks {
      CONTENT_RIGHT < styles.content.getRight
    }
  }
[end]

page = PAGE
page.10 < temp.mainTemplate
page.10 {
  workOnSubpart = DOCUMENT_BODY
  marks {
    LAYOUT < temp.layout
  }
}

Výsledok (screenshots)

Vzhľad Typo3 stránky: 'Normálny'

Vzhľad Typo3 stránky: 'Dva stĺpce'