home | sitemap

Voorbeelden van templates

Eenvoudige template

Eenvoudige template om een lijst van pagina's te tonen. Van elke pagina wordt de titel, de leadimage, de samenvatting en de url getoond: 

<div class="lijst">
  <h2><!-- TMPL_VAR NAME="xcms_title" --></h2>
  <img src="/<!-- TMPL_VAR NAME="leadimage" -->" />
  <p><!-- TMPL_VAR NAME="xcms_description" --></p>
  <a href="/<!-- TMPL_VAR NAME="xcms_url" -->">Meer over <!-- TMPL_VAR NAME="xcms_title" --> »</a>
</div> 

Door bovenstaande html in een html-bestand te zetten bij de vormgeving, bijvoorbeeld in lijst.html, kan de template als volgt worden gebruikt:

[­LIST template=lijst s=1 n=10 labels=abc,xyz]

Fotogalerij

Door gebruik te maken van de variabelen xcms_first en xcms_last kan de lijst ook worden voor zien van specifieke html aan het begin en eind van de lijst.
Onderstaande voorbeeld toont een template voor een fotogalerij. Met het de eerste afbeelding wordt de html voor de weergave van de foto's ingevoegd. Vervolgens wordt de afbeelding zelf aan een array toegevoegd. En bij de laatste afbeelding wordt het script-gedeelte netjes afgesloten.
(NB: de javascript om de fotogalerij te laten werken is hier niet getoond!) 

<!-- TMPL_IF NAME="xcms_first" -->
<div class="fotogalerij">
  <h2><!-- TMPL_VAR NAME="titel" --></h2>
  <img id="gallery-img" src="/css/vormgeving/gfx/largeframe.gif" alt="" />
  <p class="links">
    <a id="next" href="#" onclick="javascript:return galleryNext()">Volgende »</a>
    <a id="prev" href="#" onclick="javascript:return galleryPrev()">« Vorige</a>
  </p>
</div>
<script type="text/javascript">
<!-- /TMPL_IF NAME="xcms_first" -->
  galleryArray.push(['<!-- TMPL_VAR NAME="xcms_url" -->']);
<!-- TMPL_IF NAME="xcms_last" -->
  galleryInit();
</script>
<!-- /TMPL_IF NAME="xcms_last" -->

De template kan bijv. met de volgende macro worden gebruikt (aangenomen dat de html in het bestand fotogalerij.html staat):

[­LIST type=img map="Mijn foto's" template=fotogalerij titel="Foto's van het feest!"]

De uitkomst van bovenstaande zou kunnen zijn:  

<div class="fotogalerij">
  <h2>Foto's van het feest!</h2>
  <img id="gallery-img" src="/css/vormgeving/gfx/largeframe.gif" alt="" />
  <p class="links">
    <a id="next" href="#" onclick="javascript:return galleryNext()">Volgende »</a>
    <a id="prev" href="#" onclick="javascript:return galleryPrev()">« Vorige</a>
  </p>
</div>
<script type="text/javascript">
  galleryArray.push(['website/images/mijn-foto-s/afbeelding1.jpg']);
  galleryArray.push(['website/images/mijn-foto-s/afbeelding2.gif']);
  galleryArray.push(['website/images/mijn-foto-s/afbeelding3.jpg']);
  galleryArray.push(['website/images/mijn-foto-s/afbeelding4.jpg']);
  galleryArray.push(['website/images/mijn-foto-s/afbeelding5.png']);
  galleryInit();
</script>