Hintergrundbild dynamisch pro Navigationspunkt definieren

20. Januar 2015

navigation hintergrundbild background-image backgroundimage dynamisch pflege erben

Dieser Artikel beschreibt, wie Sie das Hintergrundbild dynamisch durch den Pflegebenutzer setzen lassen können.

Umsetzung über Portalinhalte

Weblication® CMS Core/Grid bietet eine komfortable Möglichkeit für Pflegebenutzer, um Seiten abhängig vom Navigationspunkt ein Hintergrundbild zuweisen zu können. Zentral über "Portalinhalte zuweisen" können Sie den Redakteuren somit ein Werkzeug an die Hand geben, um die Webseiten mit Hintergrundbildern für den Inhalt (body) bzw. den Kopfbereich aufzuwerten.

Die BASE ab Version 2.x stellt Ihnen bereits standardmäßig diese Möglichkeit zur Verfügung. Pflegebenutzer müssen hierzu das Recht zur Bearbeitung der globalen Inhalte ("Portalinhalte") haben, was über die Datei-Eigenschaften der Portalinhalte-Datei (default.php) vergeben werden kann. Im Standard ist dies bereits für die Gruppe Chefredaktion und Redaktion und entsprechenden Rollen definiert.

In Weblication® angegemeldet finden Sie die Portalinhalte am schnellsten im Frontend über das Weblication® Panel:

Weblication® Panel - Portalinhalte zuweisen
Weblication® Panel - Portalinhalte zuweisen
Portalinhalte zuweisen - Navigationsabhängige Hintergrundbilder zuweisen
Portalinhalte zuweisen - Navigationsabhängige Hintergrundbilder zuweisen
Umsetzung manuell (ältere Projekte)

Das nachfolgende Beispiel führt an, wie Sie in älteren Projekten (vor BASE 2.x) die Navigationsbearbeitung um ein Feld zur Auswahl einer Grafik erweitern können, das Sie als Hintergrundgrafik heranziehen können.

Im Beispiel wird die Pflegemaske um das Attribut "imgBackgroundLink" erweitert. Über das context-Attribut setzen Sie den Pfad, in dem die Auswahl des Bildes beginnen soll.

Beispiel: Auszug aus der /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/editor/navigation/attributes.wEditorNavpoint.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<wEditorNavpoint version="1.0" xmlns:de="de" xmlns:en="en" xmlns:wsl="http://weblication.de/5.0/wsl">B
...
  <attribute name="imgBackgroundLink" editor="file" value="" context="/IhrAssetsProjekt/img/background-images" caption="Hintergrundgrafik" editable="1"/>
...
</wEditorNavpoint>

Ein Navigationspunkt wird über die o.g. Bearbeitenmaske nach der Bearbeitung z.B. wie folgt gesetzt. Wenn Sie dabei das Attribut mit "Link" enden lassen (also z.B.: imgBackgroundLink=...), dann wird dies von der Software korrekt als Link erkannt und z.B. bei Linkanpassungen berücksichtigt.

Beispiel: Auszug aus der /[IHR-INHALTS-PROJEKT]/wGlobal/content/navigations/standard.wNavigation.php

...
  <navPoint text="Unternehmen" link="/de/unternehmen/index.php" id="1243194933573" ... imgBackgroundLink="/deAssets/img/background-images/blumenmeer.jpg">
...

Den so gesetzten Pfad zum Hintergrundbild müssen Sie nun lediglich über das Ausgabetemplate auslesen, um diesen als Hintergrundbild verwenden zu können. Hierzu setzen Sie eine globale Variable (hier: wPathIncludeBackgroundImage), die ihren Wert aus dem oben definierten Navigationsattribut (imgBackgroundLink) zieht. Im Beispiel ist zudem angeführt, wie Sie prüfen, ob ein Wert gesetzt ist, um so bei nicht gesetztem Wert das Hintergrundbild des übergeordneten Navigationspunktes zu verwenden. Wenn kein Hintergrundbild über einen Navigationspunkt gefunden wird, wird auch kein Hintergrundbild gesetzt über das Ausgabetemplate gesetzt, womit z.B. eine Grafik aus der zentralen CSS-Datei eingebunden werden könnte.

Beispiel: Auszug aus dem Ausgabetemplate (standard.wDocument.php) des Projektes

...
<!-- Hier werden zentral die benötigten System-Parameter eingebunden -->
<xsl:include href="$XSLTPRE[wDocumentRoot]/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php"/>
...
<head>
...
  <!-- 
    Hier werden die in der Navigation definierten Hintergrundgrafiken eingebunden.
  -->
  <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'wPathIncludeBackgroundImage', document(concat($wDocumentRoot, $wProjectPath, '/wGlobal/content/navigations/standard.wNavigation.php'))//navPoint[@id = $wNavidStandard]/@imgBackgroundLink)"/>
  <xsl:if test="php:functionString('wEnv::getGlobalValue', 'wPathIncludeBackgroundImage') = ''">                
    <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'wPathIncludeBackgroundImage', document(concat($wDocumentRoot, $wProjectPath, '/wGlobal/content/navigations/standard.wNavigation.php'))//navPoint[@id = $wNavidStandard]/ancestor::navPoint[@imgBackgroundLink != ''][1]/@imgBackgroundLink)"/>
  </xsl:if>
  <xsl:if test="php:functionString('wEnv::getGlobalValue', 'wPathIncludeBackgroundImage') != ''">
  <style type="text/css">
    body {background-image:url(<xsl:value-of select="php:functionString('wEnv::getGlobalValue', 'wPathIncludeBackgroundImage')" />); background-repeat:no-repeat;}
  </style>
  </xsl:if>
...
</head>
...

Die verwendete globale Variable "wNavidStandard" in der standard.wDocument.php definieren Sie z.B. wie im BASE Basisprojekt über die standard.wParams.php. Sofern diese noch nicht vorhanden ist, tragen Sie diese wie folgt nach. Abweichungen in den Pfaden passen Sie entsprechend an.

Beispiel: Auszug aus der standard.wParams.php des Projektes

...
  <xsl:variable name="wNavidStandard"><xsl:value-of select="php:functionString('wNavigation::getNavId', concat($wProjectPath, '/wGlobal/content/navigations/standard.wNavigation.php'), $wDocumentURL)" /></xsl:variable>
...
Für diese Umsetzung kann kein kostenloser CMS-Support gewährt werden!

Beachten Sie, daß diese Umsetzung lediglich die Ausgabe der Webseiten für Seitenbesucher berücksichtigt. Das Hintergrundbild kann im Editor ggf. überlagert werden.

In der Datei für die Portalinhalte können Sie zum einen für den Kopfbereich Hintergrundbilder zuweisen, oder für die Seite (body). Nutzen Sie die entsprechenden Pflegebuttons (Bild-Symbol mit grünem Pfeil), um ein Zuweisen entweder für den Kopfbereich oder für die Seite über die Hauptnavigation oder die Metanavigation vorzunehmen. Bei Überfahren der Buttons mit der Maus zeigt Ihnen ein Tooltip (Alternativtext), was hinter welchem Button als Pflegemaske aufgerufen werden kann.

Die Pflegemaske für navigationsabhängige Hintergrundbilder ermöglicht Ihnen pro Navigationspunkt, hierzu einen Inhalt zu definieren. Im Eingabefeld wählen Sie über den Auswahlpfeil an der rechten Seite das Bild aus, das Sie als Hintergrundbild für die zum Navigationspunkt verlinkte Seite anzeigen wollen. Bei Unterpunkten können Sie zudem festlegen, ob dieser das Hintergrundbild vom übergeordneten Navigationspunkt erben soll ("Inhalt erben" -> "Inhalt wird geerbt").

Navigationsabhängige Hintergrundbilder zuweisen (Hauptnavigation)
Navigationsabhängige Hintergrundbilder zuweisen (Hauptnavigation)
Optimieren Sie die Hintergrundbilder für eine bestmögliche Qualität und Ladezeit!
Onlinedokumentation - Portalinhalte zuweisen
Onlinedokumentation - Datei-Eigenschaften - Rechte
FAQs are only visible for Weblication ai search and editors!
Wie kann ich in Weblication® das Hintergrundbild dynamisch abhängig vom Navigationspunkt setzen?
Über den Pflegebenutzer bzw. die Portalinhalte können Sie pro Navigationspunkt ein Hintergrundbild definieren. Weblication® CMS Core/Grid stellt ab Version 2.x hierfür standardmäßig die Möglichkeit bereit („Portalinhalte zuweisen“), sodass Redakteure navigationsabhängige Hintergrundbilder für den Inhalt (body) bzw. den Kopfbereich (head) zuweisen können.
Welche Rechte benötigt ein Pflegebenutzer, um Portalinhalte bearbeiten zu können?
Pflegebenutzer müssen das Recht zur Bearbeitung der globalen Inhalte („Portalinhalte“) haben. Dieses Recht kann über die entsprechenden Rollen/Zuordnungen vergeben werden; im Standard sind die Gruppen „Chefredaktion“ und „Redaktion“ (inkl. entsprechender Rollen) bereits dafür definiert.
Wo finde ich im Weblication® Panel die Funktion „Portalinhalte zuweisen“?
In Weblication® finden Sie die Portalinhalte am schnellsten im Frontend über das Weblication® Panel: „Weblication® Panel - Portalinhalte zuweisen“.
Wie funktioniert die Umsetzung ab Weblication® Version 2.x mit Portalinhalten?
Sie weisen Redakteuren über „Portalinhalte zuweisen“ ein Werkzeug zu, um Seiten abhängig vom Navigationspunkt mit Hintergrundbildern zu versehen. Dabei können Sie zentral je nach Pflegebutton Hintergrundbilder für den Kopfbereich oder für die Seite (body) zuweisen.
Welche manuelle Erweiterung ist in älteren Projekten (vor Version 2.x) nötig?
In älteren Projekten müssen Sie die Navigationsbearbeitung um ein Feld zur Auswahl einer Grafik erweitern, die als Hintergrundbild genutzt wird. Dazu wird in der Pflegemaske ein Attribut wie „imgBackgroundLink“ ergänzt (inkl. passendem context-Pfad für die Bildauswahl), sodass der ausgewählte Dateipfad als Link/Attribut in der Navigation gespeichert wird.
Wie setze ich den ausgewählten Hintergrundbildpfad in der Navigation korrekt?
Achten Sie darauf, dass das Attribut mit „Link“ endet (z. B. „imgBackgroundLink“). Dann erkennt die Software den Wert als Link und berücksichtigt ihn z. B. bei Linkanpassungen.
Wie lese ich das navigationsabhängige Hintergrundbild im Ausgabetemplate aus?
Im Ausgabetemplate (z. B. „standard.wDocument.php“) lesen Sie den in der Navigation hinterlegten Wert des Navigationsattributs aus und setzen ihn in einer globalen Variablen (im Beispiel: „wPathIncludeBackgroundImage“). Zusätzlich wird geprüft, ob ein Wert gesetzt ist; falls nicht, wird das Hintergrundbild des übergeordneten Navigationspunktes verwendet. Nur wenn die Variable nicht leer ist, wird im Template das Hintergrundbild per CSS gesetzt.
Was passiert, wenn für einen Navigationspunkt kein Hintergrundbild gesetzt ist?
Wenn kein Hintergrundbild für den aktuellen Navigationspunkt gefunden wird, wird (im Beispiel) das Hintergrundbild des nächsthöheren Navigationspunktes verwendet, der einen Wert für das Attribut „imgBackgroundLink“ besitzt. Wenn auch dort keines gesetzt ist, wird im Ausgabetemplate kein Hintergrundbild gesetzt.
Wie kann ich die globale Variable „wNavidStandard“ definieren?
Sofern „wNavidStandard“ noch nicht vorhanden ist, tragen Sie es in „standard.wParams.php“ nach. Im Beispiel wird „wNavidStandard“ über „wNavigation::getNavId“ anhand des Navigationsdateipfads und der Dokument-URL ermittelt. Pfade müssen ggf. an Ihr Projekt angepasst werden.
Gibt es Einschränkungen bei dieser Umsetzung?
Es wird ausdrücklich darauf hingewiesen, dass es für diese Umsetzung keinen kostenlosen CMS-Support gibt. Außerdem berücksichtigt die Umsetzung primär die Ausgabe für Seitenbesucher; im Editor kann das Hintergrundbild ggf. überlagert werden.
Kann ich Hintergrundbilder sowohl für den Kopfbereich als auch für die Seite (body) zuweisen?
Ja. In den Portalinhalten können Sie Hintergrundbilder sowohl für den Kopfbereich als auch für die Seite (body) zuweisen. Nutzen Sie dafür die entsprechenden Pflegebuttons (Bild-Symbol mit grünem Pfeil), um die Zuweisung für den gewünschten Bereich über die Hauptnavigation oder Metanavigation vorzunehmen. Beim Überfahren der Buttons zeigt ein Tooltip (Alternativtext), welche Pflegemaske dahinter aufgerufen wird.
Was bedeutet „Inhalt erben“ bei untergeordneten Navigationspunkten?
In der Pflegemaske für navigationsabhängige Hintergrundbilder können Sie pro Navigationspunkt definieren, ob Unterpunkte das Hintergrundbild vom übergeordneten Navigationspunkt erben sollen. Dafür gibt es die Option „Inhalt erben“ („Inhalt wird geerbt“).