E-PIA_ (Gallery) - WEBSALE Dokumentation

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.

{!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}

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.

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.

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

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.

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.

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

{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 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.

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.

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.

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.

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.

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

{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 is optional and is limited to 1 to 20. Without a value, or with a value outside this range, 20 images are shown.

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

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

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

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.

Guide: Offering ProductsInAction
Reference: ProductsInAction section
Reference: E-PIA_ (Image data)
Reference: E-PIA_ (Upload)
Reference: E-PIA_ (Single view and rating)

​The structure

​Sorting and number

​Paging

​The newest and the best-rated images

​The tags at a glance

​Related topics

The structure

Sorting and number

Paging

The newest and the best-rated images

The tags at a glance

Related topics