Support » Plugins » Live preview of the WP grins clickable smilies hack?

  • Hi, I’m looking for help with a script that will allow RealTime Live Preview of smileys in a comment form.

    These are the scripts I’m using (which work great and want to stick too):

    The ‘Live Preview’ script from scriptygoddess. Written for MT, but works just as well for WP.

    The ‘WP Grins’ clickable smilies hack hack from Alex King.

    Here’s the problem:

    Both of the above scripts work great. However the live preview textdisplay does not turn the smiley code into a actual smiley. Makes sense, since there’s no function defined to do this yet.

    Here is a possible solution I found from a MT forum, but should work with WP:

    I know the answer is in here somewhere. This person talks about a MTMacro, which could work, but I don’t run MT, I run WP. So maybe there is a macro for WP that could rewrite the smiley code to a IMG reference, but I don’t know? Or maybe just a different approach?

    You might ask yourself why I’m not posting on a MT forum…I don’t run MT, I just used the live preview script that was originally written for MT, but works on WP. The possible solution is from the MT forum, but is not limited to MT, since its just about functions and javascripts.

    Any help would greatly be appreciated.

    The site where I want to implement this: feel free to comment to test the problem!

    Marius Ooms

Viewing 11 replies - 1 through 11 (of 11 total)
  • I think you need to implement the PHP code that transforms the ‘:grin:’ into the image tag in the preview JavaScript.

    I believe it is this code:

    function writeImgTag(path)
    var NewText = document.getElementById("DynamicText").value;
    var DivElement = document.getElementById("TextDisplay");
    this.path = path;
    var pathU = NewText + "<img src=\"" + path + "\">";
    DivElement.innerHTML = pathU;
    document.comments_form.text.value = pathU;

    However this code was meant to change a path into a Img Src Tag, but the grin hack doesn’t display a path, but the ‘:grin:’ code. Makes sense? Thats the only reason why I think it doesn’t work for me.

    But I’m a code n00b!

    So change each smiley line so that onclick you are passing a smiley path to the function instead of a ‘:grin:’ code name.

    This is the ugly way since it would write a big path tag into the writting area, but at least the above code should work.

    Any thoughts how I could change this and where?

    No, all that needs to be stored in a lookup array in the client side JS so the 😀 is translated to the proper image tag.

    Do you have a code in mind I could try out? Or at least a start I could mess around with?

    I’m terrible at writting code from scratch.

    Ok, I think this is the third time I’m saying the same thing… 🙂

    You need a JS version of the PHP code that converts the 😀 to an image tag.

    The PHP code is already in WP, start from that and port it to JS.

    Ohhh, I c now. I found this in wp-includes/vars.php, I think this is the PHP code to translate the smiley, right?

    // generates smilies' search & replace arrays
    foreach($wpsmiliestrans as $smiley => $img) {
    $wp_smiliessearch[] = $smiley;
    $smiley_masked = str_replace(' ', '', $smiley);
    $wp_smiliesreplace[] = " <img src='" . get_settings('siteurl') . "/wp-images/smilies/$img' alt='$smiley_masked' />";

    No worries Oscar helped me with this fix:

    function ReloadTextDiv()
    var NewText = document.getElementById("DynamicText").value.replace(/:shock:/g," <img src=\"\"> ");
    NewText = NewText.replace(/:smile:/g," <img src=\"\"> ");
    var DivElement = document.getElementById("TextDisplay");
    DivElement.innerHTML = NewText;

    Mark (podz)


    Support Maven

    @mariusooms: Any chance you could you write this out so that another user could make use of this feature ?

    I’m sure others would use it.

    Sure…I’ll write a tutorial (or basicly past tutorials from others into one) and link it here.

    See it in action now on

    The only alteration I’d like to make to the script is for the smilies to show up in realtime when clicked. As is the TextDisplay refreshed onKeyUp so when you click a smiley it will only show up in the preview area when you start typing again.

    Here’s the link with instructions to installment of both scripts with code modifications to create live preview of clickable smilies:

    Let me know if you find use for this…I’d like to see how you use it! 🙂


Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Live preview of the WP grins clickable smilies hack?’ is closed to new replies.