E-PIA_ (Galerie) - WEBSALE Dokumentation

Die Galerie zeigt alle freigeschalteten Kundenfotos, entweder shopweit oder zu einem einzelnen Produkt. Welche der beiden Ansichten erscheint, entscheidet der Aufruf: mit dem Parameter pi und einem Produktindex werden nur die Bilder dieses Produktes geladen, ohne ihn alle Bilder des Shops. Das Template dafür tragen Sie in der Shopkonfiguration shop.config im Abschnitt <ProductsInAction> beim Parameter Gallery ein. Eingebunden wird es über WS-ExternInclude, der Inhalt steht dort innerhalb der Klammerung WS-Include. Wegweiser: ProductsInAction anbieten

Das Gerüst

E-PIA_ENTRIES-EXIST ist die äußere Entscheidung, E-PIA_DATA die Schleife über die Bilder der aktuellen Seite.

{!E-PIA_ENTRIES-EXIST}
   <p>Zu diesem Artikel ist noch kein Foto hochgeladen worden.</p>
   <a href="~WS-LoadTpl(ws_actionimage_upload.htm)~&pi=~E-PIA_PR-ProdIndex~">Seien Sie der Erste</a>
{/!E-PIA_ENTRIES-EXIST}

{E-PIA_ENTRIES-EXIST}
   <form id="ws_actimg_prodgal" action="~FORM-Template(ws_actionimage_gallery.htm)~">
      ~E-PIA_HiddenTags~

      Sortierung: ~E-PIA_SortList~
      Anzahl: ~E-PIA_MaxProductsList~
   </form>

   {E-PIA_DATA}
      <ul class="galerie">
         {@E-PIA_DATA}
            <li>
               <a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_Techname~">
                  <img src="~E-PIA_Action-Thumbnail~" alt="">
               </a>
               <p>Von ~E-PIA_Username~ am ~E-PIA_CreateDate~</p>
               {E-PIA_Comment}<p>~E-PIA_Comment~</p>{/E-PIA_Comment}
            </li>
         {/@E-PIA_DATA}
      </ul>
   {/E-PIA_DATA}
{/E-PIA_ENTRIES-EXIST}

Die äußere Klammerung {E-PIA_DATA} hält die Liste samt Rahmen aus der Seite heraus, solange nichts anzuzeigen ist. {E-PIA_ENTRIES-EXIST} darüber tut dasselbe für Sortierung und Blätterfunktion, die ohne Bilder ebenfalls sinnlos sind. Die Schleife verträgt eine Obergrenze in Klammern. {@E-PIA_DATA(6)} zeigt höchstens sechs Bilder der geladenen Seite, etwa für einen Anreißer auf der Startseite. Die Tags für das einzelne Bild innerhalb der Schleife stehen auf einer eigenen Seite: Referenz: E-PIA_ (Bilddaten)

Sortierung und Anzahl

Tag	Erzeugt
`E-PIA_SortList()`	die Auswahlliste für die Sortierreihenfolge
`E-PIA_MaxProductsList()`	die Auswahlliste für die Anzahl der Bilder pro Seite

Beide Tags erzeugen ein vollständiges select-Element samt Feldnamen. Was in den Klammern steht, wird als zusätzliches Attribut übernommen.

<form id="ws_actimg_prodgal" action="~FORM-Template(ws_actionimage_gallery.htm)~">
   ~E-PIA_HiddenTags~
   <label>Sortierung: ~E-PIA_SortList(class="auswahl")~</label>
   <label>Bilder pro Seite: ~E-PIA_MaxProductsList(class="auswahl")~</label>
   <noscript><button type="submit">Anzeigen</button></noscript>
</form>

Beide Listen sind Formularfelder ohne eigenen Absendeknopf. Im mitgelieferten Beispiel schickt ein kurzes Skript das Formular beim Wechsel der Auswahl ab. Ein noscript-Knopf daneben hält die Galerie auch ohne JavaScript bedienbar.

Die Sortierliste zeigt nur die Einträge, für die in der Shopkonfiguration shop.config im Abschnitt <ProductsInAction-Txt> ein Text hinterlegt ist. Zuständig sind DateNew, DateOld, ArticleName und Rating. Ein fehlender Eintrag lässt die zugehörige Sortierung wortlos aus der Liste verschwinden.Die Werte der Anzahl-Liste kommen aus dem Abschnitt <ProductsInAction-MaxProducts>. Ohne diesen Abschnitt bleibt die Liste leer, und der Besucher kann die Seitengröße nicht mehr ändern.

Referenz: Abschnitt ProductsInAction-Txt · Abschnitt ProductsInAction-MaxProducts

Die Blätterfunktion

Die Blätterfunktion besteht aus zwei Gruppen: Bereichs- und Schleifen-Tags, die entscheiden, welche Elemente überhaupt erscheinen, und Einzel-Tags, die den Parameteranhang für den jeweiligen Link liefern.

Tag	Greift, wenn
`E-PIA_ListPagingBack`	die aktuelle Seite nicht die erste ist
`E-PIA_ListPagingNext`	die aktuelle Seite nicht die letzte ist
`E-PIA_ListPagingBefore(x)`	Schleife über die x Seiten vor der aktuellen
`E-PIA_ListPagingAfter(x)`	Schleife über die x Seiten nach der aktuellen
`E-PIA_ListPagingMoreBefore(x)`	vor der aktuellen Seite mehr als x Seiten liegen
`E-PIA_ListPagingMoreAfter(x)`	nach der aktuellen Seite mehr als x Seiten liegen

Tag	Liefert den Parameteranhang für
`E-PIA_PagingParam`	die Seite des aktuellen Schleifendurchlaufs
`E-PIA_PagingParamBack`	die vorherige Seite
`E-PIA_PagingParamNext`	die nächste Seite
`E-PIA_PagingParamFirst`	die erste Seite
`E-PIA_PagingParamLast`	die letzte Seite
`E-PIA_Page`	die Seitennummer zur Beschriftung

{E-PIA_ListPagingBack}
   <a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~&~E-PIA_PagingParamBack~">zurück</a>
{/E-PIA_ListPagingBack}

{E-PIA_ListPagingMoreBefore(2)}…{/E-PIA_ListPagingMoreBefore(2)}

{@E-PIA_ListPagingBefore(2)}
   <a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~&~E-PIA_PagingParam~">~E-PIA_Page~</a>
{/@E-PIA_ListPagingBefore(2)}

<strong>~E-PIA_Page~</strong>

{@E-PIA_ListPagingAfter(2)}
   <a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~&~E-PIA_PagingParam~">~E-PIA_Page~</a>
{/@E-PIA_ListPagingAfter(2)}

{E-PIA_ListPagingMoreAfter(2)}…{/E-PIA_ListPagingMoreAfter(2)}

{E-PIA_ListPagingNext}
   <a href="~WS-LoadTpl(ws_actionimage_gallery.htm)~&~E-PIA_PagingParamNext~">weiter</a>
{/E-PIA_ListPagingNext}

E-PIA_Page gibt die Seitennummer des laufenden Schleifendurchlaufs aus. Außerhalb der beiden Schleifen steht der Wert aus dem letzten Durchlauf. Die aktuelle Seite erscheint deshalb nur dann richtig, wenn E-PIA_Page nach der Schleife E-PIA_ListPagingBefore steht, so wie im Beispiel oben. Vor der ersten Schleife gibt das Tag 0 aus.

Der Parameter von ListPagingBefore und ListPagingAfter begrenzt die Zahl der Seitenlinks links und rechts der aktuellen Seite. Ohne Parameter sind es vier. Derselbe Wert gehört in ListPagingMoreBefore und ListPagingMoreAfter, damit die Auslassungspunkte genau dann erscheinen, wenn die Linkleiste tatsächlich etwas auslässt.

E-PIA_PagingParamLast führt derzeit nicht zur letzten, sondern zur nächsten Seite und verhält sich damit wie E-PIA_PagingParamNext. Verwenden Sie für einen Sprung ans Ende der Galerie vorerst keinen Link auf dieses Tag.E-PIA_MaxPages gibt nicht die Gesamtzahl der Seiten aus, sondern die Nummer der nächsten Seite, auf der letzten Seite deren eigene Nummer. Ein Text nach dem Muster “Seite X von ~E-PIA_MaxPages~” stimmt damit nicht.

Alle Parameteranhänge tragen die aktuelle Sortierung und die Bilder pro Seite mit. Die Auswahl des Besuchers bleibt beim Blättern deshalb erhalten, ohne dass Sie im Template etwas dafür tun müssen.

Die Parameteranhänge folgen im Link direkt auf ~WS-LoadTpl(…)~ und werden mit & angehängt, nicht mit ?. WS-LoadTpl bringt das Fragezeichen bereits mit.

Die neuesten und die bestbewerteten Bilder

E-PIA_AdvData() öffnet einen zweiten, unabhängigen Auszug aus dem Bilderbestand. Innerhalb der Klammerung liefert {@E-PIA_DATA} die Bilder dieses Auszugs statt der Bilder der Galerieseite.

Schreibweise	Zeigt
`{E-PIA_AdvData($NewestImages,X)}`	die X zuletzt hochgeladenen Bilder
`{E-PIA_AdvData($BestImages,X)}`	die X bestbewerteten Bilder

{E-PIA_AdvData($BestImages,3)}
   <h2>Unsere beliebtesten Fotos</h2>
   {@E-PIA_DATA}
      <a href="~WS-LoadTpl(ws_actionimage_picture.htm)~&techname=~E-PIA_Techname~">
         <img src="~E-PIA_Action-Thumbnail~" alt="">
      </a>
      <p>Von ~E-PIA_Username~, Bewertung <img src="~E-PIA_RatingScoreImg~" alt=""></p>
   {/@E-PIA_DATA}
{/E-PIA_AdvData($BestImages,3)}

X ist optional und wird auf 1 bis 20 begrenzt. Ohne Angabe und bei einem Wert außerhalb dieses Bereichs sind es 20 Bilder. Gibt es keine passenden Bilder, entfernt WEBSALE V8s den gesamten Bereich samt Überschrift. Eine eigene Prüfung davor brauchen Sie nicht.

Die negative Klammerung funktioniert nur für $NewestImages. {!E-PIA_AdvData($BestImages,X)} bleibt wirkungslos und steht anschließend unaufgelöst in der Seite.E-PIA_AdvData() lässt sich nicht schachteln. Ein zweiter Auszug innerhalb eines ersten wird nicht ausgewertet.

Die Tags im Überblick

Tag	Einzel-Tag	Bereichs-Tag	negatives Bereichs-Tag	Schleifen-Tag
`E-PIA_ENTRIES-EXIST`	–	ja	ja	–
`E-PIA_DATA`	–	ja	ja	ja
`E-PIA_AdvData()`	–	ja	nur `$NewestImages`	–
`E-PIA_SortList()`	ja	–	–	–
`E-PIA_MaxProductsList()`	ja	–	–	–
`E-PIA_Page`	ja	–	–	–
`E-PIA_MaxPages`	ja	–	–	–
`E-PIA_ListPagingBack`	ja	ja	ja	–
`E-PIA_ListPagingNext`	ja	ja	ja	–
`E-PIA_ListPagingBefore()`	–	–	–	ja
`E-PIA_ListPagingAfter()`	–	–	–	ja
`E-PIA_ListPagingMoreBefore()`	–	ja	ja	–
`E-PIA_ListPagingMoreAfter()`	–	ja	ja	–
`E-PIA_PagingParam`	ja	–	–	–
`E-PIA_PagingParamBack`	ja	–	–	–
`E-PIA_PagingParamNext`	ja	–	–	–
`E-PIA_PagingParamFirst`	ja	–	–	–
`E-PIA_PagingParamLast`	ja	–	–	–

E-PIA_ListPagingBack und E-PIA_ListPagingNext geben als Einzel-Tag beide die Nummer der vorherigen Seite aus. Verwenden Sie beide ausschließlich als Klammerung und holen Sie sich die Ziele der Links über die PagingParam-Tags.

E-PIA_DATA, E-PIA_ENTRIES-EXIST und E-PIA_AdvData() sind im Galerie- und im Detailansichts-Template zulässig. Die Tags der Sortierung und der Blätterfunktion gelten nur im Galerie-Template.

​Das Gerüst

​Sortierung und Anzahl

​Die Blätterfunktion

​Die neuesten und die bestbewerteten Bilder

​Die Tags im Überblick

​Verwandte Themen

Das Gerüst

Sortierung und Anzahl

Die Blätterfunktion

Die neuesten und die bestbewerteten Bilder

Die Tags im Überblick

Verwandte Themen