Bereich mit wechselbarem Bild umsetzen

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.ä.).

blockTop mit Headerbild
blockTop mit Headerbild

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>
...
Metadaten Pflegemaske für Headerbild
Metadaten Pflegemaske für Headerbild

Welche Umsetzung Sie wählen, wird je nach Kundenwunsch und Projekt variieren. Hier ist zudem eine Vielzahl an weiteren Varianten denkbar.

Die aufgeführten Beispiele sind nicht auf Responsive Webdesign ausgelegt. Soll dies entsprechend unterstützt werden, passen Sie dies individuell an (z.B. max-width:100% Angabe zum img-Tag und mediaquery-Angaben für Ausblenden ab einer bestimmten Fensterbreite).