Drupal met geintegreerde LeesMeer opmaak.

afbeelding van Developmentteam

Lange teksten zijn eenvoudig in te korten door een stuk van de tekst te verbergen totdat de lezer op 'lees meer' klikt. Het aanbrengen van de opmaak zodat lees meer tekst gedetecteerd kan met de hand: plaats de tekst tussen <readmore> en </readmore>. Met ckeditor zie je in de dropdown de keuze 'readmore'. Selecteer de gewenste tekst en kies readmore.

Voorbeeld

Hier staat:
<readmore>Deze tekst wordt zichtbaar na klik op leesmeer.</readmore>

Deze tekst wordt zichtbaar na klik op leesmeer.

Hoe het werkt

2. in tpl/mit_readmore.js is de code aanwezig die de <readmore> tags leest en de tekst omzet naar een knop 'leesmeer'. De js doet het togglen van de zichtbaarheid.

  1. // readmore komt voor in <span class="readmore">de leesmeer tekst </span>
  2. $('readmore')
  3. .each(
  4. function(){
  5. var text = $(this).html();
  6.  
  7. $(this)
  8. .html('<div class="rawreadmore">' +
  9. '<span class="readmore-label">Lees meer &hellip;</span>' +
  10. '<div class="readmore-body">'+text+'</div></div>')
  11. .removeClass('readmore');
  12. }
  13. );

  1. $('.rawreadmore')
  2. .click(function(){
  3. // show/hide body text
  4. $(this).find('.readmore-body')
  5. .toggle('slow');
  6. // place/replace Meer of Minder
  7. var more=false;
  8. $(this)
  9. .find('.readless-label')
  10. .html('Meer &hellip;')
  11. .removeClass('readless-label')
  12. .addClass('readmore-label')
  13. .each(function(){more=true;});
  14.  
  15. if(!more){
  16. $(this)
  17. .find('.readmore-label')
  18. .html('Minder &hellip;')
  19. .addClass('readless-label')
  20. .removeClass('readmore-label');
  21. };
  22. })

3. in tpl/mit_readmore.css is de style die <readmore> standaard verbergt (totdat de js het zichtbaar maakt).

Aanpassen ckeditor

Door een kleine aanpassing in ckeditor default.js kan de leesmeer tekst eenvoudig worden geselecteerd en dan gekozen uit de select box.

in ckeditor \sites\all\libraries\ckeditor\plugins\styles\styles\default.js is dit toegevoegd:

{name:'readmore',element:'readmore',styles:{'font-style':'italic'}},

shadow