Live preview of the WP grins clickable smilies hack? (12 posts)

  1. Mariusooms
    Posted 10 years ago #

    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: http://www.oomsonline.com feel free to comment to test the problem!

    Marius Ooms

  2. Alex King
    Posted 10 years ago #

    I think you need to implement the PHP code that transforms the ':grin:' into the image tag in the preview JavaScript.

  3. Mariusooms
    Posted 10 years ago #

    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!

  4. Mariusooms
    Posted 10 years ago #

    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?

  5. Alex King
    Posted 10 years ago #

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

  6. Mariusooms
    Posted 10 years ago #

    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.

  7. Alex King
    Posted 10 years ago #

    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 :grin: to an image tag.

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

  8. Mariusooms
    Posted 10 years ago #

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

  9. Mariusooms
    Posted 10 years ago #

    No worries Oscar helped me with this fix:

    function ReloadTextDiv()
    var NewText = document.getElementById("DynamicText").value.replace(/:shock:/g," <img src=\"http://www.oomsonline.com/wp-images/smilies/shocked.gif\"> ");
    NewText = NewText.replace(/:smile:/g," <img src=\"http://www.oomsonline.com/wp-images/smilies/smiley.gif\"> ");
    var DivElement = document.getElementById("TextDisplay");
    DivElement.innerHTML = NewText;

  10. Mark (podz)
    Support Maven
    Posted 10 years ago #

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

  11. Mariusooms
    Posted 10 years ago #

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

    See it in action now on http://www.oomsonline.com.

    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.

  12. Mariusooms
    Posted 10 years ago #

    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! :)


Topic Closed

This topic has been closed to new replies.

About this Topic


No tags yet.