Was ist das Ziel dieser Anleitung zur intelligenten Bildauswahl?

Die Anleitung erklärt, wie Sie die Bildauswahl so umsetzen, dass Redakteure nicht „wahllos“ beliebige Bilder aus dem Assets-Verzeichnis verwenden, sondern Bilder passend zur Struktur des jeweiligen Inhaltsprojekts auswählen.

Warum liefern Bildelemente im Struktureditor häufig Platzhalterbilder mit?

Bildelemente sind für den Struktureditor meist so implementiert, dass sie ein Platzhalterbild mitliefern. Dadurch sieht der Redakteur beim Einfügen des Bildelementes direkt im Editor, an welcher Stelle der Seite das Bild platziert wird.

Wie lässt sich die Dateiauswahl im Assets-Verzeichnis an die Struktur des Inhaltsprojekts koppeln?

Indem Sie im Assets-Verzeichnis Verzeichnispfade identisch zur Struktur im Inhaltsprojekt anlegen, z.B.: - Inhaltsprojekt/fussball/jugend/e-jugend/ - Assets-Projekt/wAssets/img/fussball/jugend/e-jugend/ So können Sie beim Bildelement den Startpfad der Dateiauswahl aus der aktuellen Inhaltsprojekt-Struktur ableiten.

Welche Rolle spielt das pathEmpty*-Attribut bei der Bildauswahl?

Mit pathEmpty definieren Sie den Pfad des Platzhalterbildes (z.B. /wAssets/img/placeholder.png oder /platzhalter.gif). Das wird verwendet, wenn kein Bildpfad vorhanden ist.

Wofür ist das pathIfEmpty*-Attribut zuständig?

pathIfEmpty gibt an, in welchem Pfad die Dateiauswahl starten soll, wenn kein Bildpfad voreingetragen ist. Dieser Pfad wird zudem als Startpfad genutzt, auch wenn der in pathEmpty hinterlegte Dateipfad (Platzhalter) eingetragen ist.

Wie kann ich sicherstellen, dass Redakteure beim Platzhalterbild immer im passenden Projektverzeichnis starten?

Verwenden Sie als pathIfEmpty den Projektpfad des Inhaltsprojekts: Der Startpfad wird dann das Verzeichnis sein, in dem sich der Redakteur in der Bearbeitung befindet, typischerweise kombiniert mit dem allgemeinen Assets-Bildverzeichnis (z.B. /wAssets/img). Zusätzlich können Sie festlegen, dass auch Mouseover-/Detailbilder entsprechend in diesem Projektpfad abgebildet werden.

Welche Bildpfade sollten für Hauptbild, Mouseover-Bild und Detail-Bild berücksichtigt werden?

Für alle relevanten Bildvarianten (Hauptbild, Mouseover-Bild, Detail-Bild) sollten die Editor-Einstellungen so konfiguriert werden, dass die Dateiauswahl im passenden Projektpfad startet. Das gilt insbesondere dann, wenn Sie die Auswahl für Mouseover- bzw. Detailbilder „entsprechend“ zum Bearbeitungskontext ausrichten möchten.

Kann man das Hauptverzeichnis in der Bildauswahl ausfiltern (z.B. nur einen Teilpfad anzeigen)?

Ja. Wenn Sie nicht das gesamte Hauptverzeichnis abbilden möchten (z.B. wAssets/img/jugend/e-jugend statt wAssets/img/fussball/jugend/e-jugend), können Sie dies beim Funktionsaufruf über eine entsprechende Filterung anpassen (z.B. indem ein Projektpfad aus dem abgeleiteten Verzeichnis entfernt wird).

So setzen Sie eine intelligente Bildauswahl um

Startseite

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:

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>

Weiterführende Links

Pflegetags-Referenz: Pflege von textbasierten Daten

FAQs are only visible for Weblication ai search and editors!

Was ist das Ziel dieser Anleitung zur intelligenten Bildauswahl?: Die Anleitung erklärt, wie Sie die Bildauswahl so umsetzen, dass Redakteure nicht „wahllos“ beliebige Bilder aus dem Assets-Verzeichnis verwenden, sondern Bilder passend zur Struktur des jeweiligen Inhaltsprojekts auswählen.
Warum liefern Bildelemente im Struktureditor häufig Platzhalterbilder mit?: Bildelemente sind für den Struktureditor meist so implementiert, dass sie ein Platzhalterbild mitliefern. Dadurch sieht der Redakteur beim Einfügen des Bildelementes direkt im Editor, an welcher Stelle der Seite das Bild platziert wird.
Wie lässt sich die Dateiauswahl im Assets-Verzeichnis an die Struktur des Inhaltsprojekts koppeln?: Indem Sie im Assets-Verzeichnis Verzeichnispfade identisch zur Struktur im Inhaltsprojekt anlegen, z.B.: - Inhaltsprojekt/fussball/jugend/e-jugend/ - Assets-Projekt/wAssets/img/fussball/jugend/e-jugend/ So können Sie beim Bildelement den Startpfad der Dateiauswahl aus der aktuellen Inhaltsprojekt-Struktur ableiten.
Welche Rolle spielt das pathEmpty*-Attribut bei der Bildauswahl?: Mit pathEmpty definieren Sie den Pfad des Platzhalterbildes (z.B. /wAssets/img/placeholder.png oder /platzhalter.gif). Das wird verwendet, wenn kein Bildpfad vorhanden ist.
Wofür ist das pathIfEmpty*-Attribut zuständig?: pathIfEmpty gibt an, in welchem Pfad die Dateiauswahl starten soll, wenn kein Bildpfad voreingetragen ist. Dieser Pfad wird zudem als Startpfad genutzt, auch wenn der in pathEmpty hinterlegte Dateipfad (Platzhalter) eingetragen ist.
Wie kann ich sicherstellen, dass Redakteure beim Platzhalterbild immer im passenden Projektverzeichnis starten?: Verwenden Sie als pathIfEmpty den Projektpfad des Inhaltsprojekts: Der Startpfad wird dann das Verzeichnis sein, in dem sich der Redakteur in der Bearbeitung befindet, typischerweise kombiniert mit dem allgemeinen Assets-Bildverzeichnis (z.B. /wAssets/img). Zusätzlich können Sie festlegen, dass auch Mouseover-/Detailbilder entsprechend in diesem Projektpfad abgebildet werden.
Welche Bildpfade sollten für Hauptbild, Mouseover-Bild und Detail-Bild berücksichtigt werden?: Für alle relevanten Bildvarianten (Hauptbild, Mouseover-Bild, Detail-Bild) sollten die Editor-Einstellungen so konfiguriert werden, dass die Dateiauswahl im passenden Projektpfad startet. Das gilt insbesondere dann, wenn Sie die Auswahl für Mouseover- bzw. Detailbilder „entsprechend“ zum Bearbeitungskontext ausrichten möchten.
Kann man das Hauptverzeichnis in der Bildauswahl ausfiltern (z.B. nur einen Teilpfad anzeigen)?: Ja. Wenn Sie nicht das gesamte Hauptverzeichnis abbilden möchten (z.B. wAssets/img/jugend/e-jugend statt wAssets/img/fussball/jugend/e-jugend), können Sie dies beim Funktionsaufruf über eine entsprechende Filterung anpassen (z.B. indem ein Projektpfad aus dem abgeleiteten Verzeichnis entfernt wird).