Wird eine Tabelle mit den children des Bilderordners gefüllt,
erhalten wir für alle Unterdateien eine Tabellenzelle, also auch für den
Ordner homepage, in dem sich weitere Bilder befinden (die wir
jedoch nicht zeigen möchten). Wir müssen also dafür sorgen, dass nur Bilder
berücksichtigt werden und keine Ordner, Dokumente oder Ressourcen. Hierfür
verwenden wir eine so genannte
Exportvariable,
hier mit dem Namen images. In diese Variable kopieren wir mit
Hilfe einer list-Anweisung die Bilder des Zielordners. Welche
Datei ein Bild ist, lässt sich mit einer
condition-Anweisung
feststellen:
<npsobj list="ip_galleryFolders">
<npsobj modifyvar="clear" varname="images" />
<npsobj list="destination.children">
<npsobj condition="isEqual" name1="objType" value2="image">
<npsobj modifyvar="append" varname="images" name="self" />
</npsobj>
</npsobj>
<npsobj table="images" columns="3">
<npsobj insertvalue="var" name="name" />
</npsobj>
</npsobj>Mit
modifyvar="clear"
wird zunächst die Kontextliste images gelöscht, für den Fall,
dass sie im Laufe des Exports der Bildergalerieseite bereits verwendet wurde.
Anschließend werden die children mit Hilfe einer
list-Anweisung aufgelistet und einzeln mit
modifyvar="append"
in die Variable images kopiert. self referenziert hierbei die aktuelle Datei. Eine Datei in der
children-Liste wird nur dann zu images hinzugefügt,
wenn ihr Typ (objType) gleich image ist. Dies wird
mit der condition-Anweisung geprüft. In der
table-Anweisung wird dann images statt
destination.children herangezogen. Bitte prüfen Sie das Ergebnis
in der Vorschau:
In der Tabelle brauchen wir jetzt nur noch statt des Namens das Bild auszugeben.
Hierfür ersetzen wir insertvalue="var" durch
insertvalue="image":
<npsobj list="ip_galleryFolders">
<npsobj modifyvar="clear" varname="images" />
<npsobj list="destination.children">
<npsobj condition="isEqual" name1="objType" value2="image">
<npsobj modifyvar="append" varname="images" name="self" />
</npsobj>
</npsobj>
<npsobj table="images" columns="3">
<npsobj insertvalue="image" name="self" width="80" title="@self.title" />
</npsobj>
</npsobj>Die Anweisung insertvalue="image" erzeugt ein
img-Tag. Sie enthält ein title-Attribut, das nicht zur Anweisung gehört und daher in das erzeugte
img-Tag übernommen wird. Der Wert des Attributs wird mit @self.title
auf den Titel des jeweiligen Bildes gesetzt. Das @-Zeichen vor dem
eigentlichen Tag-Attributwert kennzeichnet diesen als Namen, der im aktuellen
Kontext ausgewertet werden soll. Solche Attributwerte werden
@-Referenzen genannt.
Belegen Sie den Hauptinhalt Ihres Bildergalerie-Ordners bitte noch mit
einem kurzen Text wie "Hier finden Sie die Bilder, die Sie auch als Poster
bestellen können. Ein Klick auf ein Bild öffnet die Großansicht." (für letzteres
werden wir anschließend sorgen). Betrachten
Sie nun das Ergebnis in der Vorschau. Durch das title-Tag sehen
Sie den Titel eines Bildes als Tooltip, wenn sich der Mauszeiger darüber
befindet:
