Bereich mit wechselbarem Bild umsetzen
22. Januar 2015
Gestalten Sie den Topbereich Ihrer Webseiten mit individuellen und ständig wechselnden Bildern.
Eine Webseite können Sie durch wechselnde Bilder im Kopfbereich der Seite ansprechender für Seitenbesucher gestalten. Hierfür stehen Ihnen viele Möglichkeiten der Umsetzung zur Verfügung.
Ausgehend von der BASE zeigen wir Ihnen nachfolgend ein paar Beispiele.
Einbinden eines eigenen Templates für Headerbilder
Setzen Sie im blockTop-Bereich des HTML Seiten-Template (standard.wDocument.php) zusätzlich zu den bestehenden Templateaufrufen (z.B. logo, searchbox, etc.) einen Templateaufruf auf Ihr individuelles Template (z.B. headerBild).
<!-- Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/standard.wDocument.php --> ... <!-- Headerbild --> <xsl:call-template name="headerBild" wd:pathTemplate="misc/includes.global.php#headerBild"/> ...
Dieser xsl:call-template Aufruf verweist auf das Template mit dem Namen "headerBild", welches über das in der standard.wDocument.php referenzierte XSL-Template includes.global.php definiert wird. Auf diese Weise halten Sie das HTML Seiten-Template übersichtlich und definieren den eigentlichen Code im Template für die XSLT Includes und Funktionen (includes.global.php).
Im Template definieren Sie dann innerhalb der xsl:template Tags den HTML-Quelltext für die einzubindende Grafik. Nachfolgend ein einfaches Beispiel mit einem fest definierten Bild.
Einfaches Beispiel für statisches Headerbild
<!-- Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php --> <!-- $wGlobalProjectPath ist ein Systemparameter, der in standard.params.php definiert ist (siehe weiterführende Links unten) --> ... <!-- Header-Bild: Hier wird das Header-Bild ausgelesen und ausgegeben --> <xsl:template name="headerBild"> <div id="headerBild"><img src="{$wGlobalProjectPath}/wGlobal/layout/images/headerBilder/bild-orange.jpg" alt="" /></div> </xsl:template> ...
/* Auszug aus design.css zum Headerbild */ #blockTop #headerBild {position:absolute;top:42px; right:0px;max-width:100%}
Im Beispiel sieht die Webseite mit der entsprechenden Formatierung in der design.css wie folgt aus. Das bzw. die hinterlegten Bilder legen Sie in der von Ihnen gewünschten Grösse ab. Alternativ können Sie die Bildgrösse auch in der Ausgabe beeinflussen (Breitenangabe, wsl:thumbnail Tag, o.ä.).
Einen Wechsel des Headerbildes können Sie nun auf unterschiedliche Weise umsetzen. Dies hängt ganz von den Kundenwünschen und Ihren Vorstellungen ab.
Nachfolgend finden Sie beispielhaft eine Umsetzung des headerBild-Templates, das abhängig von der aufgerufenen URL ein anderes Bild ausgibt.
Erweitertes Beispiel (1) für wechselnde Headerbilder je nach URL
<!-- Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php --> <!-- $wGlobalProjectPath ist ein Systemparameter, der in standard.params.php definiert ist (siehe weiterführende Links unten) --> ... <!-- Header-Bild: Hier werden verschiedene Header-Bilder / Grafiken ausgelesen und ausgegeben --> <xsl:template name="headerBild"> <div id="headerBild"> <xsl:choose> <xsl:when test="contains($wDocumentURL, '/aktuelles/')"> <img src="{$wGlobalProjectPath}/wGlobal/layout/images/headerBilder/bild-gruen.jpg" alt="Headerbild" title="Headerbild" /> </xsl:when> <xsl:when test="contains($wDocumentURL, '/unternehmen/')"> <img src="{$wGlobalProjectPath}/wGlobal/layout/images/headerBilder/bild-blau.jpg" alt="Headerbild" title="Headerbild" /> </xsl:when> <xsl:otherwise> <img src="{$wGlobalProjectPath}/wGlobal/layout/images/headerBilder/bild-orange.jpg" alt="Headerbild" title="Headerbild" /> </xsl:otherwise> </xsl:choose> </div> </xsl:template> ...
Erweitertes Beispiel (2) für wechselnde und pflegbare Headerbilder
<!-- Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php --> <!-- $wGlobalProjectPath ist ein Systemparameter, der in standard.params.php definiert ist (siehe weiterführende Links unten) --> ... <!-- Header-Bild: Hier werden verschiedene Header-Bilder / Grafiken ausgelesen und ausgegeben --> <xsl:template name="headerBild"> <div id="headerBild"> <xsl:variable name="headerBild" select="/wd:document/wd:extension/wd:object/wd:data[@id = 'headerBild']/text()"/> <xsl:choose> <xsl:when test="$headerBild != ''"> <img src="{$headerBild}" alt="Headerbild" title="Headerbild"/> </xsl:when> <xsl:otherwise> <img src="{$wGlobalProjectPath}/wGlobal/layout/images/headerBilder/bild-orange.jpg" alt="Headerbild" title="Headerbild" /> </xsl:otherwise> </xsl:choose> </div> </xsl:template> ...
Die Pflege / Auswahl des Bildpfades definieren Sie in der Metadaten-Maske:
<!-- Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/editmasks/standard.metadata.php --> ... <div class="wEditorExtensionLabel"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'Header Picture', 'Headerbild', 'Header Picture')"/></div> <div class="wEditorExtensionValue"><!--web:text:start editor="file" upload="1" preview="picture" dirType="image" pathIfEmpty="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/headerBilder" inputStyle="width:100%"--><xsl:value-of select="/wd:document/wd:extension/wd:object/wd:data[@id = 'headerBild']/text()"/><!--web:text:stop--></div> ...
Welche Umsetzung Sie wählen, wird je nach Kundenwunsch und Projekt variieren. Hier ist zudem eine Vielzahl an weiteren Varianten denkbar.