{"id":50939,"date":"2020-11-21T03:01:27","date_gmt":"2020-11-20T17:01:27","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=50939"},"modified":"2020-11-22T07:22:46","modified_gmt":"2020-11-21T21:22:46","slug":"emoji-image-creator-share-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-share-tutorial\/","title":{"rendered":"Emoji Image Creator Share Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Image Creator Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_share.jpg\" title=\"Emoji Image Creator Share Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator Share Tutorial<\/p><\/div>\n<p>We have a couple of &#8220;<font size=2>onions<\/font> <font size=3>of<\/font> <font size=4>the<\/font> <font size=5>4th<\/font> <font size=6>dimension<\/font>&#8221; amendments to yesterday&#8217;s <a title='Emoji Image Creator Primer Tutorial' href='#eicpt'>Emoji Image Creator Primer Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>the display format scope of the Emoji Image Creator &#8220;palette&#8221; <font size=1>(&#8220;shall we say now &#8230; eh wot &#8216;guv&#8221;)<\/font> extends from single line of entry to be able to handle multiple lines of entry &#8230; and Emojis being text that means either &#8230;\n<ol>\n<li>div contenteditable=true &#8230; but we have plumped for &#8230;<\/li>\n<li>textarea<\/li>\n<\/ol>\n<p> &#8230; means by which to make this <strike>thang<\/strike>thing happen <font size=1><strike>man<\/strike>person<\/font><\/li>\n<li>the sharing scope of the Emoji Image Creator goes from &#8220;keeping everything to yourself&#8221; to &#8220;sharing via Email (email client or Inline HTML Email) or SMS&#8221;<\/li>\n<\/ul>\n<p> &#8230; your Emoji Image creations.  And &#8230;<\/p>\n<blockquote><p>\n<a target=_blank title='?' href='https:\/\/www.facebook.com\/watch\/?v=229525111056606'>&#8220;Where do ya get it?&#8221;<\/a>\n<\/p><\/blockquote>\n<p> &#8230; <font size=1>here?<\/font> &#8230; <font size=2>or am I missing something?<\/font>  <font size=3>Can&#8217;t be &#8230; <\/font><font size=4>I&#8217;m writing this<\/font>.<\/p>\n<p>Glad that&#8217;s over!<\/p>\n<p>And back to matters at hand, how do we handle that &#8220;require&#8221; attribute we&#8217;d placed on yesterday&#8217;s <i>lonesome<\/i> 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 &#8220;require&#8221; attribute validation restriction), and <font color=blue>deploy logic<\/font> that takes into account PHP variables where &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n<font color=blue>$gei=\"\";<br \/>\nif (isset($_GET['emoji_textarea_image'])) {<br \/>\n    $gei=str_replace(\"+\",\" \",urldecode($_GET['emoji_textarea_image']));<br \/>\n}<\/font><br \/>\n<br \/>\nif (<font color=blue>trim($gei) != \"\" || <\/font>isset($_GET['emoji_image'])) {<br \/>\n  <font color=blue>if (trim($gei) == \"\") {<br \/>\n    $gei=str_replace(\"+\",\" \",urldecode($_GET['emoji_image']));<br \/>\n  } else if (isset($_GET['emoji_image'])) {<br \/>\n    $pregei=str_replace(\"+\",\" \",urldecode($_GET['emoji_image']));<br \/>\n    if (trim($pregei) != \"\") {<br \/>\n      $pregei.=\"\\n\\n\" . $gei;<br \/>\n      $gei=$pregei;<br \/>\n    }<br \/>\n  }<\/font><br \/>\n  file_put_contents('emoji_image.txt',  str_replace(\";\",\"\",str_replace(\"&amp;#\",\"\",str_replace(\";&amp;#\",\".\",<font color=blue>$gei<\/font>)))  );<br \/>\n  \/\/ more logic follows to continue the work below ...<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; PHP function <a target=_blank title='PHP trim' href='https:\/\/www.php.net\/manual\/en\/function.trim.php'>trim<\/a> comes to our aid, as it so often does in &#8220;PHP land&#8221; (or as String.<a target=_blank title='String trim function information from w3schools' href='https:\/\/www.w3schools.com\/jsref\/jsref_trim_string.asp'>trim<\/a>() does in &#8220;Javascript land&#8221;) with backward compatibility for dual purpose scenarios.<\/p>\n<p>And again, here is <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php-GETME\" title=\"emoji_image.php\">our changed PHP<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php-GETME\" title=\"emoji_image.php\">emoji_image.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php\" title=\"Click picture\">live run<\/a> for you to <a href='#ifthere' title='Try here'>retry<\/a>, and perhaps, share!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-share-tutorial\/'>Emoji Image Creator Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eicpt'>Previous relevant <a target=_blank title='Emoji Image Creator Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-primer-tutorial\/'>Emoji Image Creator Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Emoji Image Creator Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.gif\" title=\"Emoji Image Creator Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve long <i>eyed up<\/i> the wish to have emojis (which you need to know are text <font size=1>(and this very fact is the reason for this whole project)<\/font>) be involved with a <a target=_blank title='Border image information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_border-image.asp'>border image<\/a> or <a target=_blank title='Background image information from W3schools' href='https:\/\/www.w3schools.com\/css\/css_background_image.asp'>background image<\/a> or just with some image in work developing web applications.  And so we joined forces with (and thanks to) &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a><\/li>\n<li><a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/28644340\/how-do-i-get-base64-encoded-image-from-clipboard-in-internet-explorer\/28799619'>Stack Overflow<\/a><\/li>\n<li><a target=_blank title='jQuery' href='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js'>jQuery<\/a><\/li>\n<\/ul>\n<p> &#8230; along with &#8230;<\/p>\n<ul>\n<li>textbox reachable &#8220;Emoji and Symbols&#8221; menu to include Emoji characters (though we also accept Emoji <a target=_blank title='CodePoint information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Code_point'>CodePoint<\/a>(s) too)<\/li>\n<li>Copy and Paste technologies &#8230;\n<ol>\n<li>Copy (Image) from <a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a><\/li>\n<li>Paste to HTML div <a target=_blank title='Global contenteditable attribute information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_global_contenteditable.asp'>contenteditable<\/a>=true via <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/28644340\/how-do-i-get-base64-encoded-image-from-clipboard-in-internet-explorer\/28799619'>Stack Overflow<\/a> and <a target=_blank title='jQuery' href='https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/2.1.1\/jquery.min.js'>jQuery<\/a><\/li>\n<\/ol>\n<\/li>\n<li>your own desktop Image Editors &#8230; for example &#8230;\n<ol>\n<li><a target=_blank title='Gimp' href='http:\/\/gimp.org'>Gimp<\/a> can Crop and Resize and Select to new Image via Copy then Paste<\/li>\n<li><a target=_blank title='PreView (on a Mac) information from Apple' href='https:\/\/support.apple.com\/en-us\/HT201740'>Preview<\/a> and <a target=_blank title='Paintbrush for Mac' href='http:\/\/paintbrush.sourceforge.net\/'>Paintbrush<\/a> (here on macOS) can Resize and Select to new Image via Copy then Paste<\/li>\n<\/ol>\n<p> &#8230; can help remove any extraneous whitespace coming off the <a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a> Copy image\n<\/li>\n<\/ul>\n<p>With all this help coming our way you&#8217;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 &#8230;<\/p>\n<ul>\n<li>it means we display our inhouse interactive entry mode of use when that file does not exist &#8230; whereas &#8230;<\/li>\n<li><font size=1>we arrange it so that<\/font> it is a call from <a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a> when that file exists (as we morph inhouse content into a single <i>p<\/i> element containing the Emojis in such a scenario) as <a target=_blank title='Google PageSpeed' href='https:\/\/developers.google.com\/speed\/pagespeed\/insights\/'>Google PageSpeed<\/a> takes its <strike>screen<\/strike><font size=1>webpage<\/font>shot<\/li>\n<\/ul>\n<p>So here is our PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php_GETME\" title=\"emoji_image.php\">emoji_image.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php\" title=\"Click picture\">live run<\/a> &#8230;<\/p>\n<p><iframe id=ifthere src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image.php\" style=\"width:100%;height:900px;\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d50925' onclick='var dv=document.getElementById(\"d50925\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/jquery\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50925' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d50939' onclick='var dv=document.getElementById(\"d50939\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50939' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We have a couple of &#8220;onions of the 4th dimension&#8221; amendments to yesterday&#8217;s Emoji Image Creator Primer Tutorial &#8230; the display format scope of the Emoji Image Creator &#8220;palette&#8221; (&#8220;shall we say now &#8230; eh wot &#8216;guv&#8221;) extends from single &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-share-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[126,127,161,2299,214,2022,2442,265,1654,380,385,491,513,529,576,590,3137,652,663,770,2092,2428,1968,3488,896,907,932,983,997,1159,3487,1262,3242,1319],"class_list":["post-50939","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-background","tag-background-image","tag-border","tag-border-image","tag-clipboard","tag-codepoint","tag-contenteditable","tag-copy","tag-data-uri","tag-email","tag-emoji","tag-gimp","tag-google","tag-google-pagespeed","tag-html","tag-image","tag-image-editor","tag-javascript","tag-jquery","tag-menu","tag-multiple","tag-onion","tag-onions","tag-pagespeed","tag-paintbrush","tag-paste","tag-php","tag-preview","tag-programming","tag-sms","tag-symbols","tag-textarea","tag-trim","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50939"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=50939"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50939\/revisions"}],"predecessor-version":[{"id":50955,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/50939\/revisions\/50955"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=50939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=50939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=50939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}