TYPO3 Agency - coding, design and website development

Backend layouts

Úvod

TYPO3 od verzie 4.5 umožňuje tvorbu tzv. Backend Layouts, ktoré nám dávajú do rúk možnosti, ako sprehľadniť správu obsahu pre backend užívateľov.

O čo ide? TYPO3 štandardne ponúka takéto rozloženie obsahových blokov v backende (štyri stĺpce):

Štandardný TYPO3 - štyri stĺpce


Z týchto štyroch stĺpcov môžeme ktorýkoľvek "vypnúť" - skryť pre backend užívateľa nastavením v TS config. Napr. nasledujúce nastavenie zobrazí iba jeden stĺpec Normal (položka obsahuje čiarkou oddelené čísla stĺpcov 0 - 3):

mod.SHARED.colPos_list = 0

V množstve prípadov nám to postačuje, ale nemôžeme pridať ďalšie stĺpce, prípadne meniť ich rozloženie vertikálne aj horizontálne. A v neposlednom rade - v TYPO3 6.0 bolo nastavenie mod.SHARED.colPos_list odstránené, pričom plnohodnotnou náhradou majú byť práve Backend Layouts. Takže je najvyšší čas začať ich používať.

Zadanie

  • vytvoriť štruktúru stránok (štruktúra je zrejmá už z predošlého obrázku)
  • na samostatnej podstránke "Backend layouts" (sysfolder) vytvoriť layouty:
    • Normálny (jeden stĺpec)
    • Dva stĺpce
    • Hlavička a dva stĺpce
  • každý backend layout bude mať:
    • názov
    • ikonu (pre lepší prehľad backend užívateľa)
    • samotné nastavenie vzhľadu (stĺpce, rozloženie)
  • priradiť jednotlivým stránkam príslušné layouty

Riešenie

Pripravíme ikony pre backend layouty, ktoré približne graficky opisujú ich vzhľad:

Ikona: Normálny  Ikona: Dva stĺpce  Ikona: Hlavička a dva stĺpce

LAYOUT "NORMÁLNY"

Tvorba backend layoutu je veľmi podobná tvorbe HTML tabuľky, avšak jazykom Typoscriptu. Viac snáď napovie príklad. Navyše TYPO3 podporuje aj jeho vizuálnu tvorbu (wizzard).

Na stránke "Backend Layouts" vytvoríme prvý backend layout a to ten najjednoduchší - Normálny:

Backend layout

Konfigurácia

backend_layout {
  colCount = 1
  rowCount = 1
  rows {
       1 {
           columns {
               1 {
                   name = Obsah
                   colPos = 0
              }
           }
      }
  }
}

LAYOUT "DVA STĹPCE"

Uvádzame už len konfiguráciu, názov a ikonu už zvládne nastaviť každý.

Konfigurácia

backend_layout {
    colCount = 2
    rowCount = 1
    rows {
        1 {
            columns {
                1 {
                    name = Obsah
                    colPos = 0
                }
                2 {
                    name = Vpravo
                    colPos = 1
                }
            }
        }
    }
}

LAYOUT "HLAVIČKA A DVA STĹPCE"

Novinkou bude použitie nastavenia colspan na spojenie dvoch stĺpcov v bloku "Hlavička".

Konfigurácia

backend_layout {
    colCount = 2
    rowCount = 2
    rows {
        1 {
            columns {
                1 {
                    name = Hlavička
                    colspan = 2
                    colPos = 2
                }
            }
        }
        2 {
            columns {
                1 {
                    name = Obsah
                    colPos = 0
                }
                2 {
                    name = Vpravo
                    colPos = 1
                }
            }
        }
    }
}

Výsledok

Príslušným stránkam nastavíme vlastnosť Backend Layout (this page only) podľa potreby.
Pekne tam vidíme pripravené ikony, takže layout nastavíme aj bez toho, aby sme si pamätali, čo jeho názov presne znamená:

Nastavenia vlastnosti stránky

V prípade zložitejšej štruktúry stránok využijeme aj vlastnosť Backend Layout (subpages of this page), ktorej názov hádam hovorí sám za seba - nastaví layout všetkým podstránkam danej stránky (samozrejme len tým, ktoré nemajú nastavený iný - vlastný layout).

Stránky v TYPO3 backende potom budú vyzerať takto:

Normálny

Dva stĺpce

Hlavička a dva stĺpce