Wo muss ich den Templateaufruf für das Headerbild einfügen?

Fügen Sie im blockTop-Bereich des HTML-Seiten-Templates (standard.wDocument.php) zusätzlich zu den vorhandenen Templateaufrufen einen xsl:call-template für Ihr individuelles Template ein, z.B.: - xsl:call-template name="headerBild" wd:pathTemplate="misc/includes.global.php#headerBild"

Wie verknüpfe ich das HTML-Template mit dem eigentlichen XSLT-Template für das Headerbild?

Der xsl:call-template-Aufruf verweist auf ein Template mit dem Namen headerBild, das über das referenzierte XSL-Template in includes.global.php definiert wird. Dadurch bleibt das Seiten-Template übersichtlich und die Bildausgabe liegt im XSLT-Template.

Wie kann das Headerbild je nach URL gewechselt werden?

Nutzen Sie im headerBild-Template xsl:choose/xsl:when-Tests auf die aufgerufene URL (z.B. $wDocumentURL). Je nach Treffer wird ein anderes Bild ausgegeben, z.B.: - Wenn contains($wDocumentURL, '/aktuelles/') → bild-gruen.jpg - Wenn contains($wDocumentURL, '/unternehmen/') → bild-blau.jpg - Sonst → bild-orange.jpg

Wie kann ich Headerbilder so umsetzen, dass sie pflegbar sind (über Metadaten)?

Lesen Sie den Bildpfad aus einer Metadaten-Maske (z.B. ein Feld mit id="headerBild") und geben Sie das Bild nur aus, wenn ein Wert vorhanden ist. Andernfalls verwenden Sie einen Fallback. Im Template wird z.B. ein Variablenwert aus der Dokumenterweiterung ausgelesen: - select="/wd:document/wd:extension/wd:object/wd:data[@id = 'headerBild']/text()" Wenn $headerBild nicht leer ist, wird img src="{$headerBild}" verwendet, sonst ein Standardbild (z.B. bild-orange.jpg).

Wo definiere ich die Auswahl bzw. Pflege des Headerbildes in der Metadaten-Maske?

In der Metadaten-Maske (z.B. standard.metadata.php) definieren Sie ein Feld, das einen Bild-Upload bzw. einen Bildpfad ermöglicht. Dort wird typischerweise ein Editor-Element wie web:text mit upload/picture-Parameter genutzt und als Pfad-Startverzeichnis z.B. auf /wGlobal/layout/images/headerBilder gesetzt. Das Feld bezieht sich auf /wd:document/wd:extension/wd:object/wd:data[@id = 'headerBild'].

Wie kann ich die Darstellung des Headerbildes beeinflussen (z.B. Größe/Responsive)?

Je nach Umsetzung können Sie die Bildgröße beeinflussen, z.B. durch CSS (max-width:100%) am img-Tag/Container oder durch einen Ausgabe-Mechanismus (z.B. Breitenangaben, wsl:thumbnail, o.ä.). Hinweis: Die Beispiele in der Seite sind nicht auf Responsive Webdesign ausgelegt—für Responsive müssen Sie das individuell anpassen, z.B. mit media-queries und passenden max-width/Skalierungen.

Unterstützen die gezeigten Beispiele Responsive Webdesign?

Nein. Die aufgeführten Beispiele sind ausdrücklich nicht auf Responsive Webdesign ausgelegt. Wenn Responsive unterstützt werden soll, müssen Sie die Ausgabe und das CSS (z.B. max-width:100% und mediaquery-Angaben) entsprechend anpassen.

Bereich mit wechselbarem Bild umsetzen

Startseite

22. Januar 2015

header top grafik bild logo

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
Einfaches Beispiel für statisches Headerbild
Erweitertes Beispiel (1) für wechselnde Headerbilder je nach URL
Erweitertes Beispiel (2) für wechselnde und pflegbare Headerbilder

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.

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

Weiterführende Links

Grundlagen - Systemparameter bei der XSL-Transformation

SELFHTML: xsl:call-template (Schablone aufrufen)

SELFHTML: xsl:template (Schablone für Ergebnisbaum definieren)

SELFHTML: xsl:choose (Auswahl treffen)

SELFHTML: xsl:variable (Variable definieren)

FAQs are only visible for Weblication ai search and editors!

Wie kann ich im Topbereich meiner Webseite wechselnde Headerbilder umsetzen?: Sie können den Kopfbereich (blockTop) Ihrer Seite mit einem Template für Headerbilder gestalten. Dafür binden Sie in der HTML-Seiten-Template-Datei (z.B. standard.wDocument.php) zusätzlich zu den bestehenden Templateaufrufen einen Aufruf auf Ihr eigenes Template (z.B. headerBild) ein. So wird der Code für die Ausgabe der Headergrafik im jeweiligen XSLT-Template gekapselt.
Wo muss ich den Templateaufruf für das Headerbild einfügen?: Fügen Sie im blockTop-Bereich des HTML-Seiten-Templates (standard.wDocument.php) zusätzlich zu den vorhandenen Templateaufrufen einen xsl:call-template für Ihr individuelles Template ein, z.B.: - xsl:call-template name="headerBild" wd:pathTemplate="misc/includes.global.php#headerBild"
Wie verknüpfe ich das HTML-Template mit dem eigentlichen XSLT-Template für das Headerbild?: Der xsl:call-template-Aufruf verweist auf ein Template mit dem Namen headerBild, das über das referenzierte XSL-Template in includes.global.php definiert wird. Dadurch bleibt das Seiten-Template übersichtlich und die Bildausgabe liegt im XSLT-Template.
Wie setze ich ein einfaches, statisches Headerbild um?: Im Template headerBild (z.B. in includes.global.php) geben Sie ein fest definiertes Bild aus, z.B. mit einem img-Tag: - src="{$wGlobalProjectPath}/wGlobal/layout/images/headerBilder/bild-orange.jpg" Die Position/Anzeige können Sie anschließend per CSS steuern (z.B. #blockTop #headerBild { position:absolute; top:42px; right:0px; max-width:100%; }).
Wie kann das Headerbild je nach URL gewechselt werden?: Nutzen Sie im headerBild-Template xsl:choose/xsl:when-Tests auf die aufgerufene URL (z.B. $wDocumentURL). Je nach Treffer wird ein anderes Bild ausgegeben, z.B.: - Wenn contains($wDocumentURL, '/aktuelles/') → bild-gruen.jpg - Wenn contains($wDocumentURL, '/unternehmen/') → bild-blau.jpg - Sonst → bild-orange.jpg
Wie kann ich Headerbilder so umsetzen, dass sie pflegbar sind (über Metadaten)?: Lesen Sie den Bildpfad aus einer Metadaten-Maske (z.B. ein Feld mit id="headerBild") und geben Sie das Bild nur aus, wenn ein Wert vorhanden ist. Andernfalls verwenden Sie einen Fallback. Im Template wird z.B. ein Variablenwert aus der Dokumenterweiterung ausgelesen: - select="/wd:document/wd:extension/wd:object/wd:data[@id = 'headerBild']/text()" Wenn $headerBild nicht leer ist, wird img src="{$headerBild}" verwendet, sonst ein Standardbild (z.B. bild-orange.jpg).
Wo definiere ich die Auswahl bzw. Pflege des Headerbildes in der Metadaten-Maske?: In der Metadaten-Maske (z.B. standard.metadata.php) definieren Sie ein Feld, das einen Bild-Upload bzw. einen Bildpfad ermöglicht. Dort wird typischerweise ein Editor-Element wie web:text mit upload/picture-Parameter genutzt und als Pfad-Startverzeichnis z.B. auf /wGlobal/layout/images/headerBilder gesetzt. Das Feld bezieht sich auf /wd:document/wd:extension/wd:object/wd:data[@id = 'headerBild'].
Wie kann ich die Darstellung des Headerbildes beeinflussen (z.B. Größe/Responsive)?: Je nach Umsetzung können Sie die Bildgröße beeinflussen, z.B. durch CSS (max-width:100%) am img-Tag/Container oder durch einen Ausgabe-Mechanismus (z.B. Breitenangaben, wsl:thumbnail, o.ä.). Hinweis: Die Beispiele in der Seite sind nicht auf Responsive Webdesign ausgelegt—für Responsive müssen Sie das individuell anpassen, z.B. mit media-queries und passenden max-width/Skalierungen.
Unterstützen die gezeigten Beispiele Responsive Webdesign?: Nein. Die aufgeführten Beispiele sind ausdrücklich nicht auf Responsive Webdesign ausgelegt. Wenn Responsive unterstützt werden soll, müssen Sie die Ausgabe und das CSS (z.B. max-width:100% und mediaquery-Angaben) entsprechend anpassen.