On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • A few weeks back i made an modx site with a guestbook powered by jot. it was quite good and spam free but it missed one thing: smileys! Yesterday i started the work on my own personal blog and i tried to find a simple way add smileys and i quite found a way that for most user is understandable too.
    
    so here how I made this questbook (demo: http://robbinoost.nl/gastenboek.html )
    
    a note before i start: I worked with  1.0 version with comes standard with modx 0.9.5 (yeah i really need to update i know). But i think with a little search and stuff you'll get there with an other version to. 
    
    How it works? it works quite simple: text that is posted in the main text box will be analyzed and part of the text will be replace. so for example :-lol-: will turn out as an smiley. An second function is that under the textbox you'll see a list with the smileys and when you click on one of them you'll get the code (in this case: :-lol-:) withch will be replaced when you post your msg.
    
    Step 1: Find yourself some smilies, i used a few from the phpBB plus pack. download the images in: public_html/images/smilies.
    
    Step 2:  Duplicate the template(like in manager -> resources -> templates)  you want to use for your questbook and call it whatever you like. Place the following javascript code between the <head> tags:
    
     

    <script type="text/javascript">
    function AddSmile(SmileCode) {
    var bericht = window.document.getElementById("bericht");
    bericht.value += SmileCode;
    bericht.focus();
    return;
    }

    </script>

    <br /><br />you’ll see a line that says: <br />

    var bericht = window.document.getElementById("bericht");
    <br />i used ’bericht’ as id (means message in dutch) name it whatever you like but remember how you named it!. Don’t change anything else.<br /><br /><br />step 3: open chunck.form.inc and find the textbox of which the name is=content. in that line add:<br />
     
    id="bericht"
    <br />use the same id that you’ll had in step 2. my code is then:<br />

    <textarea id="bericht" tabindex="[+jot.seed:math=`?+4`+]" name="content" cols="50" rows="5">[+form.field.content:esc+]</textarea>
    <br /><br />Step 4: Making a smiley line to pick your smilie from.<br />open chunck.form.inc an add under your main textbox (content) an table liek this one:<br /><br />

    <table border="0" cellspacing="1" cellpadding="4" class="smiley">
    <tr>
    <td><img src="images/smilies/smile.gif" alt="" onclick="AddSmile(':)')" />
    </td>
    <td><img src="images/smilies/icon_sadley.gif" alt="" onclick="AddSmile(':(')" />
    </td>
    <td><img src="images/smilies/biggrin.gif" alt="happy" onclick="AddSmile(':D')" />
    </td>
    <td><img src="images/smilies/frown.gif" alt="" onclick="AddSmile(':@')" />
    </td>
    <td><img src="images/smilies/confused.gif" alt="" onclick="AddSmile('(A)')" />
    </td>
    <td><img src="images/smilies/willy_nilly.gif" alt="" onclick="AddSmile(':O')" />
    </td>
    <td><img src="images/smilies/wink.gif" alt="" onclick="AddSmile(';)')" />
    </td>
    <td><img src="images/smilies/winkpuh.gif" alt="" onclick="AddSmile(':P')" />
    </td>
    <td><img src="images/smilies/icon_takeitdown.gif" alt="" onclick="AddSmile(':takeit:')" />
    </td>
    <td><img src="images/smilies/redface.gif" alt="" onclick="AddSmile(':BD')" />
    </td>
    <td><img src="images/smilies/pompom.gif" alt="" onclick="AddSmile(':B)')" />
    </td>
    <td><img src="images/smilies/icon_bow.gif" alt="" onclick="AddSmile(':!:')" />
    </td>
    <td><img src="images/smilies/coool.gif" alt="" onclick="AddSmile(':cool:')" />
    </td>
    <td><img src="images/smilies/icon_troost.gif" alt="" onclick="AddSmile(':troost:')" />
    </td>
    </tr>
    </table>
    <br /><br />so you see that i displayed all my smileys simple with img tags but on the end it says:<br />

    onclick="AddSmile(':troost:')"
    <br /> this is very important! it calls the javascript code from the <head > tags to add everything between the (’ and ’) so teh code of this smiley is :troost: <br /><br />now lets do the magic<br />Step 5: replacing<br /><br />open jot.class.inc and around line 458 (version 1) you find:<br />


    // Render comments
    $count = count($array_comments);
    $comments = array();

    // Comment Numbering
    for ($i = 0; $i < $count; $i++) {
    $num = ($this->config["numdir"]) ? $commentTotal - ($pageOffset + $i) : $pageOffset + ($i+1);
    $array_comments[$i]["postnumber"] = $num;
    }



    for ($i = 0; $i < $count; $i++) {
    $chunk["rowclass"] = $this->getChunkRowClass($i+1,$array_comments[$i]["createdby"]);
    $tpl = new CChunkie($this->templates["comments"]);
    $tpl->AddVar('jot',$this->config);
    $tpl->AddVar('comment',$array_comments[$i]);
    $tpl->AddVar('chunk',$chunk);
    $comments[] = $tpl->Render();
    }


    $this->config["html"]["comments"] = $output_comments = join("",$comments);
    $this->config["html"]["navigation"] = $output_navigation;
    $output_comments = $output_subscribe.$output_moderate.$output_navigation.$output_comments.$output_navigation;



    }
    if ($this->config["output"]) return $output_comments;
    }

    function processForm($id=0) {
    global $modx;
    <br /><br />add these lines:<br />
    	
    //-----------------------------------------------------------
    // Smilies code by RWQ
    //-----------------------------------------------------------



    $comments = str_replace (":)","<img src=images/smilies/smile.gif />", $comments);
    $comments = str_replace (":(","<img src=images/smilies/icon_sadley.gif />", $comments);
    $comments = str_replace (":D","<img src=images/smilies/biggrin.gif />", $comments);
    $comments = str_replace (":@","<img src=images/smilies/frown.gif />", $comments);
    $comments = str_replace ("(A)","<img src=images/smilies/confused.gif />", $comments);
    $comments = str_replace (":O","<img src=images/smilies/willy_nilly.gif />", $comments);
    $comments = str_replace (";)","<img src=images/smilies/wink.gif />", $comments);
    $comments = str_replace (":P","<img src=images/smilies/winkpuh.gif />", $comments);
    $comments = str_replace (":takeit:","<img src=images/smilies/icon_takeitdown.gif />", $comments);
    $comments = str_replace (":BD","<img src=images/smilies/redface.gif />", $comments);
    $comments = str_replace (":B)","<img src=images/smilies/pompom.gif />", $comments);
    $comments = str_replace (":!:","<img src=images/smilies/icon_bow.gif />", $comments);
    $comments = str_replace (":cool:","<img src=images/smilies/coool.gif />", $comments);
    $comments = str_replace (":troost:","<img src=images/smilies/icon_troost.gif />", $comments);
    <br /><br />between: <br />
    			
    // Comment Numbering
    for ($i = 0; $i < $count; $i++) {
    $num = ($this->config["numdir"]) ? $commentTotal - ($pageOffset + $i) : $pageOffset + ($i+1);
    $array_comments[$i]["postnumber"] = $num;
    }



    for ($i = 0; $i < $count; $i++) {
    $chunk["rowclass"] = $this->getChunkRowClass($i+1,$array_comments[$i]["createdby"]);
    $tpl = new CChunkie($this->templates["comments"]);
    $tpl->AddVar('jot',$this->config);
    $tpl->AddVar('comment',$array_comments[$i]);
    $tpl->AddVar('chunk',$chunk);
    $comments[] = $tpl->Render();
    }

    <br />and<br />


    $this->config["html"]["comments"] = $output_comments = join("",$comments);
    $this->config["html"]["navigation"] = $output_navigation;
    $output_comments = $output_subscribe.$output_moderate.$output_navigation.$output_comments.$output_navigation;



    }
    if ($this->config["output"]) return $output_comments;
    }

    function processForm($id=0) {
    global $modx;

    <br /><br />in total:<br />
    				
    // Comment Numbering
    for ($i = 0; $i < $count; $i++) {
    $num = ($this->config["numdir"]) ? $commentTotal - ($pageOffset + $i) : $pageOffset + ($i+1);
    $array_comments[$i]["postnumber"] = $num;
    }



    for ($i = 0; $i < $count; $i++) {
    $chunk["rowclass"] = $this->getChunkRowClass($i+1,$array_comments[$i]["createdby"]);
    $tpl = new CChunkie($this->templates["comments"]);
    $tpl->AddVar('jot',$this->config);
    $tpl->AddVar('comment',$array_comments[$i]);
    $tpl->AddVar('chunk',$chunk);
    $comments[] = $tpl->Render();
    }


    //-----------------------------------------------------------
    // Smilies code by RWQ
    //-----------------------------------------------------------



    $comments = str_replace (":)","<img src=images/smilies/smile.gif />", $comments);
    $comments = str_replace (":(","<img src=images/smilies/icon_sadley.gif />", $comments);
    $comments = str_replace (":D","<img src=images/smilies/biggrin.gif />", $comments);
    $comments = str_replace (":@","<img src=images/smilies/frown.gif />", $comments);
    $comments = str_replace ("(A)","<img src=images/smilies/confused.gif />", $comments);
    $comments = str_replace (":O","<img src=images/smilies/willy_nilly.gif />", $comments);
    $comments = str_replace (";)","<img src=images/smilies/wink.gif />", $comments);
    $comments = str_replace (":P","<img src=images/smilies/winkpuh.gif />", $comments);
    $comments = str_replace (":takeit:","<img src=images/smilies/icon_takeitdown.gif />", $comments);
    $comments = str_replace (":BD","<img src=images/smilies/redface.gif />", $comments);
    $comments = str_replace (":B)","<img src=images/smilies/pompom.gif />", $comments);
    $comments = str_replace (":!:","<img src=images/smilies/icon_bow.gif />", $comments);
    $comments = str_replace (":cool:","<img src=images/smilies/coool.gif />", $comments);
    $comments = str_replace (":troost:","<img src=images/smilies/icon_troost.gif />", $comments);
    <br /><br /><br /><br /> $this->config["html"]["comments"] = $output_comments = join("",$comments);<br /> $this->config["html"]["navigation"] = $output_navigation;<br /> $output_comments = $output_subscribe.$output_moderate.$output_navigation.$output_comments.$output_navigation;<br /> <br /> <br /> <br /> } <br /> if ($this->config["output"]) return $output_comments;<br /> }<br /> <br /> function processForm($id=0) {<br /> global $modx;<br /><br />

    you’ll see that a simpel php string replace statement the smiley code between " " (":troost:") change these lines on a way that they will corespendond with the images set in step 4 (so the combination of smilie code and image is teh same).

    than your done!

    hope you can use it!

    RWQ



    ps: for those asking how it is with my phpBB snippet: quite rubbish when added some functions i keep getting loads and loads of errors that even effect the databsetables at some point. so i dropped it for a moment, and maybe when i know php betetr i’ll continue


    • Instead of modifying the Jot code you might want create a custom PHx modifier (since you are already using it anyway). I used the snippet below on one of my sites for adding smilies to a guestbook. This will make it easier to update Jot when needed.

      Snippetname: phx:smiles (when using this name you can use the :smiles modifier on the messagetext placeholder)
      <?php
      // Path where the smilies are stored
      $basepath = 'assets/images/smiles/';
      
      // Mapping of text to imagename
      $smiles = array(
        ':D'        => 'icon_biggrin.gif',
        ':-D'       => 'icon_biggrin.gif',
        ':)'        => 'icon_smile.gif',
        ':-)'       => 'icon_smile.gif',
        ':('        => 'icon_sad.gif',
        ':-('       => 'icon_sad.gif',
        '8O'        => 'icon_eek.gif',
        ':P'        => 'icon_razz.gif',
        ':oops:'    => 'icon_redface.gif',
        ':cry:'     => 'icon_cry.gif',
        ':evil:'    => 'icon_evil.gif',
        ':twisted:' => 'icon_twisted.gif',
        ':roll:'    => 'icon_rolleyes.gif',
        ';)'        => 'icon_wink.gif',
        ';-)'       => 'icon_wink.gif',
        ':wink:'    => 'icon_wink.gif',
        ':lol:'     => 'icon_lol.gif',
        '8)'        => 'icon_cool.gif',
        '8-)'       => 'icon_cool.gif',
        ':?'        => 'icon_confused.gif',
        ':-?'       => 'icon_confused.gif'
      );
      
      // Convert imagenames to html tags here, just to keep the structure above 
      // easy to maintain, especially when I want to change the generated HTML.
      foreach ($smiles as $key => $value)
      {
        $smiles[$key] = "<img src='".$basepath.$value."' alt='$key' />";
      }
      
      return str_replace(array_keys($smiles), array_values($smiles), $output);
      ?>
      • Quote from: Mitch at Mar 19, 2007, 05:35 PM

        Instead of modifying the Jot code you might want create a custom PHx modifier (since you are already using it anyway). I used the snippet below on one of my sites for adding smilies to a guestbook. This will make it easier to update Jot when needed.

        Thank you for this solution, but somehow I can’t get it to work.

        I’ve already added bbcode to Jot, using this code in the template for comments:
        <div class="jot-message">[+comment.content:bbcode:nl2br+]</div>


        I tried to add the phx:smiles snippet this way:
        <div class="jot-message">[+comment.content:bbcode:smiles:nl2br+]</div>

        but then the comments don’t show up at all.

        What am I doing wrong?
        • Quote from: WeBe at Mar 19, 2007, 07:13 PM

          What am I doing wrong?

          Answer to myself: this code is correct, but in the phx:smiles snippet there were some carriage returns which shouldn’t be there.

          I copied the sourcecode to a textfile, edited it in Notepad and then copied/pasted it into the phx:smiles snippet. During this process the carriage returns must have been added. huh

          Now it works perfectly. I can use both bbcode and smileys cool
          • Last Of The Romans Reply #5, 9 years, 9 months ago
            i know...article is old, but just one more time - GREAT work.
            THANKS!
              palma non sine pulvere
            • файл для правок - comments.inc.php (если стоит JotX)