Adding smilies to JOT

9 Posts

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>

you’ll see a line that says:



var bericht = window.document.getElementById("bericht");

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. step 3: open chunck.form.inc and find the textbox of which the name is=content. in that line add:

 

id="bericht"

use the same id that you’ll had in step 2. my code is then:



 <textarea id="bericht" tabindex="[+jot.seed:math=`?+4`+]" name="content" cols="50" rows="5">[+form.field.content:esc+]</textarea>

Step 4: Making a smiley line to pick your smilie from. open chunck.form.inc an add under your main textbox (content) an table liek this one:



<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>

so you see that i displayed all my smileys simple with img tags but on the end it says:



onclick="AddSmile(':troost:')"

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: now lets do the magic Step 5: replacing open jot.class.inc and around line 458 (version 1) you find:





// 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;

add these lines:

	

//-----------------------------------------------------------

// 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);

between:

			

	// 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();

				}

and





	$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;

in total:

				

// 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);

$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; 

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

239 Posts

Mitch Reply #2, 17 years, 1 month ago

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);
?>

- 1 Posts
Zombie Reply #3, 17 years, 1 month ago
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?
- 1 Posts
Zombie Reply #4, 17 years, 1 month ago

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.

Now it works perfectly. I can use both bbcode and smileys
- ☆ A M B ☆
- 536 Posts
Last Of The Romans Reply #5, 14 years, 5 months ago

i know...article is old, but just one more time - GREAT work.
THANKS!
palma non sine pulvere
- 11 Posts
doc777 Reply #6, 10 years, 7 months ago

файл для правок - comments.inc.php (если стоит JotX)