« »

Reacties per pagina

Via de reacties per pagina-module kunnen, what's in a name, bezoekers reageren op een pagina. De module kan de reacties weergeven en het formulier om bezoekers te laten reageren.

Aan het eind van deze pagina staat een voorbeeld van zo'n reactie per pagina-mogelijkheid.

De volgende variabelen zijn beschikbaar:

xcms_comments_on	Of reacties voor de huidige pagina zijn toegestaan.
xcms_comments_count	Het aantal reacties.
xcms_comments_form	Het reactieformulier.
xcms_comments_output	De reacties.
xcms_comments_rating	De gemiddelde waardering/rating tussen 0 en 1 (incl.)

xcms_comments_output bevat alle reacties op basis van het template comments.html. Deze template dient in de map van de vormgeving te staan. In de template kunnen de reacties via een TMPL_LOOP worden verwerkt. Voorbeeld:

<div id="comments">
<!-- TMPL_LOOP NAME="xcms_comments" -->
<div class="item">
  <p class="info"><span><!-- TMPL_VAR NAME="xcms_counter" --></span> <!-- TMPL_VAR NAME="xcms_date" ESCAPE="HTML" --> | <a href="mailto:<!-- TMPL_VAR NAME="xcms_email" ESCAPE="HTML" -->"><!-- TMPL_VAR NAME="xcms_name" ESCAPE="HTML" --></a>
  </p>
  <p class="comment">
    <!-- TMPL_VAR NAME="xcms_comment" -->
  </p>
</div>
<!-- /TMPL_LOOP NAME="xcms_comments" --> 
</div>

Per reactie zijn de volgende gegevens beschikbaar:

xcms_date	De datum van de reactie.
xcms_name	De naam van bezoeker.
xcms_email	Het e-mailadres van de bezoeker.
xcms_comment	De reactie van de bezoeker.
xcms_rating	Waardering/rating tussen 0 en 1 (incl.) bij deze reactie
xcms_stars	Het aantal sterren zoals ingesteld
xcms_overall_rating	De gemiddelde waardering/rating over alle reacties.
Daarnaast zijn de gebruikelijke loop-variabelen beschikbaar:
xcms_first	Is 1 voor de eerste reactie.
xcms_last	Is 1 voor de laatste reactie.
xcms_counter	Het volgnummer van de reactie (1, 2, 3, etc.)
xcms_odd	Is 1 als het volgnummer oneven is.
xcms_count	Het totaal aantal reacties.
xcms_all	De lijst van alle reacties. Deze variabele kan dus weer in een TMPL_LOOP worden gebruikt.
xcms_site	De naam van de website.

De meest eenvoudige vorm om reacties en formulier te tonen is:

...
<!-- TMPL_IF NAME="xcms_comments_on" -->
  <!-- TMPL_VAR NAME="xcms_comments_form" -->
  <!-- TMPL_VAR NAME="xcms_comments_output" -->
<!-- /TMPL_IF NAME="xcms_comments_on" -->
...

Iets uitgebreider is onderstaande voorbeeld: In een h3 toont het de titel + aantal reacties gevolgd door een linkje om een reactie te plaatsen. Het reactieformulier is initieel niet zichtbaar, het verschijnt pas na het klikken op het linkje. Aan het eind van de reacties staat weer een linkje om een reactie te plaatsen, dat linkje is echter pas zichtbaar als er meer dan 5 reacties zijn.

...
<div id="comments">
  <!-- TMPL_IF NAME="xcms_comments_on" -->
    <h3><span><!-- TMPL_VAR NAME="xcms_comments_count" DEFAULT="0" --> reacties</span> Reacties</h3>
    <a href="#" onclick="javascript:document.getElementById('comments_form').style.display='block'; return false;">Plaats een reactie</a>
    <div id="comments_form" style="display:none">
      <!-- TMPL_VAR NAME="xcms_comments_form" -->
    </div>
    <!-- TMPL_VAR NAME="xcms_comments_output" -->
    <!-- TMPL_IF NAME="xcms_comments_count" RE="^[^0-5]$" -->
    <a href="#" onclick="javascript:document.getElementById('comments_form').style.display='block'; location.hash = '#comments_form';return false;">Plaats een reactie</a>
    <!-- /TMPL_IF -->
  <!-- /TMPL_IF NAME="xcms_comments_on" -->
</div> 
...

De opmaak van het formulier kan geregeld worden via css zoals dat ook voor formulieren gemaakt met de formulieren-module gedaan kan worden.

Voor de opmaak van de rating kan met eigen afbeeldingen gewerkt worden, zie de uitleg in het volgende hoofdstuk.

Rating met eigen afbeeldingen

De afbeeldingen/sterren voor de rating worden weergegeven middels een ongenummerde lijst (UL) met voor elke afbeelding een LI met een afbeelding:

<ul id="xcms_comment_rating_stars" class="n5">
  <li><img src="/gfx/trans.gif" alt="" /></li>
  <li><img src="/gfx/trans.gif" alt="" /></li>
  ...
<ul>

Het cms levert de volgende standaard opmaak (via xcms.css):

#xcms_comment_rating_stars {
  float: left;
  padding: 6px 0 0 0;
  background: url(/gfx/stars20.png) 0 6px repeat-x;
  height: 20px; /* hoogte van afbeelding met ster */
}
/* voor elk aantal sterren krijgt de UL een class voor de breedte */
#xcms_comment_rating_stars.n1 { width: 20px; } 
#xcms_comment_rating_stars.n2 { width: 40px; }
#xcms_comment_rating_stars.n3 { width: 60px; }
#xcms_comment_rating_stars.n4 { width: 80px; }
#xcms_comment_rating_stars.n5 { width: 100px; }
#xcms_comment_rating_stars.n6 { width: 120px; }
#xcms_comment_rating_stars.n7 { width: 140px; }
#xcms_comment_rating_stars.n8 { width: 160px; }
#xcms_comment_rating_stars.n9 { width: 180px; }
#xcms_comment_rating_stars.n10 { width: 200px; }
#xcms_comment_rating_stars li {
  float: left;
  height: 20px;
}
/* zodra de gebruiker met de muis over een ster gaat krijgt de LI een class name hover */
/* op basis daarvan kan bijv. de achtergrond met de afbeelding omhoog worden geschoven... */
#xcms_comment_rating_stars li.hover { 
  background: url(/gfx/stars20.png) 0 -20px no-repeat;
}
#xcms_comment_rating_stars img {
  width: 20px; /* afmeting van de afbeelding = 1 ster */
  height: 20px;
  margin: 0;
}

De gebruikte afbeelding door het cms is

Dit is dus één afbeelding met 3 sterren (met 2 mag ook) die via de 'sliding door'-techniek steeds omhoog of omlaag wordt geschoven zodat het gewenste deel zichtbaar is.

In comments.html kan de rating nu per reactie worden weergegeven:

...
<div class="rating">
  <div id="r<!-- TMPL_VAR NAME="xcms_counter" -->">&nbsp;</div>
</div>
<script type="text/javascript">
  var r = document.getElementById("r<!-- TMPL_VAR NAME="xcms_counter" -->");
  r.style.width = parseInt(20*<!-- TMPL_VAR NAME="xcms_stars" -->*<!-- TMPL_VAR NAME="xcms_rating" -->)+"px";
</script>
...

Het stukje javascript is nodig om van een rating tussen 0 en 1 te komen tot een breedte voor de div: breedte plaatje (20) * <aantal sterren> * <rating>.

De bijbehorende css:

.rating {
  width: 100px; /* 5 sterren x 20 pixels breedte afbeelding */
  height: 20px; /* hoogte zichtbare deel afbeelding */
  background: url(/gfx/stars20.png) 0 0 repeat-x;
}
.rating div {
  height: 20px;
  background: url(/gfx/stars20.png) 0 -20px repeat-x;
}

Eigen afbeelding

Voor een eigen afbeelding (zie rechts) zou de css er bijvoorbeeld als volgt uit kunnen zien:

#xcms_comment_rating_stars {
  background-image: url(/gfx/star.gif);
  height: 14px; /* zichtbare deel afbeelding is 14 pixels hoog */
}
#xcms_comment_rating_stars.n5 {width: 70px;} /* 5 sterren, dus class name wordt n5: 14*5 = 70 */
#xcms_comment_rating_stars li {
  height: 14px;
}
#xcms_comment_rating_stars li.hover {
  background: url(gfx/star.gif) 0 -14px no-repeat; /* muis over LI > schuif plaatje omhoog */
}
#xcms_comment_rating_stars img {
  width: 14px; /* zichtbare deel afbeelding is 14x14 pixels */
  height: 14px;
}

Rating in paginalijst

In een paginalijst kan de rating per pagina bijvoorbeeld als volgt worden getoond:

<div class="rating">
  <div id="r<!-- TMPL_VAR NAME="xcms_counter" -->">&nbsp;</div>
</div>
<!-- TMPL_VAR NAME="xcms_comments_rating" -->
<script type="text/javascript">
  // haal de div op waarin de sterren worden getoond
  var r = document.getElementById("r<!-- TMPL_VAR NAME="xcms_counter" -->");
  // bereken de breedte (5 sterren * 14 pixels breed * rating)
  r.style.width = parseInt(5*14*(xcmsRating['<!-- TMPL_VAR NAME="id" -->']||0))+"px";
</script>

De bijbehorende css en afbeelding:

.rating {
  width: 70px; /* 5 sterren x 14 pixels breedte */
  height: 14px;
  background: url(/css/mijnvormgeving/gfx/star.gif) 0 0 repeat-x;
}
.rating div {
  height: 14px;
  background: url(/css/mijnvormgeving/gfx/star.gif) 0 -14px repeat-x;
}

reactiesReacties

Plaats een reactie