Emoji Image Creator CSS Border Image Tutorial

Emoji Image Creator CSS Border Image Tutorial

Before building on the recent Emoji Image Creator Share Tutorial with progress (of a meaningful quality) regarding …

• CSS Border Images (made from data-uri data of these recent Emoji Images) … we had to “crack” “the ol'” …
• automating the cropping of bottom and right whitespace

… because you will find only the top border image bits “filled out” if the imagery in the CSS “border-image:URL([data-uri data of these recent Emoji Images]);” has a lopsided whitespace feel to it. PHP can easily do this out of the box from PHP 5.5 onwards via its GD library imagecropauto function. Alas, up at the RJM Programming domain we are on PHP 5.4 and so ended up being helped out enormously by the brilliant ideas on this wonderful link, thanks.

Okay, so we can arrive at a whitespace cropped Emoji Image data uri, what then? Well, we recommend you read …

• border image … and off that, most importantly, perhaps …
• border-image-slice property

… and we display a couple of examples of uses of Border Images using the resultant Emoji Image data uri you create.

So, are you ready for the challenge? Yet again, here is our changed PHP emoji_image.php live run for you to take up that Border Emoji Image CSS Challenge!

Previous relevant Emoji Image Creator Share Tutorial is shown below.

Emoji Image Creator Share Tutorial

We have a couple of “onions of the 4th dimension” amendments to yesterday’s Emoji Image Creator Primer Tutorial …

• the display format scope of the Emoji Image Creator “palette” (“shall we say now … eh wot ‘guv”) extends from single line of entry to be able to handle multiple lines of entry … and Emojis being text that means either …
  1. div contenteditable=true … but we have plumped for …
  2. textarea

  … means by which to make this thangthing happen manperson

• the sharing scope of the Emoji Image Creator goes from “keeping everything to yourself” to “sharing via Email (email client or Inline HTML Email) or SMS”

… your Emoji Image creations. And …

“Where do ya get it?”

… here? … or am I missing something? Can’t be … I’m writing this.

Glad that’s over!

And back to matters at hand, how do we handle that “require” attribute we’d placed on yesterday’s lonesome textbox? Well, we get around that by setting an empty textbox to a space should the user only enter Emoji data in that new textarea (that circumvents the “require” attribute validation restriction), and deploy logic that takes into account PHP variables where …

<?php

$gei="";
if (isset($_GET['emoji_textarea_image'])) {
$gei=str_replace("+"," ",urldecode($_GET['emoji_textarea_image']));
}

if (trim($gei) != "" || isset($_GET['emoji_image'])) {
if (trim($gei) == "") {
$gei=str_replace("+"," ",urldecode($_GET['emoji_image']));
} else if (isset($_GET['emoji_image'])) {
$pregei=str_replace("+"," ",urldecode($_GET['emoji_image']));
if (trim($pregei) != "") {
$pregei.="\n\n" . $gei;
$gei=$pregei;
}
}
file_put_contents('emoji_image.txt', str_replace(";","",str_replace("&#","",str_replace(";&#",".",$gei))) );
// more logic follows to continue the work below ...
}

?>

… PHP function trim comes to our aid, as it so often does in “PHP land” (or as String.trim() does in “Javascript land”) with backward compatibility for dual purpose scenarios.

And again, here is our changed PHP emoji_image.php live run for you to retry, and perhaps, share!

Previous relevant Emoji Image Creator Primer Tutorial is shown below.

Emoji Image Creator Primer Tutorial

We’ve long eyed up the wish to have emojis (which you need to know are text (and this very fact is the reason for this whole project)) be involved with a border image or background image or just with some image in work developing web applications. And so we joined forces with (and thanks to) …

• Google PageSpeed
• Stack Overflow
• jQuery

… along with …

• textbox reachable “Emoji and Symbols” menu to include Emoji characters (though we also accept Emoji CodePoint(s) too)
• Copy and Paste technologies …
  1. Copy (Image) from Google PageSpeed
  2. Paste to HTML div contenteditable=true via Stack Overflow and jQuery
• your own desktop Image Editors … for example …
  1. Gimp can Crop and Resize and Select to new Image via Copy then Paste
  2. Preview and Paintbrush (here on macOS) can Resize and Select to new Image via Copy then Paste

  … can help remove any extraneous whitespace coming off the Google PageSpeed Copy image

With all this help coming our way you’d think we might get away just using HTML and Javascript, but no, we need PHP, we figure, using a web browser file to toggle between web application executions that have no arguments as either …

• it means we display our inhouse interactive entry mode of use when that file does not exist … whereas …
• we arrange it so that it is a call from Google PageSpeed when that file exists (as we morph inhouse content into a single p element containing the Emojis in such a scenario) as Google PageSpeed takes its screenwebpageshot

So here is our PHP emoji_image.php live run …

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.