Layout vom Designsystem per Template integrieren

Wichtiger Hinweis

Bei Subdomain-Angeboten besteht neben der Anwendung des Designsystem-Styleguides die Möglichkeit, Layouts und Inhalte direkt aus Imperia abzurufen. Bitte beachten Sie vor Beginn der Programmierung die Hinweise auf der Seite Auftritt extern erstellen mit Subdomain-Integration. Angebote der unmittelbaren Verwaltung, die nicht mit Imperia realisiert werden, müssen per Subdomain nach Berlin.de integriert werden. Eine Integration von externen Inhalten nach Berlin.de ohne vorherige Absprache mit der Landesredaktion / Koordinierung Berlin.de kann nicht durchgeführt werden.

Technische Vorgaben

Holen Sie sich die Templates bzw. Includes jede Stunde ab und cachen Sie lokal bei sich auf dem Server.

Vermeiden Sie unbedingt bei jedem Seitenaufruf die Dateien von unserem Server abzurufen. So ein Verhalten kann als DDoS-Angriff gewertet werden und ggf. zu einer Abschaltung der Integration oder zum Blocken der Abrufe führen.

Layout eines Imperia-Auftritts abrufen

Aus jedem Imperia-Auftritt kann ein Template in beliebiger URL-Tiefe erzeugt werden. Bitte klären Sie vorher mit den entsprechenden Bereichen ab, welcher Auftritt und ggf. welcher Pfad verwendet werden soll. Der Pfad bestimmt, welcher Menüpunkt in der Navigation hervorgehoben bzw. aufgeklappt wird.

Es gibt zwei Layout-Varianten, die Imperia bereitstellt. Diese unterscheiden sich in der Menge der redaktionellen Inhalte, die angezeigt werden.

Das Layout aus Imperia-Auftritten kann als komplettes Template oder in Form von Code-Schnipseln integriert werden.

Bei Nutzung des Templates wird im Quelltext an der Stelle des Kommentars “Hier den Applikations-Content einfuegen” der eigene Code eingefügt.

Die Code-Schnipsel müssen an den vorgegebenen Stellen im eigenen Code eingebunden werden. Das ist bspw. per ESI möglich. Weitere Informationen zu ESI finden Sie in der offiziellen Varnish-Dokumentation.

Variante “std”

Dieses Layout enthält die vollständige “Hülle” des Auftritts mit den Bestandteilen Header-Bereich der Institution, Navigation inkl. Breadcrumb, vorgegebenem Grid im Contentbereich und dem kompletten Footer (Auftrittsfooter und Landesfooter). Zusätzlich können noch die Notfallbox und Kontaktinformationen sichtbar sein.

Die URL zum Template sieht so aus:

Die URLs zu den Code-Schnipseln sehen wie folgt aus:

Variante “ohne”

Dieses Layout enthält die Bestandteile Header-Bereich der Institution, Navigation und den kompletten Footer (Auftrittsfooter und Landesfooter). Die Inhalte von Breadcrumb, Notfallbox sowie Kontaktinformationen werden nicht angezeigt. Somit ist mehr Platz für die Applikation verfügbar. Fehlende Informationen zur Wahrung der Barrierefreiheit (bspw. Breadcrumb) müssen dann selbst programmiert werden.

Die URL zum Template sieht so aus:

Die URLs zu den Code-Schnipseln sehen wie folgt aus:

Abruf des Berlin.de Portal-Headers und Landesfooters

Wenn die Layoutvorgaben der Landesredaktion es erlauben, können auch nur der Portal-Header und der Landesfooter ohne weitere Inhalte eines Imperia-Auftritts genutzt werden. Die URLs enthalten trotzdem den Bezug zu einem Auftritt, um die Zuordnung der Abrufe zu ermöglichen.

Portal-Header

Der Portal-Header enthält optisch nur das Berlin-Logo in der linken oberen Ecke. Im Quellcode sind zusätzlich die CSS- und JavaScript-Dateien vorhanden, um das Designsystem umsetzen zu können.

Die URL zum Template sieht so aus:

Der Portal-Header steht nur als komplettes Template zur Verfügung und enthält den Kommentar “Hier den Applikations-Content einfuegen”, wo die eigenen Inhalte eingefügt werden können.

Landesfooter

Der Landesfooter enthält den dunkelgrauen Footer, der mit zentralen Links für das Portal Berlin.de versehen ist. Der Landesfooter kann nicht gleichzeitig mit dem foot.inc (siehe Abschnitt “Layout eines Imperia-Auftritts abrufen”) genutzt werden.

Die URL zum Code-Schnipsel sieht so aus:

Beim Landesfooter können Parameter angehängt werden, damit CSS- und Javascript-Dateien nicht geladen werden. Das ist bspw. sinnvoll, wenn er zusammen mit dem Portal-Header genutzt wird.

Folgende Parameter können dazu an die URL angehängt werden:

  • “css=0” – für einen Aufruf ohne CSS
  • “js=0” – für einen Aufruf ohne JavaScript
  • die Kombination beider Parameter ist ebenfalls möglich

Ohne Parameter sind CSS und JavaScript enthalten.