• Forum
  • Doc
  • Screenshots
  • Download
  • Donate
  • Contributors
  • Contact
  • Follow @phpfreechat
  • DEMO
  • Board index ‹ Version 1.x branch ‹ How-to (v1.x)
  • Change font size
  • FAQ
  • Register
  • Login

Add additional emoticon boxes

A collection of how-to's, submitted by users for other users!

Moderator: re*s.t.a.r.s.*2

Post a reply
11 posts • Page 1 of 1

Postby waiheke » Mon Oct 25, 2010 3:16 am

You may not want to clutter your emoticon box with rarely-used emotes, but nonetheless, would like users to have access to them, and simply be able to click to paste.

FTP access your server and make a folder "emotes"
Copy the spare, extra emotes up into the folder.

If you like to order them in a non-haphazard manner, rename the emoticons, using a,b,c etc to create order.
The directory listing will be alphanumeric.

Eg, two smiley faces might be a_smiley1.gif and a_smiley2.gif, followed by two frowny faces, b_frown1.gif and b_frown2.gif.


Write this file, we could call it "oldemotesdisplaychat.php" and upload to your main chat folder.

Code: Select all
<?php

echo "<span style=style11>";

function dirImages($dir) {
$d = dir($dir); //Open Directory
while (false!== ($file = $d->read())) //Reads Directory
{
$extension = substr($file, strrpos($file, '.')); // Gets the File Extension
if($extension == ".jpg" || $extension == ".jpeg" || $extension == ".gif" |$extension == ".png") // Extensions Allowed
$images[$file] = $file; // Store in Array
}
$d->close(); // Close Directory
asort($images); // Sorts the Array
return $images;
}

$array = dirImages('emotes');
   $i=0;
   foreach ($array as $key => $image) {
      if ($i%14==0){
           echo '<div class="row">';
       }

   echo "<img src=emotes/" . $image . " border=0 onClick="pfc.insert_text('[em]emotes/" . $image . "[/em]', '', false)">  ";

       if ($i%14==13 || $i==count( $array )-1) {
        echo '</div>';
       }
$i++;
}


echo "</span>";

?>

Then in the chat.js.tpl.php, around lines 1600 or 1700, in the general parse message area, add:

Code: Select all
// other emotes
    rx = new RegExp('\[em\](.+?)\[/em\]','ig');
    msg = msg.replace(rx, '<img src="$1">');

How you call the file is up to you, but what I've done is added a button, with a rollover, and on click to display a hidden div.

You could have several emoticon boxes of course, for emoticons of different sizes

:)

enjoy
Last edited by waiheke on Mon Oct 25, 2010 6:36 am, edited 1 time in total.
waiheke
Member
 
Posts: 126
Joined: Sun Sep 12, 2010 4:33 pm
Top

Postby Calman45 » Mon Mar 14, 2011 8:13 am

waiheke wrote:Then in the chat.js.tpl.php, around lines 1600 or 1700, in the general parse message area, add:
[

.. don't you mean "pfcclient.js" ???

All the best,
Cal :)
Calman45
Support Team
 
Posts: 150
Joined: Sun Oct 26, 2008 11:09 pm
Location: Western Canada
  • Website
Top

Postby Calman45 » Mon Mar 14, 2011 8:32 am

.. people may also want to see an example / outcome of the Div (similar to hiding/displaying the default smiley panel)

All the best,
Cal :)
Calman45
Support Team
 
Posts: 150
Joined: Sun Oct 26, 2008 11:09 pm
Location: Western Canada
  • Website
Top

Postby waiheke » Wed Apr 06, 2011 10:45 pm

ah yes, i see what you mean

At http://www.ninjaschat.com this is in the chat.php but you would need to re-position for your own application.

Before the </head>

Code: Select all
<style type="text/css">
div.emoticons2 {
position: relative;
   top: 0px;
   right: 0px;
   margin-top: 5px;
   margin-left: 0;
   padding: 0 0 0 0;
   display: inline;
   text-align: left;
z-index: 3998;
}

body div#emoticons2 {
background-image:url(themes/default/images/background2.gif);
background-color: #fff;
float:left;
border: 1px dashed #999999;
height: 500px;
/* for ie */
*width: 200px;
*height: 513px;
overflow: auto;
a.hover:
}
</style>

After the <body> tag:

Code: Select all
<div id="emoticons2"></div>
waiheke
Member
 
Posts: 126
Joined: Sun Sep 12, 2010 4:33 pm
Top

Postby waiheke » Wed Apr 06, 2011 10:47 pm

Calman45 wrote:
waiheke wrote:Then in the chat.js.tpl.php, around lines 1600 or 1700, in the general parse message area, add:
[

.. don't you mean "pfcclient.js" ???

nope

:)
Last edited by waiheke on Wed Apr 06, 2011 10:47 pm, edited 1 time in total.
waiheke
Member
 
Posts: 126
Joined: Sun Sep 12, 2010 4:33 pm
Top

Postby waiheke » Wed Apr 06, 2011 10:50 pm

So if you go to the chat, to see it working, this is the icon:

http://www.ninjaschat.com/themes/defaul ... ess-on.gif
Last edited by waiheke on Wed Apr 06, 2011 10:50 pm, edited 1 time in total.
waiheke
Member
 
Posts: 126
Joined: Sun Sep 12, 2010 4:33 pm
Top

Postby Calman45 » Thu Apr 07, 2011 5:46 am

waiheke wrote:
Calman45 wrote:
waiheke wrote:Then in the chat.js.tpl.php, around lines 1600 or 1700, in the general parse message area, add:
[

.. don't you mean "pfcclient.js" ???

nope

:)

I may be missing something here, but this makes no sense to me?? ... only the 'pfcclient.js' has similar coding and a length of 1600-1700 lines. The file you suggest is much smaller and doesn't contain this time of parse code?

This is around 1600 on pfcclient.js >>>

-----------------------------------------------------------------

// try to parse smileys
var smileys = this.res.getSmileyHash();
var sl = this.res.getSmileyKeys(); // Keys should be sorted by length from pfc.gui.loadSmileyBox()
for(var i = 0; i < sl.length; i++)

-----------------------------------------------------------------

All the best,
Calman
Calman45
Support Team
 
Posts: 150
Joined: Sun Oct 26, 2008 11:09 pm
Location: Western Canada
  • Website
Top

Postby waiheke » Thu Apr 07, 2011 8:01 am

Hi there Cal.

This is a different way of handling some basic images. They are not being parsed at entry time.

By passing a huge array of emoties into the load sequence, the chat can take awhile to load - what we do here is let a minimum number of emoties get loaded, and only then look for the extra emoties ~ IF someone clicks an icon.

They are already in chat, and are comfortable - all they have to do now, is wait for the new display to appear. It's just a standard piece of php to display all the images in a folder.

However, we need to have an import function so one click will paste in the text box. So on clicking an image, we have an enclosing [em] and [/em] and that needs to be understood by the programme - the lines you display are in the same area in chat.js.tpl.php, around 1900, right ? I put the

Code: Select all
// other emotes
    rx = new RegExp('\[em\](.+?)\[/em\]','ig');
    msg = msg.replace(rx, '<img src="$1">');

just before those lines you mention.

This is nothing to do with parsing smileys. It's converting some attached tags, the [em] and [/em] into an image display with ordinary <img src= html.

In other words, it's an extension of the idea of pasting any image in the chat box. But these are images that you've collected and can control.

Hope that clarifies ?

:-)
Last edited by waiheke on Thu Apr 07, 2011 8:04 am, edited 1 time in total.
waiheke
Member
 
Posts: 126
Joined: Sun Sep 12, 2010 4:33 pm
Top

Postby Calman45 » Fri Apr 08, 2011 1:12 am

"the lines you display are in the same area in chat.js.tpl.php, around 1900, right ?"

Nope! ... I can only see these lines I posted above the the pfcclient.js ... the chat.js.tpl.php is a much smaller file.

Also, when you say you place the other code in the [head] area of chat.php, I don't have that in my file, purely php code with some html below.

If it helps, I will post the contents of the said files I have here?

All the best,
Cal :)
Calman45
Support Team
 
Posts: 150
Joined: Sun Oct 26, 2008 11:09 pm
Location: Western Canada
  • Website
Top

Postby waiheke » Sun Apr 10, 2011 12:13 pm

Hi Cal

If I can help arrange it at your end I'm happy to help

Essentially there's 3 processes (well, maybe 4 or 5)

1.I set up a folder to move all superflous emoticons into
Eg http://www.ninjaschat.com/emotes/

2.Then a simple php file that will, when it's called, read the contents and display them in a tidy manner - in post 1 at the forum, it's up to 14 in a row and then start a new row.
"we could call it "oldemotesdisplaychat.php" and upload to your main chat folder"

3. That's the easy bit. The slightly more interesting bit is to have a click on any of the images translate into a post in the chat box, as an actual emote
That's what this line does:
echo "<img src=emotes/" . $image . " border=0 onClick="pfc.insert_text('[em]emotes/" . $image . "[/em]', '', false)">  "

4. What it does is present to the chat posting form the concept of a string wrapped at each end by an [em] and a [/em].
If we just post it like that, the chat box would just put the URL not the image
So we have to tell it how to translate the string if it sees an [em]
It's the same as doing the string to convert text to bold with
Code: Select all
[b] and [/b]

*

5. So then all I had to do was find what page does the regex processing.

*maybe that's the best way to explain it.
The chat programme will parse a string of words as italic, or a string of words as bold, right ?

So by telling it that
Code: Select all
[em]an image URL[/em]

is an image, in exactly the same page as the regex for the italic, seems to work fine.

Paste them in your pfcclient.js and see what happens.

6. The next part was to make a <div> that remains invisible, until there's a click to reveal the emoties.

I haven't discussed that 'cos it's more of a Google search, there's a lot of ways to hide and reveal a div.
I did it with ajax, but i wanted to know more about ajax. Any method that works with a simple test hide/show div will be fine. And the css shown above was to position it.
Last edited by waiheke on Sun Apr 10, 2011 12:16 pm, edited 1 time in total.
waiheke
Member
 
Posts: 126
Joined: Sun Sep 12, 2010 4:33 pm
Top

Re: Add additional emoticon boxes

Postby micaeli » Sat Nov 10, 2012 3:21 am

Thanks for the instructions, I was looking for that :)
micaeli
New member
 
Posts: 2
Joined: Sat Nov 10, 2012 3:04 am
  • Website
Top


Post a reply
11 posts • Page 1 of 1

Return to How-to (v1.x)

Who is online

Users browsing this forum: No registered users and 1 guest

  • Board index
  • The team • Delete all board cookies • All times are UTC + 1 hour
Powered by phpBB® Forum Software © phpBB Group
Sign in
Wrong credentials
Sign up I forgot my password
.
jeu-gratuit.net | more partners
Fork me on GitHub