{"id":51066,"date":"2020-12-02T03:01:57","date_gmt":"2020-12-01T17:01:57","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51066"},"modified":"2020-12-02T20:32:49","modified_gmt":"2020-12-02T10:32:49","slug":"emoji-image-creator-or-media-paster-multiple-copy-background-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-or-media-paster-multiple-copy-background-tutorial\/","title":{"rendered":"Emoji Image Creator or Media Paster Multiple Copy Background 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 or Media Paster Multiple Copy Background Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image_multiple_download.jpg\" title=\"Emoji Image Creator or Media Paster Multiple Copy Background Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator or Media Paster Multiple Copy Background Tutorial<\/p><\/div>\n<p>With the recent <a title='Emoji Image Creator or Media Paster Multiple Copy Tutorial' href='#eicmpmct'>Emoji Image Creator or Media Paster Multiple Copy Tutorial<\/a>&#8216;s introduction of &#8230;<\/p>\n<ul>\n<li>allow for Copy of multiple files in the jQuery logic &#8230; and today we &#8230;<\/li>\n<li>add a new button &#8220;Copy Media&#8221; for the user who will Copy multiple image\/audio\/video media<\/li>\n<li>add &#8220;Paste here&#8221; to table cell\u2019s div contenteditable=true element in which the user should Paste their data<\/li>\n<li>allow for background images to this Paste cell &#8230; whose &#8230;<\/li>\n<li>corresponding real img elements for each background image, when clicked, can download that image data for the user<\/li>\n<\/ul>\n<p>Regarding the positioning of these multiple background images we need to reference those real img element coreespondents, as per the new Javascript function &#8230;<\/p>\n<p><code><br \/>\nfunction predotogglei() {<br \/>\n  var toti=0;<br \/>\n  var cumy=0;<br \/>\n  var ims=document.getElementsByTagName('img');<br \/>\n  var zrect=null;<br \/>\n  var yrect=document.getElementById('editor').getBoundingClientRect();<br \/>\n  bpos=''; \/\/0px 0px';<br \/>\n  bsiz=''; \/\/0px 0px';<br \/>\n  for (var jjims=0; jjims&lt;ims.length; jjims++) {<br \/>\n    if (('' + ims[jjims].className) == 'togglei') {<br \/>\n      toti++;<br \/>\n    }<br \/>\n  }<br \/>\n  for (var jims=0; jims&lt;ims.length; jims++) {<br \/>\n    if (('' + ims[jims].className) == 'togglei') {<br \/>\n      if (bpos == '') {<br \/>\n        bpos='0px 0px';<br \/>\n        zrect=ims[jims].getBoundingClientRect();<br \/>\n        cumy+=eval('' + zrect.height);<br \/>\n        bsiz='auto ' + zrect.height + 'px';<br \/>\n      } else {<br \/>\n        bpos+=',0px ' + cumy + 'px';<br \/>\n        zrect=ims[jims].getBoundingClientRect();<br \/>\n        cumy+=eval('' + zrect.height);<br \/>\n        bsiz+=',auto ' + zrect.height + 'px';<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n  document.getElementById('editor').style.backgroundPosition=bpos;<br \/>\n  document.getElementById('editor').style.backgroundSize=bsiz;<br \/>\n}<br \/>\n<\/code> <\/p>\n<p>Yes, you guessed it. There&#8217;s still far more to what we might do regarding reading a user&#8217;s mind when they copy and paste multiple files over, and that is still a work in progress, along with cross-browser issues and how to handle multiple background or border image usage, but for now, feel free to try this new multiple copy\/paste background image download functionality, which exists in <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 yourself, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=7QbBONaR8As#t=02m58s'>again, in your yurt<\/a>.<\/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-or-media-paster-multiple-copy-background-tutorial\/'>Emoji Image Creator or Media Paster Multiple Copy Background Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eicmpmct'>Previous relevant <a target=_blank title='Emoji Image Creator or Media Paster Multiple Copy Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-or-media-paster-multiple-copy-tutorial\/'>Emoji Image Creator or Media Paster Multiple Copy 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 or Media Paster Multiple Copy Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image_multiple.jpg\" title=\"Emoji Image Creator or Media Paster Multiple Copy Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator or Media Paster Multiple Copy Tutorial<\/p><\/div>\n<p>Could there be another &#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; amendment left that could help our project, the &#8220;Emoji Image (and media)&#8221; web application of yesterday&#8217;s <a title='Emoji Image Creator or Media Paster Aesthetics Tutorial' href='#eicmpat'>Emoji Image Creator or Media Paster Aesthetics Tutorial<\/a>?  We think so.<\/p>\n<p>You see, when we added that Audio and\/or Video media functionality, did anything occur to you regarding &#8230;<\/p>\n<ul>\n<li>the procedure recommended to do Audio and\/or Video data &#8230; or even &#8230;<\/li>\n<li>the very idea, anyway<\/li>\n<\/ul>\n<p>?  It&#8217;s pretty optimistic thinking users would just select a single Audio or Video file to copy over to our web application, and fit in with its (previous) &#8220;limited view&#8221;.   Pretty obviously, we&#8217;d like to cater for multiple file selections both in the Audio or Video scenario there, plus the idea of a user ignoring Google Pagespeed (third party) help, and opting to use macOS Finder or Windows Explorer to select multiple image files, or various media mix combinations.<\/p>\n<p>Do you see what a Pandora&#8217;s Box we are opening ourselves up to with this?  Yes, it will take more than today to get this Multiple Copy (and Multiple Paste) functionality to be smoothly integrated.  Our biggest start down that road, though, is that jQuery access of the HTML5 File API &#8220;onloadend&#8221; arrangements.  If you just think the &#8220;one file&#8221; usage here will work for &#8220;multiple file&#8221; usage, the way it was, think again.  We did, with the web application of <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/imagepdf-and-audiovideo-supervised-rotation-tutorial\/' title='Image\/PDF and Audio\/Video Supervised Rotation Tutorial '>Image\/PDF and Audio\/Video Supervised Rotation Tutorial<\/a>, luckily, as a conduit to a reunderstanding of that more complex jQuery and File API Javascript <font color=blue>required now<\/font>, for this &#8230;<\/p>\n<p>&lt;?php echo \u201c<br \/>\n<code><br \/>\nvar btype='';<br \/>\nvar origdu='';<br \/>\nvar origwo=null;<br \/>\n<font color=blue>var origdus=[];<br \/>\nvar btypes=[];<br \/>\nvar curnum=0;<br \/>\nvar curtot=0;<br \/>\nvar fileReaders=[];<br \/>\nvar imageFiles=[];<br \/>\nvar curi=0;<br \/>\nvar ii=0;<\/font><br \/>\n<br \/>\n$(document).ready(function() {<br \/>\n  $('#editor').on('paste', function(e) {<br \/>\n    var i = 0;<br \/>\n    ii = -1;<br \/>\n    <font color=blue>var fileReader = null;<br \/>\n    var imageFile = null;<\/font><br \/>\n    var orgEvent = e.originalEvent;<br \/>\n    curtot = eval('' + orgEvent.clipboardData.items.length);<br \/>\n    console.log('curtot=' + curtot);<br \/>\n    for (i = 0; i &lt; orgEvent.clipboardData.items.length; i++) {<br \/>\n      console.log('i=' + i + ' of ' + curtot + ' and kind=' + orgEvent.clipboardData.items[i].kind);<br \/>\n      if (orgEvent.clipboardData.items[i].kind == \\\"file\\\" && (<font color=blue>i &gt; 0 || <\/font>(('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $iimage . \"\/\\\" || ('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $iaudio . \"\/\\\" || ('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $ivideo . \"\/\\\"))) {<br \/>\n        <font color=blue>ii++;<\/font><br \/>\n        imageFile = orgEvent.clipboardData.items[i].getAsFile();<br \/>\n        <font color=blue>imageFiles.push(imageFile);<\/font><br \/>\n        fileReader = new FileReader();<br \/>\n        <font color=blue>fileReaders.push(fileReader);<\/font><br \/>\n        btype=('' + orgEvent.clipboardData.items[i].type);<br \/>\n        <font color=blue>btypes.push(btype);<br \/>\n        curi=eval(-1 + fileReaders.length);<br \/>\n<br \/>\n        if (eval('' + curtot) &gt; 1) {<br \/>\n<br \/>\n    fileReaders[ii].onloadend = (function(mfile) {<br \/>\n      return function(evt) {<br \/>\n      if (evt.target.readyState == FileReader.DONE) { \/\/ DONE == 2<br \/>\n          origdu=evt.target.result;<br \/>\n          origdus.push(origdu);<br \/>\n          $('#result').html(document.getElementById('result').innerHTML + evt.target.result);<br \/>\n          andthen(mfile.type);<br \/>\n      } };<br \/>\n    })(imageFiles[ii]);<br \/>\n        fileReaders[ii].readAsDataURL(imageFiles[ii]);<br \/>\n        if (eval(1 + i) == eval('' + curtot)) { break; }<br \/>\n<br \/>\n        } else {<\/font><br \/>\n<br \/>\n        fileReader.onloadend = function() {<br \/>\n          origdu=fileReader.result;<br \/>\n          origdus.push(origdu);<br \/>\n          $('#result').html(document.getElementById('result').innerHTML + fileReader.result);<br \/>\n          andthen(btypes[curi]);<br \/>\n        }<br \/>\n<br \/>\n        fileReader.readAsDataURL(imageFile);<br \/>\n        <font color=blue>if (eval(1 + i) == eval('' + curtot)) {<\/font> break; <font color=blue>}<\/font><br \/>\n        <font color=blue>}<\/font><br \/>\n      } else if (orgEvent.clipboardData.items[i].kind == \\\"string\\\") { \/\/ && (('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $iimage . \"\/\\\" || ('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $iaudio . \"\/\\\" || ('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $ivideo . \"\/\\\")) {<br \/>\n        btype=('' + orgEvent.clipboardData.items[i].type);<br \/>\n        btypes.push(btype);<br \/>\n        setTimeout(prethen, 2000);<br \/>\n      }<br \/>\n    }<br \/>\n  });<br \/>\n});<br \/>\n<\/code><br \/>\n\u201c; ?&gt;<\/p>\n<p>Now there&#8217;s far more to what we might do regarding reading a user&#8217;s mind when they copy and paste multiple files over, and that will be a work in progress, along with cross-browser issues and how to handle multiple background or border image usage, but for now, feel free to try this new multiple copy\/paste functionality, which exists in <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 yourself, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=7QbBONaR8As#t=02m58s'>again, in your yurt<\/a>.<\/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-or-media-paster-multiple-copy-tutorial\/'>Emoji Image Creator or Media Paster Multiple Copy Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eicmpat'>Previous relevant <a target=_blank title='Emoji Image Creator or Media Paster Aesthetics Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-or-media-paster-aesthetics-tutorial\/'>Emoji Image Creator or Media Paster Aesthetics 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 or Media Paster Aesthetics Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image_makeover.jpg\" title=\"Emoji Image Creator or Media Paster Aesthetics Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator or Media Paster Aesthetics Tutorial<\/p><\/div>\n<p>If you have been following our latest &#8220;Emoji Image (and other media)&#8221; project of yesterday&#8217;s <a title='Emoji Image Creator or Media Paster Download Tutorial' href='#eicmpdt'>Emoji Image Creator or Media Paster Download Tutorial<\/a> you will know we have two (publicly displaying) &#8220;incarnations&#8221; of the inhouse bit of the PHP webpage &#8230;<\/p>\n<ol>\n<li>first incarnation asks for user input via user interaction <font size=1>&#8230; including storming out<\/font> &#8230;<\/li>\n<li>second incarnation shows results and now allows for downloading results as HTML snippets<\/li>\n<\/ol>\n<p> &#8230; and today we try to minimize the numbers of people <font size=1>storming out<\/font> we hope.  This is something running in our favour here, as these changes concern the first incarnation above.<\/p>\n<ul>\n<li>if you have a webpage waiting for user interactivity it doesn&#8217;t matter &#8230;<\/li>\n<li>if you load it with display intensive CSS (such as our &#8220;glow&#8221; animations) &#8230; it doesn&#8217;t matter &#8230; you&#8217;re waiting there anyway &#8230; plus you are self-explaining<\/li>\n<\/ul>\n<p>And there is not much better, to our mind, for &#8220;self-explaining&#8221; and helping that little bit with internationalization, of your web application than to &#8230;<\/p>\n<ul>\n<li>use emojis &#8230; and fortunately for us with this web application here &#8230;<\/li>\n<li>involve &#8220;end results&#8221; of what your web application might achieve &#8230; and fortunately for us with this web application that is emoji image border images and background images<\/li>\n<\/ul>\n<p>A new block of CSS for that first incarnation is our progress, today, then (where data uri have been [nicknamed] below) &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\n.cglow {<br \/>\n  box-shadow-bottom-right-radius: 50%; \/\/ thanks to https:\/\/stackoverflow.com\/questions\/2714765\/using-border-radius-and-box-shadow-together-css<br \/>\n  box-shadow-bottom-left-radius: 50%;<br \/>\n  box-shadow-top-right-radius: 50%;<br \/>\n  box-shadow-top-left-radius: 50%;<br \/>\n  -webkit-animation: cglow 1s ease-in-out infinite alternate;<br \/>\n  -moz-animation: cglow 1s ease-in-out infinite alternate;<br \/>\n  animation: cglow 1s ease-in-out infinite alternate;<br \/>\n  -webkit-border-radius: 50%;<br \/>\n  border-radius: 50%;<br \/>\n}<br \/>\n<br \/>\n.glow {<br \/>\n  -webkit-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  -moz-animation: glow 1s ease-in-out infinite alternate;<br \/>\n  animation: glow 1s ease-in-out infinite alternate;<br \/>\n  border: 30px solid white;<br \/>\n  padding: 25px;<br \/>\n  border-image:URL([owlToImageEmojiDataUri]);<br \/>\n  border-image-slice: 45% 5%;<br \/>\n  border-image-repeat: round;<br \/>\n  text-align: center;<br \/>\n}<br \/>\n<br \/>\n\/* Thanks to https:\/\/www.w3schools.com\/howto\/tryit.asp?filename=tryhow_css_glowing_text *\/<br \/>\n<br \/>\n@-webkit-keyframes cglow {<br \/>\n  from {<br \/>\n    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;<br \/>\n  box-shadow-bottom-right-radius: 50%; \/\/ thanks to https:\/\/stackoverflow.com\/questions\/2714765\/using-border-radius-and-box-shadow-together-css<br \/>\n  box-shadow-bottom-left-radius: 50%;<br \/>\n  box-shadow-top-right-radius: 50%;<br \/>\n  box-shadow-top-left-radius: 50%;<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;<br \/>\n  box-shadow-bottom-right-radius: 50%; \/\/ thanks to https:\/\/stackoverflow.com\/questions\/2714765\/using-border-radius-and-box-shadow-together-css<br \/>\n  box-shadow-bottom-left-radius: 50%;<br \/>\n  box-shadow-top-right-radius: 50%;<br \/>\n  box-shadow-top-left-radius: 50%;<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\n@-webkit-keyframes glow {<br \/>\n  from {<br \/>\n    box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;<br \/>\n  }<br \/>\n<br \/>\n  to {<br \/>\n    box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;<br \/>\n  }<br \/>\n}<br \/>\n<br \/>\ninput[type=text] {<br \/>\n  padding: 25px 0;<br \/>\n}<br \/>\n<br \/>\ninput[type=submit] {<br \/>\n  padding: 10px 10px 10px 10px;<br \/>\n  width: 25%;<br \/>\n  height: 100px;<br \/>\n  background:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL([owlToImageEmojiDataUri]);<br \/>\n  background-size: cover;<br \/>\n  background-repeat: no-repeat;<br \/>\n  border: 2px solid yellow;<br \/>\n}<br \/>\n<br \/>\ninput[type=button] {<br \/>\n  padding: 10px 10px 10px 10px;<br \/>\n  width: 25%;<br \/>\n  height: 100px;<br \/>\n}<br \/>\n<br \/>\n#video {<br \/>\n  background:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL([videoEmojiDataUri]);<br \/>\n  background-size: cover;<br \/>\n  background-repeat: no-repeat;<br \/>\n  border: 2px solid yellow;<br \/>\n}<br \/>\n<br \/>\n#audio {<br \/>\n  background:linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL([audioEmojiDataUri]);<br \/>\n  background-size: contain;<br \/>\n  background-repeat: no-repeat;<br \/>\n  border: 2px solid yellow;<br \/>\n}<br \/>\n<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p>Try this new look functionality which exists in <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 try all this for yourself, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=7QbBONaR8As#t=02m58s'>yet again<\/a>.<\/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-or-media-paster-aesthetics-tutorial\/'>Emoji Image Creator or Media Paster Aesthetics Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eicmpdt'>Previous relevant <a target=_blank title='Emoji Image Creator or Media Paster Download Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-or-media-paster-download-tutorial\/'>Emoji Image Creator or Media Paster Download 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 or Media Paster Download Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image_download.jpg\" title=\"Emoji Image Creator or Media Paster Download Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator or Media Paster Download Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Emoji Image Creator or Media Paster Tutorial' href='#eicmpt'>Emoji Image Creator or Media Paster Tutorial<\/a> continued our &#8220;Emoji Image <font siz=1>(and media)<\/font>&#8221; web application project&#8217;s progress, that we see in the analogous terms below &#8230;<\/p>\n<table border=10>\n<tr>\n<th>Project<\/th>\n<th>Analogy<\/th>\n<\/tr>\n<tr>\n<td>First webpage incarnation with textbox and textarea and buttons is displayed.<\/td>\n<td>The user is shown the menu for goods creation.<\/td>\n<\/tr>\n<tr>\n<td>On first webpage incarnation user assembles emojis and\/or text into textbox and textarea and clicks appropriate button, as required.<\/td>\n<td>Goods are imagined by prospective user to their requirements.<\/td>\n<\/tr>\n<tr>\n<td>User copies from third party resource and pastes (that copy) into second webpage incarnation table cell.<\/td>\n<td>Goods are created by prospective user to their requirements with help of third party resources.<\/td>\n<\/tr>\n<tr>\n<td>Web application reworks media into border and background element enhancements on second webpage incarnation.<\/td>\n<td>Goods are packed into containers and shipped to user port.<\/td>\n<\/tr>\n<tr>\n<td><font size=9 color=red>?<\/font><\/td>\n<td>User gets goods off ship in port ready for personal use.<\/td>\n<\/tr>\n<\/table>\n<p>What <font size=9 color=red>?<\/font> <font size=1>(dare we say)<\/font> &#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; amendment could help our project?  <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>Anyone, anyone?<\/a>  Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/The_Pirate_Bay_trial'>Tomas Norstr\u00f6m<\/a> to get data from &#8220;remote woooooorrrrrrllllld&#8221; to &#8220;local woooooorrrrrrllllld&#8221; you &#8230;<\/p>\n<blockquote><p>\n<a target=_blank title='HTML a link download attribute' href='https:\/\/www.w3schools.com\/tags\/att_a_download.asp'>download<\/a>\n<\/p><\/blockquote>\n<p>And in order for this to &#8220;value add&#8221; let&#8217;s arrange for the user to be able to &#8220;download&#8221; second webpage incarnation elements of interest, by clicking them, after initially (just) displaying them.  We do this for an &#8220;existent element content of interest&#8221; called <i>[contentOfInterest]<\/i> via the nesting of that <i>[contentOfInterest]<\/i> <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n<font color=blue>&lt;a download style=\"cursor:pointer;text-decoration: underline overline dotted red;\" target=_blank href=\"data:text\/html,[htmlWorkedContentOfInterest]\"&gt;<\/font><i>[contentOfInterest]<\/i><font color=blue>&lt;\/a&gt;<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; as the concept we match to the new Javascript function &#8220;actuality&#8221; &#8230;<\/p>\n<p>&lt;?php echo &#8221;<br \/>\n<code><br \/>\nfunction downloaditize(ois) {<br \/>\n  var xrect=ois.getBoundingClientRect();<br \/>\n  var fromc=\\\" style='\\\";<br \/>\n  var toc=\\\" style='width:\\\" + xrect.width + \\\"px;height:\\\" + xrect.height + \\\"px;\\\";<br \/>\n  var ihis='', stys=[];<br \/>\n  var wasihis=ois.innerHTML;<br \/>\n  if (wasihis.indexOf(' download') == -1) {<br \/>\n  if (('' + ois.id).indexOf('borderimg') == 0) {<br \/>\n  ihis='&lt;html&gt;&lt;body' + toc + \\\"'\\\" + '&gt;' + ois.innerHTML.replace('[asBelow]', ('data:' + document.getElementById('result').innerHTML.split('data:')[1].split('&lt;\/')[0].split(')')[0])).replace(' transparent',' white') + '&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n  while (ihis.indexOf(String.fromCharCode(34)) != -1) {<br \/>\n    ihis=ihis.replace(String.fromCharCode(34),String.fromCharCode(39));<br \/>\n  }<br \/>\n  while (wasihis.indexOf(String.fromCharCode(34)) != -1) {<br \/>\n    wasihis=wasihis.replace(String.fromCharCode(34),String.fromCharCode(39));<br \/>\n  }<br \/>\n  \/\/console.log(wasihis);<br \/>\n  \/\/console.log('&lt;a download style=\\\"cursor:pointer;text-decoration: underline overline dotted red;\\\" target=_blank href=\\\"data:text\/html,' + wasihis.replace(\/\\&lt\\;\/g,'&lt;').replace(\/\\&gt\\;\/g,'&gt;').replace('[asBelow]', document.getElementById('result').innerHTML).replace(' transparent',' white') + '\\\" title=\\\"Download here\\\"&gt;' + wasihis + '&lt;\/a&gt;');<br \/>\n  ois.innerHTML='&lt;a download style=\\\"cursor:pointer;text-decoration: underline overline dotted red;\\\" target=_blank href=\\\"data:text\/html,' + wasihis.replace(\/\\&lt\\;\/g,'&lt;').replace(\/\\&gt\\;\/g,'&gt;').replace('[asBelow]', document.getElementById('result').innerHTML).replace(' transparent',' white') + '\\\" title=\\\"Download here\\\"&gt;' + wasihis + '&lt;\/a&gt;';<br \/>\n  } else {<br \/>\n  if (('' + ois.id) == 'result') {<br \/>\n  ihis='&lt;html&gt;&lt;body&gt;' + ois.outerHTML.replace('[asBelow]', ('data:' + document.getElementById('result').innerHTML.split('data:')[1].split('&lt;\/')[0].split(')')[0])).replace(' transparent',' white').replace(' title=', ' style=').replace('{',' ').replace('}',' ').replace('#' + ('' + ois.id),' ') + '&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n  } else {<br \/>\n  ihis='&lt;html&gt;&lt;body&gt;&lt;table&gt;&lt;tr&gt;' + ois.outerHTML.replace('[asBelow]', document.getElementById('result').innerHTML).replace(' transparent',' white').replace(' title=', ' style=').replace('{',' ').replace('}',' ').replace('#' + ('' + ois.id),' ') + '&lt;\/tr&gt;&lt;\/table&gt;&lt;\/body&gt;&lt;\/html&gt;';<br \/>\n  }<br \/>\n  while (ihis.indexOf(String.fromCharCode(34)) != -1) {<br \/>\n    ihis=ihis.replace(String.fromCharCode(34),String.fromCharCode(39));<br \/>\n  }<br \/>\n  stys=ihis.split(\\\"' style='\\\");<br \/>\n  if (stys.length == 3) {<br \/>\n    ihis=ihis.replace(\\\"' style='\\\" + stys[2], \\\" \\\" + stys[2]);<br \/>\n  }<br \/>\n  if (('' + ois.id) != 'result') {<br \/>\n  console.log('&lt;a download style=\\\"cursor:pointer;text-decoration: underline overline dotted red;\\\" target=_blank href=\\\"data:text\/html,' + ihis.replace(fromc,toc) + '\\\" title=\\\"Download here\\\"&gt;' + wasihis + '&lt;\/a&gt;');<br \/>\n  }<br \/>\n  ois.innerHTML='&lt;a download style=\\\"cursor:pointer;text-decoration: underline overline dotted red;\\\" target=_blank href=\\\"data:text\/html,' + ihis.replace(fromc,toc) + '\\\" title=\\\"Download here\\\"&gt;' + wasihis + '&lt;\/a&gt;';<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n&#8220;; ?&gt;<\/p>\n<p> &#8230; making use of the &#8220;text\/html&#8221; mime type data uri alternative means of expressing HTML content (in special scenarios).  Once in the &#8220;local woooooorrrrrrllllld&#8221; opportunities exist to play around with downloaded files and involve a local web server system such as the <a target=_blank title='MAMP for Apache\/PHP\/MySql on Mac OS X local web server' href='http:\/\/www.mamp.info'><i>MAMP<\/i><\/a> Apache\/PHP\/MySql local web server we cannot speak too highly, regarding.<\/p>\n<p>This new downloading functionality exists in <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 try all this for yourself, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=7QbBONaR8As#t=02m58s'>again<\/a>.<\/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-or-media-paster-download--tutorial\/'>Emoji Image Creator or Media Paster Download Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eicmpt'>Previous relevant <a target=_blank title='Emoji Image Creator or Media Paster Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-or-media-paster-tutorial\/'>Emoji Image Creator or Media Paster 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 or Media Paster Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image_media.jpg\" title=\"Emoji Image Creator or Media Paster Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator or Media Paster Tutorial<\/p><\/div>\n<p>Thinking about yesterday&#8217;s <a title='Emoji Image Creator CSS Background Image Tutorial' href='#eiccssbit'>Emoji Image Creator CSS Background Image Tutorial<\/a>&#8216;s &#8230;<\/p>\n<ul>\n<li>existent <i>Emoji Image creation<\/i> functionality &#8230; the next &#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; amendment could involve &#8230;<\/li>\n<li>add <i>Audio Copier and Paster<\/i> functionality &#8230; and &#8230;<\/li>\n<li>add <i>Video Copier and Paster<\/i> functionality &#8230; to round out what a lot of us see as the &#8220;media set&#8221; in the online woooooorrrrrllllld<\/li>\n<\/ul>\n<p>With these last two, we pare down the workings and leave it up to the user to copy these Audio and\/or Video media data via Finder (in macOS) or Windows Explorer (in Windows) as a &#8220;replacement widget&#8221; for the &#8220;Google Pagespeed&#8221; widget we&#8217;ve coded for regarding (Emnoji) Image media work.<\/p>\n<p>Most crucial in these changes were the Javascript jQuery (and PHP helping out) <font color=blue>code changes<\/font> &#8230;<\/p>\n<p>&lt;?php <\/p>\n<p>\n<font color=blue>$ei=&#8221;Emoji Image&#8221;;<br \/>\n$cr=&#8221;Creator&#8221;;<br \/>\n$imgw=&#8221;image&#8221;;<br \/>\n$iimage=&#8221;image&#8221;;<br \/>\n$iaudio=&#8221;ywnft&#8221;;<br \/>\n$ivideo=&#8221;ywnft&#8221;;<br \/>\n$gps=&#8221;window.open(\\&#8221;https:\/\/developers.google.com\/speed\/pagespeed\/insights\/?url=http%3A%2F%2Fwww.rjmprogramming.com.au%2FPHP%2Femoji_image.php&#038;tab=mobile\\&#8221;,\\&#8221;_blank\\&#8221;,\\&#8221;top=50,left=50,height=900,width=1300\\&#8221;);&#8221;;<br \/>\n<br \/>\n$hblurb=&#8221;Copy (Image) from Google PageSpeed <br \/>(thanks, and note to toggle between mobile and desktop tabs perhaps) <br \/>and Paste via macOS Alt-PrtScr Below (for Data URI as well) <br \/>or to an Image Editor that can Crop out Extraneous White Parts <br \/>or Resize Image and Save <br \/>(ready for Border Image or Background Image or just Image purposes)&#8221;;<br \/>\n<br \/>\nif (isset($_GET[&#8216;audio&#8217;])) {<br \/>\n  $hblurb=&#8221;Copy Audio <br \/>via Finder or Windows Explorer <br \/>and come Back Here to Paste that Data&#8221;;<br \/>\n  $ei=&#8221;Audio&#8221;;<br \/>\n  $cr=&#8221;Paster&#8221;;<br \/>\n  $imgw=&#8221;audio&#8221;;<br \/>\n  $iaudio=&#8221;audio&#8221;;<br \/>\n  $iimage=&#8221;ywnft&#8221;;<br \/>\n  $ivideo=&#8221;ywnft&#8221;;<br \/>\n  $gps=&#8221;&#8221;;<br \/>\n} else if (isset($_GET[&#8216;video&#8217;])) {<br \/>\n  $hblurb=&#8221;Copy Video <br \/>via Finder or Windows Explorer <br \/>and come Back Here to Paste that Data&#8221;;<br \/>\n  $ei=&#8221;Video&#8221;;<br \/>\n  $cr=&#8221;Paster&#8221;;<br \/>\n  $imgw=&#8221;video&#8221;;<br \/>\n  $ivideo=&#8221;video&#8221;;<br \/>\n  $iaudio=&#8221;ywnft&#8221;;<br \/>\n  $iimage=&#8221;ywnft&#8221;;<br \/>\n  $gps=&#8221;&#8221;;<br \/>\n}<\/font><br \/>\n<br \/>\n echo &#8220;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n<br \/>\nvar done=false;<br \/>\n<font color=blue>var btype='';<\/font><br \/>\n<br \/>\n$(document).ready(function() {<br \/>\n  $('#editor').on('paste', function(e) {<br \/>\n    var orgEvent = e.originalEvent;<br \/>\n    for (var i = 0; i &lt; orgEvent.clipboardData.items.length; i++) {<br \/>\n      if (orgEvent.clipboardData.items[i].kind == \\\"file\\\" && (<font color=blue>('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $iimage . \"\/\\\" || ('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $iaudio . \"\/\\\" || ('' + orgEvent.clipboardData.items[i].type).substring(0,6) == \\\"\" . $ivideo . \"\/\\\")<\/font>) {<br \/>\n        var imageFile = orgEvent.clipboardData.items[i].getAsFile();<br \/>\n        var fileReader = new FileReader();<br \/>\n        <font color=blue>btype=('' + orgEvent.clipboardData.items[i].type);<\/font><br \/>\n        fileReader.onloadend = function() {<br \/>\n          $('#result').html(fileReader.result);<br \/>\n          andthen(<font color=blue>btype<\/font>);<br \/>\n        }<br \/>\n        fileReader.readAsDataURL(imageFile);<br \/>\n        break;<br \/>\n      }<br \/>\n    }<br \/>\n  });<br \/>\n});<br \/>\n<br \/>\n\/\/ lots more Javascript follows<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><br \/>\n&#8220;;  ?&gt;<\/p>\n<p>This new audio and\/or video media functionality exists in <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 try all this for yourself.<\/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-or-media-paster-tutorial\/'>Emoji Image Creator or Media Paster Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eiccssbit'>Previous relevant <a target=_blank title='Emoji Image Creator CSS Background Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-css-background-image-tutorial\/'>Emoji Image Creator CSS Background Image 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 CSS Background Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image_background.jpg\" title=\"Emoji Image Creator CSS Background Image Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator CSS Background Image Tutorial<\/p><\/div>\n<p>The recent &#8230;<\/p>\n<ul>\n<li><a title='Emoji Image Creator CSS Border Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-css-border-image-tutorial\/'>Emoji Image Creator CSS <b><i>Border Image<\/i><\/b> Tutorial<\/a> &#8230; is being followed up today by &#8230;<\/li>\n<li><a title='Emoji Image Creator CSS Background Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-css-background-image-tutorial\/'>Emoji Image Creator CSS <b><i>Background Image<\/i><\/b> Tutorial<\/a><\/li>\n<\/ul>\n<p> &#8230; before we say &#8220;<b>B<\/b><strike><b>I<\/b><\/strike>ye&#8221; to the Emoji Image themed blog postings here.<\/p>\n<p>As many users will know, emojis can be the graphically-challenged user&#8217;s ticket to &#8230;<\/p>\n<ul>\n<li>personalization<\/li>\n<li>graphical and aesthetic appeal of webpages<\/li>\n<li>attracting attention to your content<\/li>\n<\/ul>\n<p> &#8230; that is much easier than learning the graphical expertise Photoshop and <a target=_blank href='http:\/\/www.gimp.org' title='Gimp, or GIMP'>Gimp<\/a> usage encourages.  But too much emoji usage can look a bit predictable too, so we are not discouraging you from <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=s6EaoPMANQM'>learn<\/a>ing any of those graphical expertise skills.<\/p>\n<p>Emojis are limited from a lot of CSS styling border and background image usage, but we can convert those Emojis into images here, which is the gist of what we are on about here on this blog posting thread.<\/p>\n<p>In order to show a bit of <i>background image<\/i> work we sprinkle the webpage with four CSS styling examples of usage (ordered from the top to bottom and left to right) &#8230;<\/p>\n<p><font size=1>&lt;style&gt;<\/font><\/p>\n<ol>\n<li> #hthree { background:<a target=_blank title='CSS3 linear gradient information from w3schools' href='http:\/\/www.w3schools.com\/css\/css3_gradients.asp'>linear-gradient<\/a>(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL([asBelow]); <a target=_blank title='CSS3 background-size information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_background-size.asp'>background-size<\/a>:cover; <a target=_blank title='CSS3 background-repeat information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/pr_background-repeat.asp'>background-repeat<\/a>:no-repeat;  } <\/li>\n<li> #thone { background:URL([asBelow]); background-repeat:no-repeat;  } <\/li>\n<li> #thtwo { background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL([asBelow]); background-repeat:repeat; } <\/li>\n<li> #result { background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)),URL([asBelow]); background-size:contain; background-repeat:no-repeat;  } <\/li>\n<\/ol>\n<p><font size=1>&lt;\/style&gt;<\/font><\/p>\n<p> &#8230; and added dynamically because &#8230;<\/p>\n<ul>\n<li><font size=1>&lt;style&gt;<\/font> CSS <font size=1>&lt;\/style&gt;<\/font> is not restricted to just <font size=1>&lt;head&gt;<\/font><font size=1>&lt;\/head&gt;<\/font> but can also work within <font size=1>&lt;body&gt;<\/font><font size=1>&lt;\/body&gt;<\/font> &#8230; and &#8230;<\/li>\n<li>for that  <font size=1>&lt;body&gt;<\/font><font size=1>[document.body.innerHTML]<\/font><font size=1>&lt;\/body&gt;<\/font> usage Javascript (DOM<font size=1>, within document.body.innerHTML<\/font>) can dynamically add the CSS styling at a time of the programmer&#8217;s choosing<\/li>\n<\/ul>\n<p>And so yet 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 take up both the <i>Border Emoji Image CSS Challenge<\/i> and, now, <i>Background Emoji Image CSS Challenge<\/i>!<\/p>\n<p><i><b>Did you know?<\/b><\/i><\/p>\n<p>Thanks to <a target=_blank title='Useful link' href='https:\/\/stackoverflow.com\/questions\/39749476\/css-border-image-not-displaying-on-ios10'>this wonderful link<\/a> we were able to get around our &#8220;mobile platforms not showing our (independently tested that whitespace cropping was occurring <font size=1>whether in png format or in jpeg format<\/font>) image <i>CSS border image<\/i> applications&#8221; issue by changing the CSS &#8230;<\/p>\n<table>\n<tr>\n<th>From (suits non-mobile)<\/th>\n<th>To (better suiting mobile)<\/th>\n<\/tr>\n<tr>\n<td>#borderimg1 {<br \/>\n  border: 20px solid transparent;<br \/>\n}<\/td>\n<td>#borderimg1 {<br \/>\n  border: 20px solid white;<br \/>\n}<\/td>\n<\/tr>\n<tr>\n<td>#borderimg2 {<br \/>\n  border: 20px solid transparent;<br \/>\n}<\/td>\n<td>#borderimg2 {<br \/>\n  border: 20px solid white;<br \/>\n}<\/td>\n<\/tr>\n<\/table>\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\/new-emoji-image-creator-css-background-image-tutorial\/'>Emoji Image Creator CSS Background Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eiccssbit'>Previous relevant <a target=_blank title='Emoji Image Creator CSS Border Image Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-css-border-image-tutorial\/'>Emoji Image Creator CSS Border Image 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 CSS Border Image Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/emoji_image_border.jpg\" title=\"Emoji Image Creator CSS Border Image Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Emoji Image Creator CSS Border Image Tutorial<\/p><\/div>\n<p>Before building on the recent <a title='Emoji Image Creator Share Tutorial' href='#eicst'>Emoji Image Creator Share Tutorial<\/a> with progress <font size=1>(of a meaningful quality)<\/font> regarding &#8230;<\/p>\n<ul>\n<li>CSS Border Images (made from data-uri data of these recent Emoji Images) &#8230; we had to &#8220;crack&#8221; <font size=1>&#8220;the ol'&#8221;<\/font> &#8230;<\/li>\n<li>automating the cropping of bottom and right whitespace<\/li>\n<\/ul>\n<p> &#8230; because you will find only the top border image bits &#8220;filled out&#8221; if the imagery in the CSS &#8220;border-image:URL([data-uri data of these recent Emoji Images]);&#8221; has a lopsided whitespace feel to it.  PHP can easily do this out of the box from PHP 5.5 onwards via its <a target=_blank title='PHP GD library' href='https:\/\/www.php.net\/manual\/en\/ref.image.php'>GD<\/a> library <a target=_blank title='PHP imagecropauto' href='https:\/\/www.php.net\/manual\/en\/function.imagecropauto.php'>imagecropauto<\/a> 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 <a target=_blank title='Useful link, thanks' href='https:\/\/stackoverflow.com\/questions\/1669683\/crop-whitespace-from-image-in-php'>this wonderful link<\/a>, thanks.<\/p>\n<p>Okay, so we can arrive at a whitespace cropped Emoji Image data uri, what then?  Well, we recommend you read &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Border image information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_border-image.asp'>border image<\/a> &#8230; and off that, most importantly, perhaps &#8230;<\/li>\n<li><a target=_blank title='Border image slice information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_border-image-slice.asp'>border-image-slice property<\/a><\/li>\n<\/ul>\n<p> &#8230; and we display a couple of examples of uses of Border Images using the resultant Emoji Image data uri you create.<\/p>\n<p>So, are you ready for the challenge?  Yet 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 take up that <i>Border Emoji Image CSS Challenge<\/i>!<\/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-css-border-image-tutorial\/'>Emoji Image Creator CSS Border Image Tutorial<\/a>.<\/p-->\n<hr>\n<p id='eicst'>Previous relevant <a target=_blank title='Emoji Image Creator Share Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-share-tutorial\/'>Emoji Image Creator Share 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 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<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='#d50956' onclick='var dv=document.getElementById(\"d50956\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/border-image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50956' 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='#d50975' onclick='var dv=document.getElementById(\"d50975\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d50975' 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='#d51002' onclick='var dv=document.getElementById(\"d51002\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51002' 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='#d51012' onclick='var dv=document.getElementById(\"d51012\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/download\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51012' 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='#d51020' onclick='var dv=document.getElementById(\"d51020\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/glow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51020' 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='#d51024' onclick='var dv=document.getElementById(\"d51024\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/multiple\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51024' 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='#d51066' onclick='var dv=document.getElementById(\"d51066\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/background-size\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51066' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>With the recent Emoji Image Creator or Media Paster Multiple Copy Tutorial&#8216;s introduction of &#8230; allow for Copy of multiple files in the jQuery logic &#8230; and today we &#8230; add a new button &#8220;Copy Media&#8221; for the user who &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/emoji-image-creator-or-media-paster-multiple-copy-background-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":[2419,113,126,127,2471,2472,2379,1653,161,2299,214,2022,2442,265,281,1654,327,354,360,380,385,419,1550,491,3030,513,529,576,590,3137,652,663,760,770,795,2092,2521,1546,2621,2428,1968,3490,3488,896,907,932,983,997,1159,3487,1262,2996,3242,1319,1369,1425],"class_list":["post-51066","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-aesthetics","tag-audio","tag-background","tag-background-image","tag-background-position","tag-background-repeat","tag-background-size","tag-base64","tag-border","tag-border-image","tag-clipboard","tag-codepoint","tag-contenteditable","tag-copy","tag-css","tag-data-uri","tag-did-you-know","tag-dom","tag-download","tag-email","tag-emoji","tag-file-api","tag-gd","tag-gimp","tag-glow","tag-google","tag-google-pagespeed","tag-html","tag-image","tag-image-editor","tag-javascript","tag-jquery","tag-media","tag-menu","tag-mobile","tag-multiple","tag-nest","tag-nested","tag-nesting","tag-onion","tag-onions","tag-onloadend","tag-pagespeed","tag-paintbrush","tag-paste","tag-php","tag-preview","tag-programming","tag-sms","tag-symbols","tag-textarea","tag-transparent","tag-trim","tag-tutorial","tag-video","tag-whitespace"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51066"}],"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=51066"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51066\/revisions"}],"predecessor-version":[{"id":51077,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51066\/revisions\/51077"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51066"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51066"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}