Category: How To

While the arguments for and against are pretty hot and heavy (see the trac ticket for more), it’s no secret I’m pro-new smilies. The old ones are too small, too pixelated, and too (pardon the phrase) web 1.0. They look old and out of date on my site.

Here they are at normal size:

And here’s double:

These are both gifs, to illustrate the size issue. Notice how they’re fuzzy?

I want to make one thing clear, pun intended. None of my issues have to do with Retina. I don’t like ‘small’ anything. The smilies are too small, much like the font on many people’s websites, the pixelization is hard for me to identify. In fact, while I’m using the new smilies here, you’ll notice they’re bigger. Sure, cause I tossed this in my CSS:

#wp_grins img, img.wp-smiley {
    height: 25px;
}

And that’s all it took to make them something I felt was readable. But the beauty, and why I like the new SVG images, is that I can make them larger like that, without losing readability.

Thankfully, due to the curmudgeony efforts of the new smilies’ biggest naysayer, Otto, we have a filter! I’ve talked about this before, in how I handled both SVG and PNG as smilies for IE. I have a couple options here. I could write some code myself, or I could use New WordPress.com Smileys (which is on GitHub for reasons, the code is fine!).

I like the plugin a lot. I like it so much, I refactored my SSL Grins plugin to use them with the fancy pants new span code (instead of images). But… Well, I already had this done by the time his plugin came out, and I like how I accounted for things differently. The only real difference though is he uses spans, and I just swap out the images:

<?php
/*
Plugin Name: Custom Smilies
Plugin URI:  https://ipstenu.org
Description: I like the new smilies, shut up Otto.
Version: 1.0
Author: Mika Epstein
Author URI: https://ipstenu.org/
*/

// Move Smilies
add_filter('smilies_src','helf_smilies_src', 1, 10);
function helf_smilies_src($img_src, $img, $siteurl) {
    if ( strpos( $_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'MSIE 8' ) || strpos( $_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'MSIE 7' ) || strpos( $_SERVER&#91;'HTTP_USER_AGENT'&#93;, 'Android' ) ) {
        $img = 'ie/'.$img;
    }
    else {
         $img = str_replace("png", "svg", $img); // Remove PNG
    }
    return $siteurl.'/code/images/smilies/'.$img;
}

// This is in a paren for my sanity....
{
    global $wpsmiliestrans;

    if ( !get_option( 'use_smilies' ) )
        return;
    
    if ( !isset( $wpsmiliestrans ) ) {
        $wpsmiliestrans = array(
        ':mrgreen:' => 'icon_mrgreen.png',
        ':neutral:' => 'icon_neutral.png',
     // removing b/c new versions
        ':twisted:' => 'icon_evil.png',
          ':arrow:' => 'icon_arrow.png',
          ':shock:' => 'icon_eek.png',
          ':smile:' => 'icon_smile.png',
            ':???:' => 'icon_confused.png',
           ':cool:' => 'icon_cool.png',
           ':evil:' => 'icon_evil.png',
           ':grin:' => 'icon_biggrin.png',
           ':idea:' => 'icon_idea.png',
           ':oops:' => 'icon_redface.png',
           ':razz:' => 'icon_razz.png',
           ':roll:' => 'icon_rolleyes.png',
           ':wink:' => 'icon_wink.png',
            ':cry:' => 'icon_cry.png',
            ':eek:' => 'icon_surprised.png',
            ':lol:' => 'icon_lol.png',
            ':mad:' => 'icon_mad.png',
            ':sad:' => 'icon_sad.png',
              '8-)' => 'icon_cool.png',
              '8-O' => 'icon_eek.png',
              ':-(' => 'icon_sad.png',
              ':-)' => 'icon_smile.png',
              ':-?' => 'icon_confused.png',
              ':-D' => 'icon_biggrin.png',
              ':-P' => 'icon_razz.png',
              ':-o' => 'icon_surprised.png',
              ':-x' => 'icon_mad.png',
              ':-|' => 'icon_neutral.png',
              ';-)' => 'icon_wink.png',
        // This one transformation breaks regular text with frequency.
        //     '8)' => 'icon_cool.png',
               '8O' => 'icon_eek.png',
               ':(' => 'icon_sad.png',
               ':)' => 'icon_smile.png',
               ':?' => 'icon_confused.png',
               ':D' => 'icon_biggrin.png',
               ':P' => 'icon_razz.png',
               ':o' => 'icon_surprised.png',
               ':x' => 'icon_mad.png',
               ':|' => 'icon_neutral.png',
               ';)' => 'icon_wink.png',
              ':!:' => 'icon_exclaim.png',
              ':?:' => 'icon_question.png',
        // New for me
              '>:(' => 'icon_mad.png',
              'o_O' => 'icon_surprised.png',
              'O_o' => 'icon_eek.png',
              '^^‘' => 'icon_redface.png',
              ':‘(' => 'icon_cry.png',
              ':’(' => 'icon_cry.png',
   ':whiterussian:' => 'icon_whiterussian.png',
              '|_|' => 'icon_whiterussian.png',
               ':/' => 'icon_uneasy.png',
              ':-/' => 'icon_uneasy.png',
      ':developer:' => 'icon_developer.png',
        ':burrito:' => 'icon_burrito.png',
        ':martini:' => 'icon_martini.png',
              '>-I' => 'icon_martini.png',
          ':blush:' => 'icon_redface.png',
          ':heart:' => 'icon_heart.png',
            //'&amp;lt;3' => 'icon_heart.png',
           ':bear:' => 'icon_bear.png',
           ':star:' => 'icon_star.png',
              '(w)' => 'icon_wordpress.png',
              '(W)' => 'icon_wordpress.png',        
        );
    }
    
    if (count($wpsmiliestrans) == 0) {
        return;
    }
}

But why don’t they all show up in my comments section? Where’s the martini!? I also upgraded my plugin SSL Grins with an ‘easter egg’ of code that hides anything in this array of smiled_hide. This works on both my version of the smilies plugin and Avryl’s. and looks like this:

$smiled_hide = array("bear", "wordpress", "martini", "developer", "whiterussian", "burrito","icon_bear.gif", "icon_wordpress.gif", "icon_martini.gif", "icon_developer.gif", "icon_whiterussian.gif", "icon_burrito.gif", "icon_bear.png", "icon_wordpress.png", "icon_martini.png", "icon_developer.png", "icon_whiterussian.png", "icon_burrito.png", "icon_bear.svg", "icon_wordpress.svg", "icon_martini.svg", "icon_developer.svg", "icon_whiterussian.svg", "icon_burrito.svg");

Now this is possibly the jankiest, stupidest, code I’ve written in a while. I’d rather just have the words be there, and filter “If any of the values in this array is a partial match to the name of the smilie we’re looking at right now, don’t show it.” But I’m not clever enough with arrays and preg matching at this point, so I did that ugly list, and used this:

if (!in_array($grin, $smiled) && !in_array($grin, $smiled_hide) ) {...}

So at this point, pull requests are welcome because I’d love to clean that up!