The Case of the Shrinking Smilies

A while ago, it was drawn to my attention that my smilies had shrunk. Well, to be more accurate, they were being displayed at a rather small size, as you can see here:

Shrinkage

Shrinkage

I had a quick look at the time, but in the usual way, got distracted and mentally filed it[1] as something to look at when I had the time and braincells to spare. Anyway, I was reminded of this when Sam[2] used one in his comment on my epic upgrade post. And as I was planning to have a quiet day in anyway, today was the day to investigate.

A bit of searching showed that other people were having similar issues. It seems that the cause  was the introduction of emoji support in WordPress 4.2. This changes the code in the function that inserts smilies so that it manually adds a height attribute of 1em, and a max-height of 1em, which seemed to account for my larger smilies looking a wee bit tiny. Now changing that was easy enough. Well, it was easy enough when I’d looked at the code of a plugin called Classic Smilies, the main function of which is to revert WordPress to using older smilies rather than the current ones. Well, I didn’t need that bit, but there’s a recently added function to change the offending code. I added this to my functionality plugin[3]

add_action( 'init', 'smilies_size_fix_init', 1 );

function smilies_size_fix_init() {
add_filter( 'the_content', 'smilies_size_fix', 11 );
add_filter( 'the_excerpt', 'smilies_size_fix', 11 );
add_filter( 'comment_text', 'smilies_size_fix', 21 );
}

function smilies_size_fix( $content ) {
return str_replace( 'class="wp-smiley" style="height: 1em; max-height: 1em;"', 'class="wp-smiley"', $content );
}

All this does is look at the code being generated for a post and replace a specific bit of text with another.

Well, I saved that to the server, and sure enough, the nasty attributes were no longer being added. But my smilies were still tiny. So I used the inspection tool in Google Chrome, which pointed me at an extra bit of CSS in the header of the page, which looked like this:

img.wp-smiley,
img.emoji {
 display: inline !important;
 border: none !important;
 box-shadow: none !important;
 height: 1em !important;
 width: 1em !important;
 margin: 0 .07em !important;
 vertical-align: -0.1em !important;
 background: none !important;
 padding: 0 !important;
}

Now that would account for the issue. Using the helpful search tool in BBEdit, I tracked this down to the formatting.php file in the wp-includes folder. At this point, I had to have a bit of a think. One solution would be to edit the formatting.php file to remove the unwanted attributes, but editing core WordPress files is Not Recommended. Well, it’s something I used to do, mumble versions ago, when it was the only way to customise some functions, but it shouldn’t be necessary these days, with all the hooks and filters that let you replace just about any function you like. And you have to keep track of all the files you edited, and redo all your changes every time WordPress gets an upgrade, and hope that they’ll still work…

But, as I might have mentioned before, I’m not a coder. Getting the code right would take a lot of fussing and fiddling, and I still might not get it right. So I left it while I went for a shower and had some breakfast. This turned out to be a good move, as I thought of a simpler solution. All I had to do was adapt the function I’d already written to use a new class name for the smilies code:

return str_replace( 'class="wp-smiley" style="height: 1em; max-height: 1em;"', 'class="lcb-wp-smiley"', $content ); 

And then use the custom CSS module of Jetpack to add a new style:

/* Fix for WP 4.2+ fixed size smilies */
img.lcb-wp-smiley {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	margin: 0 .07em !important;
	vertical-align: -.1em !important;
	background: none !important;
	padding: 0 !important;
}

Once I’d saved those changes, my smilies looked more like this:

Bigger

Bigger

Which is what I was after.

[1] Note to self: mentally filing things doesn’t work, as there are no automatic reminders that way
[2] Hi Sam!  :wave:
[3] Rather than putting lots of stuff into the theme’s functions.php file, I use a plugin so all my custom code stays put if I change themes. Which I may do if I ever persuade another one to work the way I want

3 thoughts on “The Case of the Shrinking Smilies

  1. Pingback: Weight and Stuff Report – 31 December 2015 | Losing it

  2. Pingback: WordPress 4.4.1 has been unleashed | Losing it

  3. Pingback: The Return of the Shrinking Smilies | Losing it

Comments are closed.