Hoe een "lees meer" button toe voegen?

jeroenhamjeroenham Member Berichten: 1
Wie verteld mij hoe je een "lees meer" button in de tekst toevoegd? Ik kan er niks over vinden in de handleidingen van lightspeedhq. Heb het geprobeerd d.m.v de code toe te voegen.

Hoor graag reactie.

Alvast bedankt!

Antwoorden

  • JaapJaap Member Berichten: 78 ✭
    Hallo Jeroen,

    Helaas kun je in de wysiwyg editor van Lightspeed maar een beperkt aantal HTML tags gebruiken. Ook Script tags zijn niet (meer) te gebruiken in de editor wat het een hele beperkte wysiwyg editor maakt.

    Ik heb hier al eerder een ticket voor ingeschoten waarna de script tags weer even hebben gewerkt maar inmiddels weer zijn uitgezet. Op de volgende ticket die ik had ingeschoten waarom het was uitgezet heb ik helaas geen antwoord meer gehad.

    Een button zou je ook kunnen maken d.m.v. CSS.
    Voorbeelden van css buttons kun je eenvoudig op internet vinden zoals op w3schools.com

    Succes!
    www.sativus.com
    "Saffron and more"
  • JaivyDaamJaivyDaam Lightspeed Staff Berichten: 29 Lightspeed
    mei 2018 aangepast
    Hi @jeroenham ,

    Excuus voor het late bericht, ik hoop dat deze je nog bereikt. Voor die het alsnog willen heb ik hier een kleine handleiding van 1 van onze Escalatie helden Joost Vermeulen.

    Let op: Dit is geheel op eigen risico! Alles wat onder "Lees Meer" valt kan nadelige gevolgen hebben voor SEO en kan door Google genegeerd worden!
    De code onderin is getest op het "Conform" thema, we verwachten dat dit overal geïmplementeerd kan worden. Echter, door de verschillen in thema's adviseer ik hier ten zeerste het te testen alvorens dit overal te gaan doorvoeren!

    CSS

    Implement the CSS listed below into the
    Design > Theme Settings > Custom CSS:
    .morecontent span {
      display: none; 
    }  
    .morelink { display: block; 
    }
    

    JAVASCRIPT

    The code below can be implemented via the Settings > Web Extra's > Javascript:

    The Javascript code has some parts that can be customised:

    var showChar = 100; // How many characters are shown by default
    var ellipsestext = "..."; // Adjust the ellipsestext
    var moretext = "Show more >"; // Adjust the more text
    var lesstext = "Show less"; // Adjust the less text

    $(document).ready(function() {

    // Configure/customize these variables.
    var showChar = 100; // How many characters are shown by default
    var ellipsestext = "..."; // Adjust the ellipsestext
    var moretext = "Show more >"; // Adjust the more text
    var lesstext = "Show less"; // Adjust the less text

    //DON'T TOUCH ANYTHING HERE, THIS IS FUNCTION CODE AND
    ONLY NEEDS TOUCHING IF YOU KNOW WHAT IT DOES!
    $('.more').each(function() {
    var content = $(this).html();
    if (content.length > showChar) {
    var c = content.substr(0, showChar);
    var h = content.substr(showChar, content.length - showChar); =
    var html = c + '' + ellipsestext + ' ' + h + '  ' + moretext + ''; = $(this).html(html); } }); $(".morelink").click(function() { if ($(this).hasClass("less")) { $(this).removeClass("less"); $(this).html(moretext); } else { $(this).addClass("less"); $(this).html(lesstext); } $(this).parent().prev().toggle(); $(this).prev().toggle(); return false; }); });

    HTML

    The text below is an example how a read more text can be triggered, you can add this in your WYSIWYG Editor:
    
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
    aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
    officia deserunt mollit anim id est laborum.
    

    To trigger a read more button it's important that the text is placed in a HTML element that contains the class "more".

    Mocht er iets onduidelijk zijn over het implementeren hiervan hoor ik het graag, ik zal proberen te helpen waar kan.

    Fijne zaken!
    Post edited by JaivyDaam on
Log In of Registreer om te reageren.