Ein Layout-Konzept erstellen

Bei der Erweiterung einer Website wird häufig ein neuer Seitentyp benötigt, etwa, wenn es eine neue Produktkategorie oder einen neuen Service-Bereich gibt, der auf der Website eine Entsprechung haben soll.

Ein neuer Seitentyp bedeutet, dass die Seiten anders dargestellt werden als alle anderen Seiten der Website. Dabei muss es sich nicht unbedingt um große Abweichungen handeln. Ein neuer Seitentyp liegt bereits vor, wenn beispielsweise im Hauptbereich zusätzliche Information angezeigt werden oder die Informationen anders aufbereitet werden.

Zur Illustration der Vorgehensweise wird in den folgenden Tutorials der mit CMS Fiona gelieferte Demo-Content um einen neuen Bereich, die Bildergalerie erweitert. Die Bildergalerie soll eine Webseite sein, auf der der Website-Besucher – beispielsweise nach Messen oder anderen Veranstaltungen – aktuelle Fotos betrachten kann. Das Layout der Bildergalerieseite unterscheidet sich nicht von den anderen Website-Bereichen, nur der Inhalt des Hauptbereichs der Seite soll anders sein. Dort sollen ein kurzer Text über das Ereignis sowie Miniaturbilder in einer Tabelle angezeigt werden. Klickt man auf ein Bild, soll es in der Originalgröße in einem neuen Fenster geöffnet werden.

Die Formulierung des zu erfüllenden Zwecks der neuen Seite ergänzen wir nun um eine genaue Spezifikation dessen, was alles benötigt wird, einschließlich Hinweise zur Funktion der einzelnen Bestandteile:

  1. Für den Text auf der Bildergalerie-Seite benötigen wir nichts Neues, sondern speichern ihn als Hauptinhalt der Seite.

  2. Da alle Bilder angezeigt werden sollen, die sich in einem definierten Ordner befinden, muss der Redakteur diesen Ordner festlegen können. Hierfür eignet sich eine Linkliste am besten. Zum einen kann eine Linkliste mehrere Links (in diesem Fall auf Bilderordner) aufnehmen, zum anderen werden die darin enthaltenen Links vom CMS gepflegt. Letzteres bedeutet, dass die Links in der Liste automatisch angepasst werden, wenn beispielsweise ein Bilderordner verschoben wird. Die neue Linkliste ist ein noch anzulegendes Feld mit den folgenden Eigenschaften:

    • Name: ip_galleryFolders
    • Typ: linklist
    • Titel: Bildergalerie-Ordner

  3. Der Redakteur soll alternativ zur Darstellung der Bilder als Tabelle wählen können, ob sie als Linkliste angezeigt werden sollen. Dies ist bei sehr umfangreichen Galerien oder großen Fotos sinnvoll, da sich dann die Ladegeschwindigkeit der Seite erhöht. Hierfür benötigen wir ein weiteres Feld:

    • Name: ip_galleryAsLinks
    • Typ: enum (Aufzählung) mit den Werten yes und no.
    • Titel: Galerie als Linkliste?

  4. Schließlich benötigen wir eine neue Dateivorlage. Diese Vorlage wählt der Redakteur aus, wenn er eine neue Seite vom Typ "Bildergalerie" anlegen möchte. In diese Vorlage nehmen wir die oben genannten neuen Felder, ip_galleryFolders und ip_galleryAsLinks auf. Ferner muss die Vorlage sämtliche Standardfelder (wie beispielsweise diejenigen zur Sortierung) enthalten. Die Vorlage wird die folgenden Eigenschaften haben:

    • Name: ip_imageGallery
    • Titel: Bildergalerie
    • Dateityp: publication (Ordner)
    • Felder: wie Vorlage "Allgemeiner Ordner" plus ip_galleryFolders und ip_galleryAsLinks mit der Voreinstellung no

  5. Nachdem die Felder und die Vorlage angelegt wurden (dies wird in den folgenden Abschnitten gezeigt), können Sie eine Datei vom Typ "Bildergalerie" anlegen und die folgenden Dinge festlegen:

    • Name, Titel und Hauptinhalt
    • In der rechten Spalte anzuzeigendes Bild
    • Sortierung und Anzeige in der Navigation
    • Den Bilderordner und den Anzeigemodus

  6. Die neue Datei muss danach über die Navigation auswählbar sein und angezeigt werden. Damit auch die Bilder in dem angegebenen Ordner auf der Seite zu sehen sind, ändern wir die für den Hauptbereich der Seite zuständige Layoutdatei L_content so, dass für Bildergalerieseiten eine Sublayoutdatei, SUBL_imageGallery, verwendet wird. Diese erstellen wir und lassen sie je nach Wert von ip_galleryAsLinks den Inhalt des Bilderordners in ip_galleryFolders als Tabelle mit Bildern oder als Linkliste generieren. Dabei verlinken wir die einzelnen Bilder bzw. erstellen die Links so, dass eine Großansicht in einem separaten Fenster angezeigt wird.