> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# E-PIA_ (Galerie)

> Die Galerie der Kundenfotos aufbauen: Schleife über die Bilder, Sortierung, Anzahl pro Seite, Blätterfunktion und die Auszüge mit den neuesten und den bestbewerteten Bildern.

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](https://dokumentation.websale.de/v8s/interaktive-funktionen/productsinaction-modul.md)

## Das Gerüst

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

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{!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.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<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.

> [!WARNING]
>
> 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](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productsinaction-txt) · [Abschnitt ProductsInAction-MaxProducts](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#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 |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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}
```

> [!WARNING]
>
> `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.

> [!WARNING]
>
> `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.

> [!WARNING]
>
> 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 |

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{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.

> [!WARNING]
>
> 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 | – | – | – |

> [!WARNING]
>
> `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.

## Verwandte Themen

* Wegweiser: ProductsInAction anbieten
* Referenz: [Abschnitt ProductsInAction](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md#productsinaction)
* Referenz: [E-PIA\_ (Bilddaten)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md)
* Referenz: [E-PIA\_ (Upload)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md)
* Referenz: [E-PIA\_ (Einzelansicht und Bewertung)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md)


## Related topics

- [E-PIA_ (Bilddaten)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/bilddaten.md)
- [E-PIA_ (Upload)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/upload.md)
- [E-PIA_ (Einzelansicht und Bewertung)](https://dokumentation.websale.de/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md)
- [ProductsInAction-Modul](https://dokumentation.websale.de/v8s/interaktive-funktionen/productsinaction-modul.md)
- [PIA- (ProductsInAction)](https://dokumentation.websale.de/v8s/referenz/tags/pia-productsinaction.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.