Hintergrundbilder dynamisch anzeigen
Veröffentlichungsdatum: 07. Dezember 2022
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Über den Layout-Wizard können Sie ein Hintergrundbild der Seite definieren. Soll nicht immer das gleiche Bild erscheinen und auch nicht manuell ausgetauscht werden, stehen Ihnen unterschiedliche Möglchkeiten zur Verfügung.
Zum einen können Sie das Hintergrundbild der Seite durch Upload eines neuen, aber gleich benannten Bildes bei Bedarf wechseln.
Eine andere Möglichkeit ist der Einsatz des Weblics® "Individuelles Hintergrundbild definieren", welches ab CMS-Version 017.002.221.000 die Möglichkeit unterstützt, über wEnv::setGlobalValue gesetzte Werte zu verwenden.
Hierzu tragen Sie in das Feld "Pfad des Hintergrundbildes" den gewünschten globalen Wert als Platzhalter ein, z.B.:
Zuvor setzen Sie ein PHP-Skript Element, in welchem Sie individuell definieren, welches Hintergrundbild verwendet werden soll. Im nachfolgenden Beispiel wird aus dem demo-Verzeichnis per Zufall ein Bild ausgewählt und als globaler Wert ('pathBackground') gesetzt.
Hintergrundbilder dynamisch über PHP einlesen (Während der XSLT-Transformation ausführen)
$imagesDir = wRepository::grepDocumentsDir('/default-wAssets/img/demo', '(jpg|png)', array('caseInsensitive' => true));
$backgroundImage = $imagesDir[rand(1, count($imagesDir) - 1)];
wEnv::setGlobalValue('pathBackground', $backgroundImage);
// Hinweis: Ein Hintergrundbild kann ggf. für die Dauer des Seitencache bestehen bleiben
Denkbar ist auch, daß Sie Bilder bezogen auf Zeiträume bzw. Ereignisse ablegen und zum jeweils passenden Zeitraum bzw. Ereignis einlesen.
Beispiel 2: Hintergrundbilder nach Monat auswählen
if(date("m") === '12'){
$backgroundImage = '/default-wAssets/img/backgrounds/month12.jpg';
}
else{
$backgroundImage = '/default-wAssets/img/backgrounds/default.jpg';
}
wEnv::setGlobalValue('pathBackground', $backgroundImage);
// Hinweis: Ein Hintergrundbild kann ggf. für die Dauer des Seitencache bestehen bleiben
Die Elemente können Sie z.B. direkt in einer bestimmten Seite setzen oder Sie nehmen das über die Portalinhalte vor, damit dies für alle Seiten greift.
Der Screen oben zeigt noch den Einsatz des Weblics® "CSS einbinden", was z.B. so aussehen kann:
CSS einbinden: #blockBody per CSS zusätzlich definieren
/* #blockBody auf transparente Hintergrundfarbe setzen, um das Hintergrundbild etwas abzusoften */ #blockBody {background-color:rgba(255,255,255,0.4);}