So setzen Sie eine intelligente Bildauswahl um

Nutzbar ab: Version

Veröffentlichungsdatum: 11. April 2011
Änderungsdatum: 16. Oktober 2014

bild picture auswahl pfad startet verzeichnis

Dieser Artikel beschreibt, wie Sie die Bildauswahl entsprechend der Struktur des Inhaltsprojektes umsetzen.

Bildelemente sind für den Struktureditor meist so umgesetzt, dass diese ein Platzhalterbild mitliefern. Auf diese Weise wird dem Redakteur beim Einfügen eines Bildelementes besser im Editor ersichtlich, an welcher Stelle der Seite das Bild platziert wird:

Seitenbearbeitung mit Platzhalter-Bild
Seitenbearbeitung mit Platzhalter-Bild

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/mastertemplates/items/picture.standard.wItemMastertemplate.php

...
    <wd:item name="Bild" en:name="Picture" icon="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_picture.gif" type="picture.standard">
      <wd:fragment id="title" type="char.text"/>
      <wd:fragment id="display" type="char.display">default</wd:fragment>
      <wd:fragment id="picture" type="picture.standard"><img class="picture" src="/deAssets/img/platzhalter.gif"/></wd:fragment>
      ...
    </wd:item>
...

Vor allem bei grösseren Projekten stellt sich häufig das Problem, dass die Bilder von den Redakteuren "wahllos" im Assets-Verzeichnis abgelegt werden. Dies können Sie über den Pflegekommentar für Texte komfortabel steuern.

Bilden Sie hierzu die Verzeichnispfade im Assets-Verzeichnis identisch zur Struktur im Inhaltsprojekt ab, z.B.:

  • Inhaltsprojekt
    /fussball/jugend/e-jugend/
  • Assets-Projekt
    /wAssets/img/fussball/jugend/e-jugend/

Im XSL-Template für das Bildelement setzen Sie über das pathEmpty-Attribut den Pfad des Platzhalterbildes (z.B. /wAssets/img/placeholder.png). Über das pathIfEmpty-Attribut geben Sie an, in welchem Pfad die Dateiauswahl starten soll, wenn kein Bildpfad voreingetragen ist. Dieser Pfad wird dann auch als Startpfad verwendet, wenn der in pathEmpty hinterlegte Dateipfad (z.B. Plathalterbild) eingetragen ist.

Das nachfolgende Beispiel führt dies in der Weise an, dass über das pathIfEmpty-Attribut immer das aktuelle Verzeichnis, in dem Sie sich in der Bearbeitung befinden, eingelesen wird. Diesem wird das allgemeine Assets-Verzeichnis für Bilder (z.B. /wAssets/img) vorangestellt.
Ein Redakteur startet bei gesetztem Platzhalterbild oder leerem Pfad immer im Bildverzeichnis, das dem Projektpfad entspricht. Für das Mouseover- bzw. Detailbild setzen Sie das auch entsprechend, wenn gewünscht.

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/picture.standard.wItem.php

...
<!-- ca. Zeile 36/37 (Bild) -->
<div class="wEditorElementLabel"><value-of select="php:functionString('wTexts::showTextUser', 'File', 'Datei', 'Fichier')"/></div>
<div class="wEditorElementValue"><!--web:text:start editor="picture" validator="/\.(jpe?g|gif|png)$/i" errorMessage="<xsl:value-of select="php:functionString('wTexts::showTextUser', 'Only images of type jpg, gif or png are allowed', 'Nur Bilder mit den Endungen jpg, gif oder png sind erlaubt!')"/>" paste="1" extensions="jpg|jpeg|gif|png" upload="1" pathEmpty="<xsl:value-of select="php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]')"/>/platzhalter.gif" pathIfEmpty="<xsl:value-of select="php:functionString('str_replace', concat('-', '-'), '-', php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]'))"/><xsl:value-of select="php:functionString('wPathName::getDirFile', php:functionString('wPageCur::getPath'))" />" onchange="refreshPictureEditor_<xsl:value-of select="wd:fragment[@id = 'picture']/img/@wEditorId"/>(file);"--><value-of select="wd:fragment[@id = 'picture']/img/@src"/><!--web:text:stop--></div>
...
...
<!-- ca. Zeile 119/120 (Mouseover-Bild) -->
<div class="wEditorElementLabel"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'Mouseover picture', 'Mouseover-Bild', 'Image survol')"/></div>
<div class="wEditorElementValue"><!--web:text:start editor="file" upload="1" extensions="jpg|jpeg|gif|png" pathEmpty="<xsl:value-of select="php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]')"/>/platzhalter.gif" pathIfEmpty="<xsl:value-of select="php:functionString('str_replace', concat('-', '-'), '-', php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]'))"/><xsl:value-of select="php:functionString('wPathName::getDirFile', php:functionString('wPageCur::getPath'))" />" --><xsl:value-of select="wd:fragment[@id = 'picture_hover']/text()"/><!--web:text:stop--></div>
...
...
<!-- ca. Zeile 124/125 (Detail-Bild) -->
<div class="wEditorElementLabel"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'Detail picture', 'Detailbild beim Anklicken', 'Image en détail par clic')"/></div>
<div class="wEditorElementValue"><!--web:text:start editor="file" upload="1" extensions="jpg|jpeg|gif|png" pathEmpty="<xsl:value-of select="php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]')"/>/platzhalter.gif" pathIfEmpty="<xsl:value-of select="php:functionString('str_replace', concat('-', '-'), '-', php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]'))"/><xsl:value-of select="php:functionString('wPathName::getDirFile', php:functionString('wPageCur::getPath'))" />" onchange="adaptSizePictureEditor_<xsl:value-of select="wd:fragment[@id = 'picture']/img/@wEditorId"/>()"--><xsl:value-of select="wd:fragment[@id = 'picture_detail']/text()"/><!--web:text:stop--></div>

Wollen Sie das Hauptverzeichnis im Assets-Verzeichnis nicht abbilden (z.B. /wAssets/img/jugend/e-jugend/ anstatt /wAssets/img/fussball/jugend/e-jugend/) filtern Sie dies beim Funktionsaufruf:

Beispiel: Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/picture.standard.wItem.php

...
<!-- ca. Zeile 36/37 (Bild) -->
<div class="wEditorElementLabel"><value-of select="php:functionString('wTexts::showTextUser', 'File', 'Datei', 'Fichier')"/></div>
<div class="wEditorElementValue"><!--web:text:start editor="picture" validator="/\.(jpe?g|gif|png)$/i" errorMessage="<xsl:value-of select="php:functionString('wTexts::showTextUser', 'Only images of type jpg, gif or png are allowed', 'Nur Bilder mit den Endungen jpg, gif oder png sind erlaubt!')"/>" paste="1" extensions="jpg|jpeg|gif|png" upload="1" pathEmpty="<xsl:value-of select="php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]')"/>/platzhalter.gif" pathIfEmpty="<xsl:value-of select="php:functionString('str_replace', concat('-', '-'), '-', php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]'))"/><xsl:value-of select="php:functionString('str_replace', $wProjectPath, '', php:functionString('wPathName::getDirFile', php:functionString('wPageCur::getPath')))" />" onchange="refreshPictureEditor_<xsl:value-of select="wd:fragment[@id = 'picture']/img/@wEditorId"/>(file);"--><xsl:value-of select="wd:fragment[@id = 'picture']/img/@src"/><!--web:text:stop--></div>
...
...
<!-- ca. Zeile 119/120 (Mouseover-Bild) -->
<div class="wEditorElementLabel"><value-of select="php:functionString('wTexts::showTextUser', 'Mouseover picture', 'Mouseover-Bild', 'Image survol')"/></div>
<div class="wEditorElementValue"><!--web:text:start editor="file" upload="1" extensions="jpg|jpeg|gif|png" pathEmpty="<xsl:value-of select="php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]')"/>/platzhalter.gif" pathIfEmpty="<xsl:value-of select="php:functionString('str_replace', concat('-', '-'), '-', php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]'))"/><xsl:value-of select="php:functionString('str_replace', $wProjectPath, '', php:functionString('wPathName::getDirFile', php:functionString('wPageCur::getPath')))" />" --><value-of select="wd:fragment[@id = 'picture_hover']/text()"/><!--web:text:stop--></div>
...
...
<!-- ca. Zeile 124/125 (Detail-Bild) -->
<div class="wEditorElementLabel"><value-of select="php:functionString('wTexts::showTextUser', 'Detail picture', 'Detailbild beim Anklicken', 'Image en détail par clic')"/></div>
<div class="wEditorElementValue"><!--web:text:start editor="file" upload="1" extensions="jpg|jpeg|gif|png" pathEmpty="<xsl:value-of select="php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]')"/>/platzhalter.gif" pathIfEmpty="<xsl:value-of select="php:functionString('str_replace', concat('-', '-'), '-', php:functionString('wVariables::getValue', 'image_path_if_empty', '/[IHR-LAYOUT-PROJEKT]'))"/><xsl:value-of select="php:functionString('str_replace', $wProjectPath, '', php:functionString('wPathName::getDirFile', php:functionString('wPageCur::getPath')))" />" onchange="adaptSizePictureEditor_<xsl:value-of select="wd:fragment[@id = 'picture']/img/@wEditorId"/>()"--><value-of select="wd:fragment[@id = 'picture_detail']/text()"/><!--web:text:stop--></div>
Pflegetags-Referenz: Pflege von textbasierten Daten