> ## 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_ (Gallery)

> Build the customer photo gallery: loop over the images, sorting, number per page, paging and the excerpts with the newest and the best-rated images.

The gallery shows all approved customer photos, either shop-wide or for a single product. Which of the two views appears is determined by the call: with the `pi` parameter and a product index, only the images of this product are loaded; without it, all images in the shop.

You enter the template for this in the shop configuration `shop.config` in the `<ProductsInAction>` section for the `Gallery` parameter. It is included via `WS-ExternInclude`; the content is placed there within the `WS-Include` range.

Guide: Offering ProductsInAction

## The structure

`E-PIA_ENTRIES-EXIST` is the outer decision, `E-PIA_DATA` the loop over the images on the current page.

```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}
```

> [!NOTE]
>
> The outer `{E-PIA_DATA}` range keeps the list and its frame off the page as long as there is nothing to display. `{E-PIA_ENTRIES-EXIST}` above it does the same for sorting and paging, which are also pointless without images.

> [!NOTE]
>
> The loop accepts an upper limit in parentheses. `{@E-PIA_DATA(6)}` shows at most six images of the loaded page, for example for a teaser on the home page.

The tags for the individual image within the loop are on a separate page: Reference: E-PIA\_ (Image data)

## Sorting and number

| Tag | Generates |
| - | - |
| `E-PIA_SortList()` | the selection list for the sort order |
| `E-PIA_MaxProductsList()` | the selection list for the number of images per page |

Both tags generate a complete `select` element including the field name. Whatever is in the parentheses is added as an additional attribute.

```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>
```

> [!NOTE]
>
> Both lists are form fields without their own submit button. In the supplied example, a short script submits the form when the selection changes. A `noscript` button next to them keeps the gallery usable without JavaScript.

> [!WARNING]
>
> The sort list only shows the entries for which a text is stored in the shop configuration `shop.config` in the `<ProductsInAction-Txt>` section. The relevant entries are `DateNew`, `DateOld`, `ArticleName` and `Rating`. A missing entry silently removes the corresponding sort option from the list.

> [!WARNING]
>
> The values of the number list come from the `<ProductsInAction-MaxProducts>` section. Without this section, the list remains empty and the visitor can no longer change the page size.

Reference: ProductsInAction-Txt section · Reference: ProductsInAction-MaxProducts section

## Paging

Paging consists of two groups: range and loop tags that decide which elements appear at all, and single tags that return the parameter suffix for the respective link.

| Tag | Applies if |
| - | - |
| `E-PIA_ListPagingBack` | the current page is not the first |
| `E-PIA_ListPagingNext` | the current page is not the last |
| `E-PIA_ListPagingBefore(x)` | loop over the x pages before the current one |
| `E-PIA_ListPagingAfter(x)` | loop over the x pages after the current one |
| `E-PIA_ListPagingMoreBefore(x)` | there are more than x pages before the current page |
| `E-PIA_ListPagingMoreAfter(x)` | there are more than x pages after the current page |

| Tag | Returns the parameter suffix for |
| - | - |
| `E-PIA_PagingParam` | the page of the current loop iteration |
| `E-PIA_PagingParamBack` | the previous page |
| `E-PIA_PagingParamNext` | the next page |
| `E-PIA_PagingParamFirst` | the first page |
| `E-PIA_PagingParamLast` | the last page |
| `E-PIA_Page` | the page number for the label |

```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` outputs the page number of the current loop iteration. Outside the two loops, it holds the value from the last iteration. The current page is therefore only displayed correctly if `E-PIA_Page` comes **after** the `E-PIA_ListPagingBefore` loop, as in the example above. Before the first loop, the tag outputs `0`.

> [!NOTE]
>
> The parameter of `ListPagingBefore` and `ListPagingAfter` limits the number of page links to the left and right of the current page. Without a parameter, it is four. The same value belongs in `ListPagingMoreBefore` and `ListPagingMoreAfter` so that the ellipsis appears exactly when the link bar actually omits something.

> [!WARNING]
>
> `E-PIA_PagingParamLast` currently leads not to the last page but to the next one, and thus behaves like `E-PIA_PagingParamNext`. For now, do not use a link with this tag to jump to the end of the gallery.

> [!WARNING]
>
> `E-PIA_MaxPages` does not output the total number of pages, but the number of the next page, and on the last page its own number. A text following the pattern "Page X of `~E-PIA_MaxPages~`" is therefore incorrect.

> [!NOTE]
>
> All parameter suffixes carry the current sorting and images per page. The visitor's selection is therefore retained while paging, without you having to do anything for it in the template.

> [!WARNING]
>
> In the link, the parameter suffixes directly follow `~WS-LoadTpl(…)~` and are appended with `&`, not with `?`. `WS-LoadTpl` already includes the question mark.

## The newest and the best-rated images

`E-PIA_AdvData()` opens a second, independent excerpt from the image collection. Within the range, `{@E-PIA_DATA}` returns the images of this excerpt instead of the images of the gallery page.

| Notation | Shows |
| - | - |
| `{E-PIA_AdvData($NewestImages,X)}` | the X most recently uploaded images |
| `{E-PIA_AdvData($BestImages,X)}` | the X best-rated images |

```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)}
```

> [!NOTE]
>
> X is optional and is limited to 1 to 20. Without a value, or with a value outside this range, 20 images are shown.

> [!NOTE]
>
> If there are no matching images, WEBSALE V8s removes the entire section including the heading. You do not need a separate check beforehand.

> [!WARNING]
>
> The negative range only works for `$NewestImages`. `{!E-PIA_AdvData($BestImages,X)}` has no effect and then remains unresolved on the page.

> [!WARNING]
>
> `E-PIA_AdvData()` cannot be nested. A second excerpt within a first one is not evaluated.

## The tags at a glance

| Tag | Single tag | Range tag | Negative range tag | Loop tag |
| - | - | - | - | - |
| `E-PIA_ENTRIES-EXIST` | – | yes | yes | – |
| `E-PIA_DATA` | – | yes | yes | yes |
| `E-PIA_AdvData()` | – | yes | only `$NewestImages` | – |
| `E-PIA_SortList()` | yes | – | – | – |
| `E-PIA_MaxProductsList()` | yes | – | – | – |
| `E-PIA_Page` | yes | – | – | – |
| `E-PIA_MaxPages` | yes | – | – | – |
| `E-PIA_ListPagingBack` | yes | yes | yes | – |
| `E-PIA_ListPagingNext` | yes | yes | yes | – |
| `E-PIA_ListPagingBefore()` | – | – | – | yes |
| `E-PIA_ListPagingAfter()` | – | – | – | yes |
| `E-PIA_ListPagingMoreBefore()` | – | yes | yes | – |
| `E-PIA_ListPagingMoreAfter()` | – | yes | yes | – |
| `E-PIA_PagingParam` | yes | – | – | – |
| `E-PIA_PagingParamBack` | yes | – | – | – |
| `E-PIA_PagingParamNext` | yes | – | – | – |
| `E-PIA_PagingParamFirst` | yes | – | – | – |
| `E-PIA_PagingParamLast` | yes | – | – | – |

> [!WARNING]
>
> As single tags, `E-PIA_ListPagingBack` and `E-PIA_ListPagingNext` both output the number of the previous page. Use both exclusively as ranges and get the link targets via the `PagingParam` tags.

`E-PIA_DATA`, `E-PIA_ENTRIES-EXIST` and `E-PIA_AdvData()` are permitted in the gallery and detail view templates. The sorting and paging tags only apply in the gallery template.

## Related topics

* Guide: Offering ProductsInAction
* Reference: ProductsInAction section
* Reference: E-PIA\_ (Image data)
* Reference: E-PIA\_ (Upload)
* Reference: E-PIA\_ (Single view and rating)


## Related topics

- [E-PIA_ (Upload)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/upload.md)
- [E-PIA_ (Image data)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/bilddaten.md)
- [E-PIA_ (Single view and rating)](https://dokumentation.websale.de/en/v8s/referenz/tags/e-pia/einzelansicht-und-bewertung.md)
- [PIA- (ProductsInAction)](https://dokumentation.websale.de/en/v8s/referenz/tags/pia-productsinaction.md)
- [Products, catalog, and search](https://dokumentation.websale.de/en/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/produkte-katalog-und-suche.md)


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