{"id":49536,"date":"2020-07-02T03:01:25","date_gmt":"2020-07-01T17:01:25","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=49536"},"modified":"2020-07-01T20:26:24","modified_gmt":"2020-07-01T10:26:24","slug":"animated-gif-audio-or-video-foreground-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-audio-or-video-foreground-tutorial\/","title":{"rendered":"Animated GIF Audio or Video Foreground Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Animated GIF Audio or Video Foreground Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif_audio.jpg\" title=\"Animated GIF Audio or Video Foreground Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Audio or Video Foreground Tutorial<\/p><\/div>\n<p>Three topics of our interest come together today, those being &#8230;<\/p>\n<ul>\n<li>animated GIF creation via image slides URL or data-URI (result of local browsing) &#8230;<\/li>\n<li>synchronizing media (a totally harder ballgame on mobile platforms, but possible for non-mobile Animated GIF as background to Audio, below) &#8230;<\/li>\n<li>animated GIF as background image (or as blog title suggests &#8230; think of what (new thing) goes into foreground)<\/li>\n<\/ul>\n<p> &#8230; to end the day having the tools to put a &#8220;video like&#8221; presentation together via &#8230;<\/p>\n<ul>\n<li>visuals are animated GIF image slides &#8230; and &#8230;<\/li>\n<li>the audio (or can be video) is incorporated via an audio (or can be video) URL or data-URI (result of local browsing)<\/li>\n<\/ul>\n<p> &#8230; a design suiting a <i>&#8220;voiceover&#8221; second phase to a &#8220;visual image capture&#8221; first phase<\/i> approach.<\/p>\n<p>Building on the recent <a title='Animated GIF Random Slide Order Tutorial' href='#agifrsot'>Animated GIF Random Slide Order Tutorial<\/a> the way we determined that the approach above was <i>an approach<\/i> was threefold &#8230;<\/p>\n<ol>\n<li>research into this &#8220;Animated GIF as Background to Audio or Video&#8221; topic got us to the excellent <a target=_blank title='https:\/\/iandevlin.com\/blog\/2013\/03\/html5\/html5-video-and-background-images\/' href='https:\/\/iandevlin.com\/blog\/2013\/03\/html5\/html5-video-and-background-images\/'>https:\/\/iandevlin.com\/blog\/2013\/03\/html5\/html5-video-and-background-images\/<\/a> &#8230; thanks &#8230; as basis for &#8230;<\/li>\n<li>wrote &#8220;proof of concept&#8221; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/video_animated_gif_background.html_GETME\" title=\"video_animated_gif_background.html\">video_animated_gif_background.html<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/video_animated_gif_background.html\" title=\"Proof of concept\">live run<\/a> link &#8230; or (thanks also to <a target=_blank title='NASA' href='https:\/\/www.nasa.gov\/'>NASA<\/a>) &#8230;<br \/>\n<iframe src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/video_animated_gif_background.html\" title=\"Proof of concept\" style=\"width:100%;height:900px;\"><\/iframe><br \/>\n &#8230; &#8220;the weakness&#8221; of the &#8220;controls&#8221; getting in the way here fixed better as we &#8230;\n<\/li>\n<li>improve the functionality of inhouse Animated GIF creator &#8230;\n<ul>\n<li>calling PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------------GETME\">tutorial_to_animated_gif.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\">parent web application<\/a> &#8230;<\/li>\n<li>calls the HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html---GETME\">client_browsing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">child web application<\/a> &#8230;<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<p> &#8230; ready for you to try this out 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\/animated-gif-audio-or-video-foreground-tutorial\/'>Animated GIF Audio or Video Foreground Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifrsot'>Previous relevant <a target=_blank title='Animated GIF Random Slide Order Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-random-slide-order-tutorial\/'>Animated GIF Random Slide Order 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\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Animated GIF Random Slide Order Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/random_order.gif\" title=\"Animated GIF Random Slide Order Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Random Slide Order Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Animated GIF Local Browse Tutorial' href='#agiflbt'>Animated GIF Local Browse Tutorial<\/a> progress for our inhouse animated GIF creator, today we augment the &#8230;<\/p>\n<ul>\n<li>slide order of animated GIF is as per ordered by the user in the textboxes &#8230; with &#8230;<\/li>\n<li>slide order of animated GIF can be randomized (or &#8220;mashed up&#8221;)<\/li>\n<\/ul>\n<p>Why?  Perhaps for a &#8230;<\/p>\n<ul>\n<li>kaleidoscopic effect &#8230; or perhaps &#8230;<\/li>\n<li>because there is no real purpose to the order of slides &#8230; or perhaps &#8230;<\/li>\n<li>use as a background image makes more sense as randomly ordered so it does not become the focus of attention<\/li>\n<\/ul>\n<p>Today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/random_order.gif\">tutorial animated GIF<\/a> shows us &#8230;<\/p>\n<ul>\n<li>starting with some <a target-_blank title='Wikipedia' href='https:\/\/wikipedia.org'>Wikipedia<\/a> Solar Planet images &#8230; thanks &#8230; downloaded &#8230;<\/li>\n<li>we start up <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------GETME\">our changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php--------------GETME\">tutorial_to_animated_gif.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\">animated GIF creator web application<\/a> &#8230;<\/li>\n<li>we use the &#8220;Choose Files&#8221; button to browse for these images and deliberately order images in the order &#8230;\n<ol>\n<li>Mercury<\/li>\n<li>Venus<\/li>\n<li>Earth<\/li>\n<li>Mars<\/li>\n<li>Jupiter<\/li>\n<li>Saturn<\/li>\n<li>Uranus<\/li>\n<li>Neptune<\/li>\n<li>Pluto<\/li>\n<\/ol>\n<p> &#8230; in the order from closest to the Sun out to furthest from the Sun &#8230; by a &#8230;\n<\/li>\n<li>click of &#8220;Tutorial Slideshow to Animated GIF&#8221; (order as specified by user) to end up with &#8230;\n<div style=\"width:100%;height:500px;background:URL(\/\/www.rjmprogramming.com.au\/PHP\/animegif\/solar_system.gif) no-repeat;background-size:contain;\"><\/div>\n<p> &#8230; as distinct from &#8230;\n<\/li>\n<li>click of new &#8220;Tutorial Slideshow to Randomized Content Order Animated GIF&#8221; (order randomly &#8220;mashed up&#8221; from the user entered order) to end up with &#8230;\n<div style=\"width:100%;height:500px;background:URL(\/\/www.rjmprogramming.com.au\/PHP\/animegif\/solar_system_mashed.gif) no-repeat;background-size:contain;\"><\/div>\n<p> &#8230; meaning another level of dynamism is available via &#8230;\n<\/li>\n<li>you can allow a user to see their <a onclick=\"document.getElementById('imashedup').src+='' + Math.floor(Math.random() * 9);\" style=\"text-decoration:underline;cursor:pointer;\" title=\"Click to reorder the slides of animated GIF below\">own &#8220;mashed up&#8221; order<\/a> as you can see below &#8230;<br \/>\n<iframe id=imashedup style=\"width:100%;height:500px;\" src=\"\/\/www.rjmprogramming.com.au\/PHP\/animegif\/solar__system.html?numslides=9&#038;rand=54343\"><\/iframe><br \/>\n &#8230; like the new &#8220;Reorder Slides Below&#8221; button that may appear in the Animated GIF creator web application as of today\n<\/li>\n<\/ul>\n<p>In the changed PHP, up the top we needed &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$newrbut=\"&nbsp;&lt;input onclick=\\\"usualclick=0;\\\" name=\\\"randomize\\\" id=\\\"rcmysubmit\\\" type=\\\"submit\\\" title='Tutorial Slideshow to Randomized Content Order Animated GIF' value='Tutorial Slideshow to Randomized Content Order Animated GIF'&gt;&lt;\/input&gt;\";<br \/>\n<br \/>\n$grltsuffix=\"\";<br \/>\n$rlt=\"0\";<br \/>\n$rltminus=\"-\";<br \/>\n$rltprefix=\"\";<br \/>\n$rltsuffix=\"\";<br \/>\nif (isset($_POST['numslides'])) {<br \/>\n  $newrbut=\"&nbsp;&lt;input type=button onclick=\\\"reorderifs();\\\" value=\\\"Reorder Slides Below\\\"&gt;&lt;\/input&gt;&nbsp;&lt;input style=\\\"display:none;\\\" onclick=\\\"usualclick=0;\\\" name=\\\"randomize\\\" id=\\\"rcmysubmit\\\" type=\\\"submit\\\" title='Tutorial Slideshow to Randomized Content Order Animated GIF' value='Tutorial Slideshow to Randomized Content Order Animated GIF'&gt;&lt;\/input&gt;\";<br \/>\n  if (strpos(urldecode($_POST['numslides']), '-') === false && substr((urldecode($_POST['numslides']) . \"0\"),0,1) != \"0\") {<br \/>\n  $rlt=urldecode($_POST['numslides']);<br \/>\n  $grltsuffix=\"&numslides=\" . $_POST['numslides'];<br \/>\n  $rltminus=\"\";<br \/>\n  $rltprefix=\" for (\\$islide=0; \\$islide&lt;\" . $rlt . \"; \\$islide++) { \\$randomizematch=getnext(); \";<br \/>\n  $rltsuffix=\" } \";<br \/>\n  }<br \/>\n} else if (isset($_GET['numslides'])) {<br \/>\n  $newrbut=\"&nbsp;&lt;input type=button onclick=\\\"reorderifs();\\\" value=\\\"Reorder Slides Below\\\"&gt;&lt;\/input&gt;&nbsp;&lt;input style=\\\"display:none;\\\" onclick=\\\"usualclick=0;\\\" name=\\\"randomize\\\" id=\\\"rcmysubmit\\\" type=\\\"submit\\\" title='Tutorial Slideshow to Randomized Content Order Animated GIF' value='Tutorial Slideshow to Randomized Content Order Animated GIF'&gt;&lt;\/input&gt;\";<br \/>\n  if (strpos(urldecode($_GET['numslides']), '-') === false && substr((urldecode($_POST['numslides']) . \"0\"),0,1) != \"0\") {<br \/>\n  $rlt=urldecode($_GET['numslides']);<br \/>\n  $grltsuffix=\"&numslides=\" . $_GET['numslides'];<br \/>\n  $rltminus=\"\";<br \/>\n  $rltprefix=\" for (\\$islide=0; \\$islide&lt;\" . $rlt . \"; \\$islide++) { \\$randomizematch=getnext(); \";<br \/>\n  $rltsuffix=\" } \";<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>In the PHP preparing the PHP part <font color=blue>we change<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n$agifphp=\"&lt;?php<br \/>\n<br \/>\nheader ('Content-type:image\/gif');<br \/>\ninclude('GIFEncoder.class.php');<br \/>\n<br \/>\n <font color=blue>\\$randomizesofar='';<br \/>\n \\$randomizematch='';<br \/>\n \\$randomizeloopcnt=0;<br \/>\n \\$randomizelooptotal=\" . $rlt . \";<\/font><br \/>\n<br \/> <br \/>\n <font color=blue>\/\/ seed with microseconds ... thanks to https:\/\/www.php.net\/manual\/en\/function.srand.php<br \/>\nfunction make_seed() {<br \/>\n  list(\\$usec, \\$sec) = explode(' ', microtime());<br \/>\n  return \\$sec + \\$usec * 1000000;<br \/>\n}<br \/>\n<br \/> <br \/>\nfunction getnext() {<br \/>\n   global \\$randomizesofar, \\$randomizematch, \\$randomizeloopcnt, \\$randomizelooptotal;<br \/>\n   \\$proposed=\\$randomizelooptotal;<br \/>\n   while (\\$proposed &gt;= \\$randomizelooptotal || strpos(\\$randomizesofar, ',' . \\$proposed . ',') !== false) {<br \/>\n    \\$proposed=rand(0, \\$randomizelooptotal);<br \/>\n   }<br \/>\n   \\$randomizesofar.=',' . \\$proposed . ',';<br \/>\n   return \\$proposed;<br \/>\n}<\/font><br \/>\n<br \/>\nfunction utf8(\\$num) {<br \/>\n    if(\\$num&lt;=0x7F)       return chr(\\$num);<br \/>\n    if(\\$num&lt;=0x7FF)      return chr((\\$num&gt;&gt;6)+192).chr((\\$num&63)+128);<br \/>\n    if(\\$num&lt;=0xFFFF)     return chr((\\$num&gt;&gt;12)+224).chr(((\\$num&gt;&gt;6)&63)+128).chr((\\$num&63)+128);<br \/>\n    if(\\$num&lt;=0x1FFFFF)   return chr((\\$num&gt;&gt;18)+240).chr(((\\$num&gt;&gt;12)&63)+128).chr(((\\$num&gt;&gt;6)&63)+128).chr((\\$num&63)+128);<br \/>\n    return '';<br \/>\n}<br \/>\n<br \/>\nfunction uniord(\\$c) {<br \/>\n    \\$ord0 = ord(\\$c{0}); if (\\$ord0&gt;=0   && \\$ord0&lt;=127) return \\$ord0;<br \/>\n    \\$ord1 = ord(\\$c{1}); if (\\$ord0&gt;=192 && \\$ord0&lt;=223) return (\\$ord0-192)*64 + (\\$ord1-128);<br \/>\n    \\$ord2 = ord(\\$c{2}); if (\\$ord0&gt;=224 && \\$ord0&lt;=239) return (\\$ord0-224)*4096 + (\\$ord1-128)*64 + (\\$ord2-128);<br \/>\n    \\$ord3 = ord(\\$c{3}); if (\\$ord0&gt;=240 && \\$ord0&lt;=247) return (\\$ord0-240)*262144 + (\\$ord1-128)*4096 + (\\$ord2-128)*64 + (\\$ord3-128);<br \/>\n    return false;<br \/>\n}<br \/>\n<br \/>\n function retemoji(\\$stringin) {<br \/>\n   return utf8(hexdec(str_replace(\\\"U+\\\",\\\"\\\", \\$stringin))); \/\/html_entity_decode(preg_replace(\\\"\/U\\+([0-9A-F]{4})\/\\\", \\\"&#x\\\\\\\\1;\\\", \\$stringin), ENT_NOQUOTES, 'UTF-8');<br \/>\n }<br \/>\n<br \/>\n<font color=blue> srand(make_seed()); <\/font><br \/>\n\"<font color=blue> . $rltprefix<\/font>;<br \/>\n<br \/>\n$eachone=\" <font color=blue>if (\\$randomizematch == '' || \\$randomizematch == \\\"\\$randomizeloopcnt\\\") {<\/font><br \/>\n<br \/>\n\\$text='';<br \/>\n<br \/>\n\/\/ Open the first source image and add the text.<br \/>\n\\$image = imagecreatefromjpeg('source01.jpg');<br \/>\n\\$text_color = imagecolorallocate(\\$image, 200, 200, 200);<br \/>\nimagestring(\\$image, 5, 5, 5,  \\$text, \\$text_color);<br \/>\n<br \/>\n\/\/ Generate GIF from the $image<br \/>\n\/\/ We want to put the binary GIF data into an array to be used later,<br \/>\n\/\/  so we use the output buffer.<br \/>\nob_start();<br \/>\nimagegif(\\$image);<br \/>\n\\$frames[]=ob_get_contents();<br \/>\n\\$framed[]=40; \/\/ Delay in the animation.<br \/>\nob_end_clean();<br \/>\n<br \/>\n\/\/ And again..<br \/>\n<font color=blue>}<\/font><br \/>\n\";<br \/>\n<br \/>\n$eachonestring=\" <font color=blue>if (\\$randomizematch == '' || \\$randomizematch == \\\"\\$randomizeloopcnt\\\") {<\/font><br \/>\n<br \/>\n\\$text='';<br \/>\n<br \/>\n\/\/ Open the first source image and add the text.<br \/>\n\\$underimage = imagecreatefromjpeg('source01.jpg');<br \/>\n\\$old_width  = imagesx(\\$underimage);<br \/>\n\\$old_height = imagesy(\\$underimage);<br \/>\n\\$image = imagecreatetruecolor(\\$old_width, \\$old_height);<br \/>\n\\$black = imagecolorallocatealpha(\\$image, 254, 254, 254, 0);<br \/>\nimagefill(\\$image, 0, 0, \\$black);<br \/>\nimagecopyresampled(\\$image, \\$underimage, 0, 0, 0, 0, \\$old_width, \\$old_height, \\$old_width, \\$old_height);<br \/>\nimagecolortransparent(\\$image, \\$black);<br \/>\n\\$text_color = imagecolorallocate(\\$image, 200, 200, 200);<br \/>\nimagestring(\\$image, 5, 5, 5,  \\$text, \\$text_color);<br \/>\n<br \/>\n\/\/ Generate GIF from the $image<br \/>\n\/\/ We want to put the binary GIF data into an array to be used later,<br \/>\n\/\/  so we use the output buffer.<br \/>\nob_start();<br \/>\nimagegif(\\$image);<br \/>\n\\$frames[]=ob_get_contents();<br \/>\n\\$framed[]=40; \/\/ Delay in the animation.<br \/>\nob_end_clean();<br \/>\n<br \/>\n\/\/ And again..<br \/>\n<font color=blue>}<\/font><br \/>\n\";<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p>And in the middle, as well as adding to <i>function analyze<\/i>&#8216;s global list <font color=blue>we change<\/font> (largely to circumvent cache issues) &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n   if ($agtext == \"\") $agtext=\"slideshow\";<br \/>\n   $lastbit=str_replace(\"framed,0,2\" . $zzz, \"framed,0,\" . (sizeof($photos) - 1) . $zzz, $lastbit);<br \/>\n    <font color=blue>$ig=0;<br \/>\n   while (strpos($gifphp, ' == \"$randomizeloopcnt\"') !== false) {<br \/>\n     $gifphp=str_replace_first(' == \"$randomizeloopcnt\"', ' == \"' . $ig . '\"', $gifphp, 1);<br \/>\n     $ig++;<br \/>\n   }<\/font><br \/>\n   file_put_contents(server_remote_addr() . \"_preview.php\", $gifphp <font color=blue> . $rltsuffix<\/font> . $lastbit);<br \/>\n   file_put_contents(server_remote_addr() . \".php\", $gifphp . str_replace($lastbitfrom, str_replace(\"'animegif.gif'\", \"'\" . server_remote_addr() . \".gif\" . \"'\", $lastbitto), (<font color=blue>$rltsuffix . <\/font>$lastbit)));<br \/>\n    <font color=blue>$xxx=\"x\";<br \/>\n   $agifx=\"?randomize=\" . rand(0, 1987654);<br \/>\n   if (isset($_POST['randomize']) || isset($_GET['randomize'])) {  $xxx=\"randomize\";  $agifx=\"?randomize=\" . rand(0, 1987654); } <\/font><br \/>\n   $imagegif=\"&lt;br&gt;&lt;h1 align='center'&gt;Preview Below ... Animated GIF (Later) (Way) Below&lt;\/h1&gt;&lt;br&gt;&lt;iframe id=iag frameborder=0 style='width:100%;height:100%;' src='\" . server_remote_addr() . \"_preview.php?<font color=blue>\" . $xxx . \"<\/font>=\" . rand(2,450456) <font color=blue> . $grltsuffix<\/font> . \"' title='\" . $agtext . \"'&gt;&lt;\/iframe&gt;\";<br \/>\n   $imagegif.=\"&lt;br&gt;&lt;br&gt;&lt;iframe frameborder=0 style='display:none;' src='\" . server_remote_addr() . \".php?<font color=blue>\" . $xxx . \"<\/font>=\" . rand(2,450456) <font color=blue> . $grltsuffix<\/font> . \"' title='\" . $agtext . \"'&gt;&lt;\/iframe&gt;\";<br \/>\n   if (sizeof($ismulti) &gt; 0) {<br \/>\n   $imagegifandthen.=\"document.getElementById('idiv').innerHTML+=\\\"&lt;br&gt;&lt;h1 align='center'&gt;Preview Above ... Animated GIF then Video\" . $videosuffix . \" Below&lt;\/h1&gt;&lt;br&gt;&lt;img src='\" . server_remote_addr() . \".gif<font color=blue>\" . $agifx . <\/font>\"' title='\" . $agtext . \"'&gt;&lt;\/img&gt;&lt;br&gt;&lt;h1 id=hvideo&gt;Video\" . $videosuffix . \" below ...&lt;\/h1&gt;&lt;br&gt;\" . $videohtml . \"&lt;br&gt;&lt;iframe id=idatauri src='animegif.html<font color=blue>?x=\" . rand (2,450456) . <\/font>\"' title=DataURI style=width:100%;height:800px;background-color:lightblue;&gt;&lt;\/iframe&gt;&lt;br&gt;&nbsp;&lt;a id=preislideshow href=#idatauri title=DataURI&gt;Data URI version&lt;\/a&gt;&nbsp;&lt;a href=#myh1 title=Top&gt;Top&lt;\/a&gt;&nbsp;&lt;a href=#iag title=AnimatedGIF&gt;Animated GIF&lt;\/a&gt;&nbsp;&lt;a href=#prejslideshow title=SlideshowDataURI&gt;Slideshow Data URI&lt;\/a&gt;&lt;br&gt;&lt;iframe id=islideshow src='slideshow.html?x=\" . rand (2,450456) . \"' title=SlideShow style=width:100%;height:800px;;background-color:lightgreen;&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;a id=prejslideshow href=#preislideshow title=Slideshow&gt;Slideshow&lt;\/a&gt;&lt;br&gt;&lt;iframe id=jslideshow src='slideshow.html?smode=0&x=\" . rand (2,450456) . \"' title=SlideShowDataURI style=width:100%;height:800px;;background-color:lightgreen;&gt;&lt;\/iframe&gt;\" . \"\\\";\";<br \/>\n   } else {<br \/>\n   $imagegifandthen.=\"document.getElementById('idiv').innerHTML+=\\\"&lt;br&gt;&lt;h1 align='center'&gt;Preview Above ... Animated GIF Below&lt;\/h1&gt;&lt;br&gt;&lt;img src='\" . server_remote_addr() . \".gif\" . $agifx . \"' title='\" . $agtext . \"'&gt;&lt;\/img&gt;&lt;br&gt;&nbsp;&lt;a href=#myh1 title=Top&gt;Top&lt;\/a&gt;&nbsp;&lt;a href=#iag title=AnimatedGIF&gt;Animated GIF&lt;\/a&gt;&lt;br&gt;&lt;iframe id=idatauri src='animegif.html<font color=blue>?x=\" . rand (2,450456) . <\/font>\"' title=DataURI style=width:100%;height:800px;;background-color:lightblue;&gt;&lt;\/iframe&gt;\" . \"\\\";\";<br \/>\n   }<br \/>\n<\/code><br \/>\n?&gt;<\/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\/animated-gif-random-slide-order-tutorial\/'>Animated GIF Random Slide Order Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agiflbt'>Previous relevant <a target=_blank title='Animated GIF Local Browse Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-local-browse-tutorial\/'>Animated GIF Local Browse 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\/animegif\/tutorial_to_animated_gif.php\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Animated GIF Local Browse Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/local_browse.jpg\" title=\"Animated GIF Local Browse Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Local Browse Tutorial<\/p><\/div>\n<p>Today we attend to an improvement we could see would be beneficial to the Animated GIF creator functionality of the web application of the recent <a title='Animated GIF Watermark Comments Karaoke Tutorial' href='#agifwckt'>Animated GIF Watermark Comments Karaoke Tutorial<\/a> and decided to improve upon the integration talents started with the web application of <a target=_blank title='File API File and Reader Objects Client Server Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/file-api-file-and-reader-objects-client-server-tutorial'>File API File and Reader Objects Client Server Tutorial<\/a> to come to our assistance.<\/p>\n<p>But how does a PHP web application go integrating with a client based feature?  Lots of ways, really, as PHP can be just HTML through to having no HTML, and lots of combinations in between, our integration combination today being that the &#8230;<\/p>\n<ul>\n<li>calling PHP <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-------------GETME\">tutorial_to_animated_gif.php<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\">parent web application<\/a> &#8230;<\/li>\n<li>calls the HTML\/Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.html--GETME\">client_browsing.htm<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/client_browsing.htm\">child web application<\/a> &#8230;<\/li>\n<li>in an <font color=purple>HTML iframe<\/font> &#8230;<\/li>\n<li>the &#8220;display window&#8221; of which is <font color=blue>tightly controlled<\/font><br \/>\n&lt;?php<br \/>\n<code><br \/>\n&lt;h1 id='myh1' align='center'&gt;Tutorial Slideshow to Animated GIF\" . $moreh1 . \" ... or ... <font color=blue>&lt;div style='display:inline-block;width:90px;height:30px;overflow:hidden;border-top:2px solid yellow;border-left:2px solid yellow;border-right:2px solid yellow;'&gt;<\/font><font color=purple>&lt;iframe style='width:150px;height:228px;margin-top:-198px;' src='..\/..\/HTMLCSS\/client_browsing.htm?d=\" . rand(0,18765432) . \"'&gt;&lt;\/iframe&gt;<\/font><font color=blue>&lt;\/div&gt;<\/font>&lt;\/h1&gt;<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; an integration arrangement leaving major components of a team doing what they are best at doing.<\/p>\n<p>As far as the child HTML\/Javascript goes it is (as its &#8220;integration task&#8221;) to look out for characteristics of the parent PHP around as to <font color=blue>change behaviour<\/font> and supply that parent with the data found &#8230;<\/p>\n<p><code><br \/>\n  function readBlob(opt_startByte, opt_stopByte) {<br \/>\n    <font color=blue>var blks=' ', variiuy=0, xssuffix='0', xnsuffix='2';<\/font><br \/>\n    files = document.getElementById('files').files;<br \/>\n    xx=[];<br \/>\n    yy=[];<br \/>\n    ten=500;<br \/>\n    ixy=0;<br \/>\n    awis=[];<br \/>\n    ahis=[];<br \/>\n    awx=[];<br \/>\n    awy=[];<br \/>\n    awid=[];<br \/>\n    reader=[];<br \/>\n    blob=[];<br \/>\n    var ij=0;<br \/>\n    kij=0;<br \/>\n    kkij=0;<br \/>\n    lastiw=0;<br \/>\n    lastih=0;<br \/>\n    if (!files.length) {<br \/>\n      alert('Please select a file!');<br \/>\n      return;<br \/>\n    }<br \/>\n    <font color=blue>for (ij=0; ij&lt;files.length; ij++) {<br \/>\n       if (window.parent && files[ij].type.indexOf('image\/') == 0) {<br \/>\n          if (parent.document.getElementById('slideshow')) {<br \/>\n            while (parent.document.getElementById('slideshow' + xssuffix.replace(\/^0\/g,'')).value != '') {<br \/>\n              xssuffix='' + eval(0 + eval('' + xnsuffix));<br \/>\n              xnsuffix='' + eval(1 + eval('' + xnsuffix));<br \/>\n            }<br \/>\n            parent.document.getElementById('slideshow' + xssuffix.replace(\/^0\/g,'')).value='' + files[ij].size + ' ';<br \/>\n            parent.maybemore('' + files[ij].size + ' ', 'slideshow' + xnsuffix, parent.document.getElementById('slideshow' + xssuffix.replace(\/^0\/g,'')));<br \/>\n            \/\/alert('parent.maybemore(\"' + '' + files[ij].size + ' ' + \", 'slideshow' + xnsuffix + '\" + \", 'slideshow\" + xnsuffix + ', parent.document.getElementById(\"' + 'slideshow' + xssuffix.replace(\/^0\/g,'') + '\"))');<br \/>\n          }<br \/>\n       }<br \/>\n    }<\/font><br \/>\n    for (ij=0; ij&lt;files.length; ij++) {<br \/>\n    file = files[ij];<br \/>\n    filen = file.name;<br \/>\n    lasttype = file.type;<br \/>\n    fs.push(file.name.replace(\/\\\\\/g,'\/').split('\/')[eval(-1 + file.name.replace(\/\\\\\/g,'\/').split('\/').length)]);<br \/>\n    start = parseInt(opt_startByte) || 0;<br \/>\n    stop = parseInt(opt_stopByte) || file.size - 1;<br \/>\n<br \/> <br \/>\n    reader.push(new FileReader());<br \/>\n<br \/>\n    \/\/ If we use onloadend, we need to check the readyState.<br \/>\n    \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/12546775\/get-filename-after-filereader-asynchronously-loaded-a-file<br \/>\n    reader[ij].onloadend = (function(mfile) {<br \/>\n      return function(evt) {<br \/>\n      var dp='', ds=dssuffix<font color=blue>, slideshowparent=false, ssuffix='0', nsuffix='2', blnks=' '<\/font>;<br \/>\n      if (evt.target.readyState == FileReader.DONE) { \/\/ DONE == 2<br \/>\n        <font color=blue>slideshowparent=false;<br \/>\n        ssuffix='0';<br \/>\n        if (window.parent && mfile.type.indexOf('image\/') == 0) {<br \/>\n          if (parent.document.getElementById('slideshow')) {<br \/>\n            parent.document.title+=' ' + mfile.size;<br \/>\n            \/\/ maybemore(this.value, 'slideshow1', this);<br \/>\n            while (parent.document.getElementById('slideshow' + ssuffix.replace(\/^0\/g,'')).value.replace('' + mfile.size + ' ','') != '') {<br \/>\n              ssuffix='' + eval(0 + eval('' + nsuffix));<br \/>\n              nsuffix='' + eval(1 + eval('' + nsuffix));<br \/>\n            }<br \/>\n            \/\/parent.document.getElementById('slideshow' + ssuffix.replace(\/^0\/g,'')).value=' ';<br \/>\n            parent.document.title+=':' + ssuffix;<br \/>\n            parent.document.getElementById('slideshow' + ssuffix.replace(\/^0\/g,'')).value=evt.target.result.replace('data:;', 'data:' + mfile.type + ';').replace('data:application\/octet-stream;', 'data:' + mfile.type + ';');<br \/>\n            \/\/parent.maybemore(evt.target.result.replace('data:;', 'data:' + mfile.type + ';').replace('data:application\/octet-stream;', 'data:' + mfile.type + ';'), 'slideshow' + nsuffix, parent.document.getElementById('slideshow' + ssuffix.replace(\/^0\/g,'')));<br \/>\n            slideshowparent=true;<br \/>\n          }<br \/>\n        }<br \/>\n        if (!slideshowparent) {<\/font><br \/>\n        \/\/ Lots of code follows<br \/>\n        <font color=blue>}<\/font><br \/>\n      } };<br \/>\n    })(files[ij]);<br \/>\n<br \/>\n    blob.push(file.slice(start, stop + 1));<br \/>\n    reader[ij].readAsDataURL(blob[ij]);<br \/>\n    kij++;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p>And as far as the parent PHP goes, the main integration measure is to accept the new HTML\/Javascript child&#8217;s image and data URI processing work <font color=blue>more freely<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\nfunction isimage(tvl) {<br \/>\n  var retval=false, look=true, alin=0, cae='';<br \/>\n  <font color=blue>if (tvl != tvl.trim() && tvl.trim().length < 20 &#038;&#038; tvl.trim() != '' &#038;&#038; (tvl + ' ').substring(0,1) >= '0' && (tvl + ' ').substring(0,1) <= '9' &#038;&#038; ('x' + tvl).trim().slice(-1) >= '0' && ('x' + tvl).trim().slice(-1) <= '9') {\n    return true;\n  }<\/font><br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.jpeg,') != -1) cae='.jpeg';<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.jpg,') != -1) cae='.jpg';<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.gif,') != -1) cae='.gif';<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.png,') != -1) cae='.png';<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.bmp,') != -1) cae='.bmp';<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.tiff,') != -1) cae='.tiff';<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.tif,') != -1) cae='.tif';<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.jp') != -1) retval=true;<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.gif') != -1) retval=true;<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.png') != -1) retval=true;<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.bmp') != -1) retval=true;<br \/>\n  if (tvl<font color=blue>.replace('data:image\/','.')<\/font>.toLowerCase().indexOf('.tif') != -1) retval=true;<br \/>\n  if (retval && (tvl.indexOf('-') != -1 || tvl.indexOf(',') != -1)) {<br \/>\n  \/\/ Lots of code follows<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n?&gt;<\/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\/new-animated-gif-watermark-comments-karaoke-tutorial\/'>New Animated GIF Watermark Comments Karaoke Tutorial<\/a> ...<\/p-->\n<hr>\n<p id='agifwckt'>Previous relevant <a target=_blank title='Animated GIF Watermark Comments Karaoke Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-watermark-comments-karaoke-tutorial\/'>Animated GIF Watermark Comments Karaoke 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\/animegif\/imagine__follow_up.gif\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Animated GIF Watermark Comments Karaoke Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/imagine_followup.jpg\" title=\"Animated GIF Watermark Comments Personalization Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Watermark Comments Karaoke Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Animated GIF Watermark Comments Personalization Tutorial' href='#agifwcpt'>Animated GIF Watermark Comments Personalization Tutorial<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/imagine.gif\">animated GIF action item<\/a> had a theme of <i>poetry<\/i> and &#8230;<\/p>\n<ul>\n<li>musical theme<\/li>\n<li>lyrics<\/li>\n<\/ul>\n<p> &#8230; and may remind some people of &#8230;<\/p>\n<p><code><br \/>\nkaraoke<br \/>\n<\/code><\/p>\n<p> &#8230; for singers who only need the words, that is.<\/p>\n<p>Which set us to delving into whether we could control the delay between animated GIF slides, so as to approximate the time taken for a singer to sing the words of a line of song lyrics (thanks to John Lennon and <a target=_blank title='Google search' href='https:\/\/www.google.com\/search?q=lyrics+to+imagine&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=lyrics+to+imagine&#038;aqs=chrome..69i57j0l7.6550j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>Google<\/a>).  Yes <font size=1>(and fish swim, too)<\/font>, meaning we could get closer to our animated GIF helping out those talented karaoke singers via &#8230;<\/p>\n<ul>\n<li>allow &#8220;Tutorial Slideshow Delay&#8221; become &#8220;Tutorial Slideshow Delay(s)&#8221; for the user to specify the entire (or a first subset that can be repeated) pattern of slide delay &#8230; helped out by new PHP &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$zris=0;<br \/>\n$zrtot=1;<br \/>\n$zristwo=0;<br \/>\n<br \/>\n  function ourstr_replace($fromone, $toone, $instrg) {<br \/>\n    $cstrg=\"\";<br \/>\n    $cdelim=\"\";<br \/>\n    $outstrg=trim(str_replace($fromone, $toone, $instrg));<br \/>\n    for ($iuy=0; $iuy&lt;strlen($outstrg); $iuy++) {<br \/>\n      $thisc=substr(substr($outstrg, $iuy), 0, 1);<br \/>\n      if ($thisc == '-' || ($thisc &gt;= '0' && $thisc &lt;= '9')) {<br \/>\n        $cstrg.=$cdelim . $thisc;<br \/>\n        $cdelim=\"\";<br \/>\n      } else {<br \/>\n        $cdelim=\",\";<br \/>\n      }<br \/>\n    }<br \/>\n    if ($cstrg != \"\") { return $cstrg; }<br \/>\n    return $outstrg;<br \/>\n  }<br \/>\n<br \/>\n if (isset($_GET['delay'])) $delay=ourstr_replace(\"+\",\"\",urldecode($_GET['delay']));<br \/>\n if (isset($_POST['delay'])) $delay=ourstr_replace(\"+\",\"\",urldecode($_POST['delay']));<br \/>\n<br \/>\n $eachone=str_replace(\"[]=40;\", \"[]=\" . explode(\",\",$delay)[$zris] . \";\", $eachone);<br \/>\n $eachonestring=str_replace(\"[]=40;\", \"[]=\" . explode(\",\",$delay)[$zris] . \";\", $eachonestring);<br \/>\n if (strpos($delay, \",\") !== false) {<br \/>\n   $zrtot=sizeof(explode(\",\",$delay));<br \/>\n }<br \/>\n<br \/>\n $photos=explode(' src=\"', $shtml);<br \/>\n if (sizeof($photos) &gt; 1) {<br \/>\n   $atext=$agtext;   \/\/ title, as entered by user<br \/>\n   $wasprefix=$prefix;<br \/>\n   $bplus=\"\";<br \/>\n   $yangle=$xangle;<br \/>\n   for ($io=1; $io&lt;sizeof($photos); $io++) {<br \/>\n    \/\/<br \/>\n    \/\/ Lots of code follows until at the end of the for loop ...<br \/>\n    \/\/<br \/>\n    if ($zrtot &gt; 1) {<br \/>\n     if ($zris &gt;= sizeof(explode(\",\", $delay))) {<br \/>\n       $delay.=\",\" . explode(\",\",$delay)[$zristwo];<br \/>\n       $zristwo++;<br \/>\n       if ($zristwo &gt;= $zrtot) {<br \/>\n         $zristwo=0;<br \/>\n       }<br \/>\n     }<br \/>\n     if ($zris &gt; 0) {<br \/>\n     $eachone=str_replace(\"[]=\" . explode(\",\",$delay)[-1 + $zris] . \";\", \"[]=\" . explode(\",\",$delay)[$zris] . \";\", $eachone);<br \/>\n     $eachonestring=str_replace(\"[]=\" . explode(\",\",$delay)[-1 + $zris] . \";\", \"[]=\" . explode(\",\",$delay)[$zris] . \";\", $eachonestring);<br \/>\n     }<br \/>\n     $zris++;<br \/>\n    }<br \/>\n    }<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; where we enter as &#8220;Tutorial Slideshow Delay(s)&#8221; &#8230;<br \/>\n<code><br \/>\n600,600,600,600,1200,600,600,600,600,1200,600,600,600,1200,600,600,600,600,1200,600,600,600,1200<br \/>\n<\/code><br \/>\n &#8230; reflecting Imagine&#8217;s longer <a target=_blank title='Song structure information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Song_structure'>bridge<\/a>, to end up with an approximately 3 minute rendition of Imagine (that you could practise in the shower?!)\n<\/li>\n<li>allow for some emoji character insertion (just for fun, and done via <i>{[unicode]}<\/i> (eg. {266A} &#9834;) syntax) if the <a target=_blank title='Google search' href='https:\/\/www.google.com\/search?q=DejaVuSansMono&#038;rlz=1C5CHFA_enAU832AU832&#038;oq=DejaVuSansMono&#038;aqs=chrome..69i57j69i59j35i39l2j0l4.1057j0j4&#038;sourceid=chrome&#038;ie=UTF-8'>DejaVuSansMono<\/a> TrueTypeFont is defined &#8230; as per our &#8220;Tutorial Slideshow Title&#8221; example &#8230;<br \/>\n<code><br \/>\nImagine by John Lennon#(5%,7%) 26px blue DejaVuSansMono 2.95<br \/>\n<\/code><br \/>\n &#8230; and your requirements are to be found in <a target=_blank href='https:\/\/www.fileformat.info\/info\/unicode\/font\/dejavu_sans_mono\/list.htm' title='DejaVuSansMono emoji list'>this useful DejaVuSansMono friendly emoji list<\/a> &#8230; helped out by <font color=blue>new PHP<\/font> &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n$agifphp=\"&lt;?php<br \/>\n<br \/>\nheader ('Content-type:image\/gif');<br \/>\ninclude('GIFEncoder.class.php');<br \/>\n<br \/> \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/1805802\/php-convert-unicode-codepoint-to-utf-8\/7153133<br \/>\n<font color=blue>function utf8(\\$num)<br \/>\n{<br \/>\n    if(\\$num&lt;=0x7F)       return chr(\\$num);<br \/>\n    if(\\$num&lt;=0x7FF)      return chr((\\$num&gt;&gt;6)+192).chr((\\$num&63)+128);<br \/>\n    if(\\$num&lt;=0xFFFF)     return chr((\\$num&gt;&gt;12)+224).chr(((\\$num&gt;&gt;6)&63)+128).chr((\\$num&63)+128);<br \/>\n    if(\\$num&lt;=0x1FFFFF)   return chr((\\$num&gt;&gt;18)+240).chr(((\\$num&gt;&gt;12)&63)+128).chr(((\\$num&gt;&gt;6)&63)+128).chr((\\$num&63)+128);<br \/>\n    return '';<br \/>\n}<br \/>\n<br \/>\nfunction uniord(\\$c)<br \/>\n{<br \/>\n    \\$ord0 = ord(\\$c{0}); if (\\$ord0&gt;=0   && \\$ord0&lt;=127) return \\$ord0;<br \/>\n    \\$ord1 = ord(\\$c{1}); if (\\$ord0&gt;=192 && \\$ord0&lt;=223) return (\\$ord0-192)*64 + (\\$ord1-128);<br \/>\n    \\$ord2 = ord(\\$c{2}); if (\\$ord0&gt;=224 && \\$ord0&lt;=239) return (\\$ord0-224)*4096 + (\\$ord1-128)*64 + (\\$ord2-128);<br \/>\n    \\$ord3 = ord(\\$c{3}); if (\\$ord0&gt;=240 && \\$ord0&lt;=247) return (\\$ord0-240)*262144 + (\\$ord1-128)*4096 + (\\$ord2-128)*64 + (\\$ord3-128);<br \/>\n    return false;<br \/>\n}<br \/>\n<br \/>\n function retemoji(\\$stringin) {<br \/>\n   return utf8(hexdec(str_replace(\\\"U+\\\",\\\"\\\", \\$stringin))); \/\/html_entity_decode(preg_replace(\\\"\/U\\+([0-9A-F]{4})\/\\\", \\\"&#x\\\\\\\\1;\\\", \\$stringin), ENT_NOQUOTES, 'UTF-8');<br \/>\n }<\/font><br \/>\n<br \/>\n\";<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<\/ul>\n<p> &#8230; helping you be able to make your own animated GIF if you like via <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------GETME\" title=\"tutorial_to_animated_gif.php\">our changed <\/a> inhouse PHP (for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php------------GETME\" title=\"tutorial_to_animated_gif.php\">tutorial_to_animated_gif.php<\/a> and its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"tutorial_to_animated_gif.php\">live run<\/a> link) &#8230; to be able to arrive at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/imagine__follow_up.gif\">our new Imagine song lyrics animated GIF presentation (with longer delays)<\/a> &#8230;<\/p>\n<div style=\"width:100%;height:1000px;overflow:scroll;background:URL('http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/imagine__follow_up.gif');background-size:contain;background-repeat:no-repeat;\">\n<!--iframe src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/imagine__follow_up.gif\" style=\"width:1200px;height:1500px;\"><\/iframe--><\/div>\n<p>If you were like me and were curious, seeing the animated GIF above, whether the emojis could hang around by setting the words on a transparent background, it did not work but <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/imagine_transparent.gif\">this link<\/a> shows you the result of that attempt.  Of course, this is just a curiosity, as we could ensure the perseverence of emojis by just repeating them on every subsequent slide definition, but programmers are always on the lookout for ways to minimize data size requirements.  Alas, &#8220;no cigar&#8221; on this idea.<\/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\/new-animated-gif-watermark-comments-personalization-tutorial\/'>New Animated GIF Watermark Comments Personalization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifwcpt'>Previous relevant <a target=_blank title='Animated GIF Watermark Comments Personalization Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-watermark-comments-personalization-tutorial\/'>Animated GIF Watermark Comments Personalization 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\/animegif\/imagine.gif\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Animated GIF Watermark Comments Personalization Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/imagine.jpg\" title=\"Animated GIF Watermark Comments Personalization Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Watermark Comments Personalization Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Animated GIF Watermark Comments Tutorial' href='#agifwct'>Animated GIF Watermark Comments Tutorial<\/a> allowed for watermark like comments on our Animated GIFs but they were restricted to being quite small, either gray or red, and being positioned up the top left of the image with full opacity, but what if we could personalize the Animated GIF comments for the user via &#8230;<\/p>\n<ul>\n<li>(left,top) positioning that allows you to define % units (eg. (20%,60%))<\/li>\n<li>Font Colour as #rrggbb or colour name (eg. Dark Orange)<\/li>\n<li>Font Size in px (eg. 32px)<\/li>\n<li>AngleDegrees[.Opacity] (eg. 15.95 represents 15 degree anti-clockwise from horizontal angle and 0.95 opacity)<\/li>\n<li>Font Name (via True Type Font *.ttf font file off GDFONTPATH path of finding the *.ttf font file &#8230; eg. Arial)<\/li>\n<\/ul>\n<p> &#8230; as generic settings definable off the Animated GIF title textbox, and with the individual comments we allow the &#8220;~&#8221; character to represent a line feed.<\/p>\n<p>These settings are controlled by $_POST[] array variables as per &#8230;<\/p>\n<p><code><br \/>\n$xred=\"255\";<br \/>\n$xgreen=\"0\";<br \/>\n$xblue=\"0\";<br \/>\n$fontname=\"\";<br \/>\n$xangle=\"0.0\";<br \/>\n$xleft=\"5\";<br \/>\n$xtop=\"5\";<br \/>\n$xsize=\"14px\";<br \/>\n$xttfprefix=\"\";<br \/>\n$opac=\"\";<br \/>\n<br \/>\n  if (isset($_POST['fred'])) {<br \/>\n    $xred=urldecode($_POST['fred']);<br \/>\n    $huhis.=\" red=\" . $xred;<br \/>\n  }<br \/>\n  if (isset($_POST['fgreen'])) {<br \/>\n    $xgreen=urldecode($_POST['fgreen']);<br \/>\n    $huhis.=\" green=\" . $xgreen;<br \/>\n  }<br \/>\n  if (isset($_POST['fblue'])) {<br \/>\n    $xblue=urldecode($_POST['fblue']);<br \/>\n    $huhis.=\" blue=\" . $xblue;<br \/>\n  }<br \/>\n  if (isset($_POST['fontname'])) {<br \/>\n    $fontname=str_replace(\"+\",\" \",urldecode($_POST['fontname']));<br \/>\n    if ($fontname != \"\" && strpos(strtolower($fontname), \".ttf\") === false) {<br \/>\n      if (strpos((\"~\" . $fontname), \"~\/\") === false) {<br \/>\n       \/\/ Set the environment variable for GD ... thanks to https:\/\/www.php.net\/manual\/en\/function.imagettftext.php<br \/>\n       putenv('GDFONTPATH=' . realpath('.'));<br \/>\n       if (!file_exists(str_replace(\".ttf\",\"\",$fontname) . \".ttf\")) {<br \/>\n         foreach (glob(dirname(__FILE__) . \"\/*.ttf\") as $filename) {<br \/>\n           if (strpos(strtolower(\"\/\" . $filename), strtolower(\"\/\" . str_replace(\".ttf\",\"\",$fontname) . \".ttf\")) !== false) {<br \/>\n             $fontname=str_replace(\".ttf\",\"\",str_replace(dirname(__FILE__) . \"\/\",\"\",str_replace(dirname(__FILE__) . \"\",\"\",$filename)));<br \/>\n           }<br \/>\n         }<br \/>\n       }<br \/>\n      }<br \/>\n      \/\/$fontname.=\".ttf\";<br \/>\n    }<br \/>\n    $xttfprefix=\" \\$thisw=imagesx(\\$image);  \\$thish=imagesy(\\$image); \";<br \/>\n  }<br \/>\n  if (isset($_POST['fangle'])) {<br \/>\n    $xangle=str_replace(\"+\",\" \",urldecode($_POST['fangle']));<br \/>\n    if ($xangle &gt; 1.0 && strpos(('' . $xangle), '.') !== false) {<br \/>\n      $opac=\"0.\" . explode('.', ('' . $xangle))[1];<br \/>\n      $xangle=explode('.', ('' . $xangle))[0];<br \/>\n    }<br \/>\n  }<br \/>\n  if (isset($_POST['fleft'])) {<br \/>\n    $xleft=str_replace(\"px\",\"\",strtolower(str_replace(\"+\",\" \",urldecode($_POST['fleft']))));<br \/>\n    if (strpos($xleft, \"%\") !== false) {<br \/>\n      $xttfprefix=\" \\$thisw=imagesx(\\$image);  \\$thish=imagesy(\\$image); \";<br \/>\n      $xleft=\"round(\\$thisw * \" . str_replace(\"%\",\"\",$xleft) . \" \/ 100.0)\";<br \/>\n    }<br \/>\n  }<br \/>\n  if (isset($_POST['ftop'])) {<br \/>\n    $xtop=str_replace(\"px\",\"\",strtolower(str_replace(\"+\",\" \",urldecode($_POST['ftop']))));<br \/>\n    if (strpos($xtop, \"%\") !== false) {<br \/>\n      $xttfprefix=\" \\$thisw=imagesx(\\$image);  \\$thish=imagesy(\\$image); \";<br \/>\n      $xtop=\"round(\\$thish * \" . str_replace(\"%\",\"\",$xtop) . \" \/ 100.0)\";<br \/>\n    }<br \/>\n  }<br \/>\n  if (isset($_POST['fsize'])) {<br \/>\n    $xsize=str_replace(\"px\",\"\",strtolower(str_replace(\"+\",\" \",urldecode($_POST['fsize']))));<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; and <font color=blue>used<\/font> &#8230;<\/p>\n<p><code><br \/>\n $photos=explode(' src=\"', $shtml);<br \/>\n if (sizeof($photos) &gt; 1) {<br \/>\n   $atext=$agtext;   \/\/ title, as entered by user<br \/>\n   $wasprefix=$prefix;<br \/>\n   <font color=blue>$bplus=\"\";<br \/>\n   $yangle=$xangle;<\/font><br \/>\n   for ($io=1; $io&lt;sizeof($photos); $io++) {<br \/>\n    if (strpos(explode('\"', $photos[$io])[0], \"#\") !== false) {  \/\/ user has entered a hashtag # delimited watermark slide comment<br \/>\n      if ($io == 1) {<br \/>\n      <font color=blue>\/\/<\/font>$atext.=\" ... \" . str_replace(\"'\",\"`\",str_replace('_',' ',explode(\"#\", explode('\"', $photos[$io])[0])[1]));<br \/>\n<font color=blue><br \/>\n      if ($atext != \"\") {  $atext.=\" ... \";  }<br \/>\n      $atext.=str_replace(\"~\",\"\\\\n\",str_replace(\"'\",\"`\",str_replace('_',' ',explode(\"#\", explode('\"', $photos[$io])[0])[1])));<br \/>\n<br \/> <br \/>\n      if (\"$xangle\" != \"0.0\" && $xangle &gt;= 0.0 && $xangle &lt;= 1.0) {<br \/>\n       $bplus=\", \" . round((1.0 - $xangle) * 127.0);<br \/>\n       $eachone=str_replace(\"imagecolorallocate(\", \"imagecolorallocatealpha(\", $eachone);<br \/>\n       $eachonestring=str_replace(\"imagecolorallocate(\", \"imagecolorallocatealpha(\", $eachonestring);<br \/>\n       $yangle=\"0.0\";<br \/>\n      } else if (\"$opac\" != \"\") {<br \/>\n       $bplus=\", \" . round((1.0 - $opac) * 127.0);<br \/>\n       $eachone=str_replace(\"imagecolorallocate(\", \"imagecolorallocatealpha(\", $eachone);<br \/>\n       $eachonestring=str_replace(\"imagecolorallocate(\", \"imagecolorallocatealpha(\", $eachonestring);<br \/>\n      }<br \/>\n<\/font><br \/>\n      $eachone=str_replace(\", 200, 200, 200)\", \", 255, 0, 0)\", $eachone);<br \/>\n      $eachonestring=str_replace(\", 200, 200, 200)\", \", 255, 0, 0)\", $eachonestring);<br \/>\n<font color=blue><br \/>\n      if ($fontname != '') {<br \/>\n<br \/> <br \/>\n       $eachone=str_replace(\", 5, 5, 5,\", \", \" . $xsize . \", \" . $yangle . \", \" . $xleft . \", \" . $xtop . \",\", $eachone);<br \/>\n       $eachonestring=str_replace(\", 5, 5, 5,\", \", \" . $xsize . \", \" . $yangle . \", \" . $xleft . \", \" . $xtop . \",\", $eachonestring);<br \/>\n       $eachone=str_replace(\"text_colour\",\"text_color\",str_replace(\"text_color)\",\"text)\",str_replace(\"text, \", \"text_colour, '\" . $fontname . \"',\", $eachone)));<br \/>\n       $eachonestring=str_replace(\"text_colour\",\"text_color\",str_replace(\"text_color)\",\"text)\",str_replace(\"text, \", \"text_colour, '\" . $fontname . \"',\", $eachonestring)));<br \/>\n       $eachone=str_replace(\"imagestring\", $xttfprefix . \" imagettftext\", $eachone);<br \/>\n       $eachonestring=str_replace(\"imagestring\", $xttfprefix . \" imagettftext\", $eachonestring);<br \/>\n       } else if ($xleft != \"5\" || $xtop != \"5\") {<br \/>\n       $eachone=str_replace(\"imagestring\", $xttfprefix . \" imagestring\", $eachone);<br \/>\n       $eachonestring=str_replace(\"imagestring\", $xttfprefix . \" imagestring\", $eachonestring);<br \/>\n       $eachone=str_replace(\", 5, 5, 5,\", \", 5, \" . $xleft . \", \" . $xtop . \",\", $eachone);<br \/>\n       $eachonestring=str_replace(\", 5, 5, 5,\", \", 5, \" . $xleft . \", \" . $xtop . \",\", $eachonestring);<br \/>\n       }<br \/>\n<\/font><br \/>\n      } else {<br \/>\n      $atext.=<font color=blue>str_replace(\"~\",\"\\\\n\",<\/font>str_replace(\"'\",\"`\",str_replace('_',' ',explode(\"#\", explode('\"', $photos[$io])[0])[1]))<font color=blue>)<\/font>;<br \/>\n      }<br \/>\n    }<br \/>\n    $aphoto=explode(\"#\", explode('\"', $photos[$io])[0]);<br \/>\n    $prefix=analyze($aphoto[0]);<br \/>\n    \/\/ More code follows ...<br \/>\n   }<br \/>\n \/\/ More code below ...<br \/>\n }<br \/>\n<\/code> <\/p>\n<p>Make your own animated GIF if you like via <font color=blue><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------GETME\" title=\"tutorial_to_animated_gif.php\">our changed <\/a><\/font> inhouse PHP (for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php-----------GETME\" title=\"tutorial_to_animated_gif.php\">tutorial_to_animated_gif.php<\/a> and its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"tutorial_to_animated_gif.php\">live run<\/a> link).<\/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\/animated-gif-watermark-comments-personalization-tutorial\/'>Animated GIF Watermark Comments Personalization Tutorial<\/a>.<\/p-->\n<hr>\n<p id='agifwct'>Previous relevant <a target=_blank title='Animated GIF Watermark Comments Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-watermark-comments-tutorial\/'>Animated GIF Watermark Comments 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\/animegif\/water_cycle.pdf\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Animated GIF Watermark Comments Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/water_cycle.gif\" title=\"Animated GIF Watermark Comments Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Animated GIF Watermark Comments Tutorial<\/p><\/div>\n<p>You may have noticed with the animated GIF presentation for yesterday&#8217;s <a title='Wordpress Recent Post Animated GIF Improvement Mobile Tutorial' href='#wrpagifimt'>WordPress Recent Post Animated GIF Improvement Mobile Tutorial<\/a> some <font color=red>red<\/font> watermark top left comments (an &#8220;up the top&#8221; concept like <a target=_blank title='YouTube' href='https:\/\/youtube.com'>YouTube<\/a>&#8216;s closed captions (that sit at the bottom)) on the top of each slide.  This came about via new functionality at &#8230;<\/p>\n<ul>\n<li>our inhouse <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"Animated GIF and video and inhouse slideshow creator\">Animated GIF and video and inhouse slideshow creator<\/a> &#8230; introducing a new &#8230;<\/li>\n<li>hashtag (ie. #) delimited comment mechanism the user can define for each slide that represents that (watermark like)  comment (red if applied to first slide in amongst those definitions)<\/li>\n<\/ul>\n<p> &#8230; we accomplish by fitting in with the leads within the \u2018GIFEncoder.class\u2019 (by L\u00e1szl\u00f3 Zsidi) as used by <a target=_blank href='http:\/\/www.jeroenvanwissen.nl\/weblog\/php\/howto-generate-animated-gif-with-php' title='Jeroen van Wissen'>Jeroen van Wissen<\/a>&#8216;s design with our inhouse PHP <font color=blue><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------GETME\" title=\"tutorial_to_animated_gif.php\">code changes<\/a><\/font> (for <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php---------GETME\" title=\"tutorial_to_animated_gif.php\">tutorial_to_animated_gif.php<\/a> and its <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/tutorial_to_animated_gif.php\" title=\"tutorial_to_animated_gif.php\">live run<\/a> link) &#8230;<\/p>\n<p><code><br \/>\n $photos=explode(' src=\"', $shtml);<br \/>\n if (sizeof($photos) &gt; 1) {<br \/>\n   $atext=$agtext;   \/\/ title, as entered by user<br \/>\n   $wasprefix=$prefix;<br \/>\n   for ($io=1; $io&lt;sizeof($photos); $io++) {<br \/>\n    <font color=blue>if (strpos(explode('\"', $photos[$io])[0], \"#\") !== false) {  \/\/ user has entered a hashtag # delimited watermark slide comment<br \/>\n      if ($io == 1) {<br \/>\n      $atext.=\" ... \" . str_replace(\"'\",\"`\",str_replace('_',' ',explode(\"#\", explode('\"', $photos[$io])[0])[1]));<\/font><br \/>\n      <font color=red>$eachone=str_replace(\", 200, 200, 200)\", \", 255, 0, 0)\", $eachone);<br \/>\n      $eachonestring=str_replace(\", 200, 200, 200)\", \", 255, 0, 0)\", $eachonestring); <\/font><br \/>\n      <font color=blue>} else {<br \/>\n      $atext.=str_replace(\"'\",\"`\",str_replace('_',' ',explode(\"#\", explode('\"', $photos[$io])[0])[1]));<br \/>\n      }<br \/>\n    }<\/font><br \/>\n    $aphoto=explode(\"#\", explode('\"', $photos[$io])[0]);<br \/>\n    $prefix=analyze($aphoto[0]);<br \/>\n    \/\/ More code follows ...<br \/>\n   }<br \/>\n \/\/ More code below ...<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; not nearly as hard to implement as exciting as it is the concept to stumble upon in an outside thinking session!  Watch us produce a procedural style animated GIF about &#8220;The Water Cycle&#8221; with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/animegif\/water_cycle.pdf\" title=\"Click picture\">PDF presentation<\/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\/animated-gif-watermark-comments-tutorial\/'>Animated GIF Watermark Comments Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wrpagifimt'>Previous relevant <a target=_blank title='Wordpress Recent Post Animated GIF Improvement Mobile Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-animated-gif-improvement-mobile-tutorial\/'>WordPress Recent Post Animated GIF Improvement Mobile 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\/zero_html_mobile.gif\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Animated GIF Improvement Mobile Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/zero_html_mobile.gif\" title=\"Wordpress Recent Post Animated GIF Improvement Mobile Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Animated GIF Improvement Mobile Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Wordpress Recent Post Animated GIF Improvement Tutorial' href='#wrpagifit'>WordPress Recent Post Animated GIF Improvement Tutorial<\/a> concerned &#8230;<\/p>\n<ul>\n<li><a target=_blank title='RJM Programming Landing Page' href='http:\/\/www.rjmprogramming.com.au\/'>Landing Page<\/a> iframe (<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/zero.html\" title=\"zero.html\">zero.html<\/a>) &#8220;content&#8221;, primarily &#8230; but there is also the matter of the &#8230;<\/li>\n<li>presentation (or display) of that content<\/li>\n<\/ul>\n<p> &#8230; and the nuanced improvements in this regard, today, concern mobile platforms, which had, up until today only shown 2 recent post thumbnails within that Landing Page iframe, leaving white space to the right of that iframe, perhaps making a user conclude &#8220;are there only two tutorials to read?&#8221;.  No, better would be, on mobile, as for non-mobile &#8230;<\/p>\n<ul>\n<li>hide part of thumbnail 3 and entirely thumbnails 4 to 8 that don&#8217;t fit horizontally &#8230; but still allow a &#8230;<\/li>\n<li>user can scroll to these hidden thumbnails, and use them, via horizontal scrolling<\/li>\n<\/ul>\n<p> &#8230; and, as we often find in such matters, to encase <i>whatever HTML content you are concerned about and not happy with<\/i> within a new <font color=blue><i>div encasing element<\/i><\/font> is a great starting point, as per &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n   \/\/$htmlis = \"&lt;html&gt;&lt;head&gt;&lt;script type='text\/javascript'&gt; \" .<br \/>\n   \/\/   \"var one_o_five=600; function ol() {\" .<br \/>\n   \/\/   \" if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {\" .<br \/>\n   \/\/   \" one_o_five=105; for (var j=3; j&lt;=8; j++) {\" .<br \/>\n   \/\/   \" document.getElementById(j).style.display='none';  } } } &lt;\/script&gt;&lt;style&gt; td { vertical-align: top; } &lt;\/style&gt;&lt;\/head&gt;&lt;body onload='ol();' style='width:260px;'&gt;&lt;table style='overflow:scroll;'&gt;&lt;tr&gt;&lt;td id=1&gt;&lt;\/td&gt;&lt;td id=2&gt;&lt;\/td&gt;&lt;td id=3&gt;&lt;\/td&gt;&lt;td id=4&gt;&lt;\/td&gt;&lt;td id=5&gt;&lt;\/td&gt;&lt;td id=6&gt;&lt;\/td&gt;&lt;td id=7&gt;&lt;\/td&gt;&lt;td id=8&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n     $htmlis = \"&lt;html&gt;&lt;head&gt;&lt;script type='text\/javascript'&gt; \" .<br \/>\n        \"var one_o_five=600;  function postonl() {\".<br \/>\n        \" var ims=document.getElementsByTagName('img'); for (var jms=0;jms&lt;ims.length; jms++) {\" .<br \/>\n        \" ims[jms].src=ims[jms].src.replace('-0.jpeg','.jpg');  }  }\" .<br \/>\n        \" function ol() {\" .<br \/>\n        \" if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {\" .<br \/>\n        \" setTimeout(postonl,8000); \" .<br \/>\n        \" one_o_five=105;\" .<br \/>\n        <font color=blue>\" document.getElementById('dtable').style.width='260px';\" .<br \/>\n        \" document.getElementById('dtable').style.overflow='scroll';<\/font> } else if (1 == 2) {\" .<br \/>\n        \" for (var j=3; j&lt;=8; j++) { document.getElementById(j).style.display='none';  } } else {\" .<br \/>\n        \" setTimeout(postonl,1000); } } &lt;\/script&gt;&lt;style&gt; td { vertical-align: top; } &lt;\/style&gt;&lt;\/head&gt;&lt;body onload='ol();' data-style='width:260px;'&gt;<font color=blue>&lt;div id='dtable'&gt;<\/font>&lt;table id='mytable' style='overflow:scroll;'&gt;&lt;tr&gt;&lt;td id=1&gt;&lt;\/td&gt;&lt;td id=2&gt;&lt;\/td&gt;&lt;td id=3&gt;&lt;\/td&gt;&lt;td id=4&gt;&lt;\/td&gt;&lt;td id=5&gt;&lt;\/td&gt;&lt;td id=6&gt;&lt;\/td&gt;&lt;td id=7&gt;&lt;\/td&gt;&lt;td id=8&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;<font color=blue>&lt;\/div&gt;<\/font>&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n<\/code><br \/>\n?&gt;   <\/p>\n<p> &#8230; a change that didn&#8217;t need any tweaking of the parent Landing Page definition of the parent&#8217;s iframe element containing this content.<\/p>\n<p>We&#8217;ve automated a change from any (fast to load) &#8220;-0&#8221; image to equivalent animated GIF <font color=purple>soon after page load<\/font> along the way &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n   \/\/$htmlis = \"&lt;html&gt;&lt;head&gt;&lt;script type='text\/javascript'&gt; \" .<br \/>\n   \/\/   \"var one_o_five=600; function ol() {\" .<br \/>\n   \/\/   \" if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {\" .<br \/>\n   \/\/   \" one_o_five=105; for (var j=3; j&lt;=8; j++) {\" .<br \/>\n   \/\/   \" document.getElementById(j).style.display='none';  } } } &lt;\/script&gt;&lt;style&gt; td { vertical-align: top; } &lt;\/style&gt;&lt;\/head&gt;&lt;body onload='ol();' style='width:260px;'&gt;&lt;table style='overflow:scroll;'&gt;&lt;tr&gt;&lt;td id=1&gt;&lt;\/td&gt;&lt;td id=2&gt;&lt;\/td&gt;&lt;td id=3&gt;&lt;\/td&gt;&lt;td id=4&gt;&lt;\/td&gt;&lt;td id=5&gt;&lt;\/td&gt;&lt;td id=6&gt;&lt;\/td&gt;&lt;td id=7&gt;&lt;\/td&gt;&lt;td id=8&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n     $htmlis = \"&lt;html&gt;&lt;head&gt;&lt;script type='text\/javascript'&gt; \" .<br \/>\n        \"var one_o_five=600;  <font color=purple>function postonl() {\".<br \/>\n        \" var ims=document.getElementsByTagName('img'); for (var jms=0;jms&lt;ims.length; jms++) {\" .<br \/>\n        \" ims[jms].src=ims[jms].src.replace('-0.jpeg','.jpg');  }  }\" .<br \/>\n        \"<\/font> function ol() {\" .<br \/>\n        \" if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {\" .<br \/>\n        \" <font color=purple>setTimeout(postonl,8000);<\/font> \" .<br \/>\n        \" one_o_five=105;\" .<br \/>\n        \" document.getElementById('dtable').style.width='260px';\" .<br \/>\n        \" document.getElementById('dtable').style.overflow='scroll'; } else if (1 == 2) {\" .<br \/>\n        \" for (var j=3; j&lt;=8; j++) { document.getElementById(j).style.display='none';  } } <font color=purple>else {\" .<br \/>\n        \" setTimeout(postonl,1000); }<\/font> } &lt;\/script&gt;&lt;style&gt; td { vertical-align: top; } &lt;\/style&gt;&lt;\/head&gt;&lt;body onload='ol();' data-style='width:260px;'&gt;&lt;div id='dtable'&gt;&lt;table id='mytable' style='overflow:scroll;'&gt;&lt;tr&gt;&lt;td id=1&gt;&lt;\/td&gt;&lt;td id=2&gt;&lt;\/td&gt;&lt;td id=3&gt;&lt;\/td&gt;&lt;td id=4&gt;&lt;\/td&gt;&lt;td id=5&gt;&lt;\/td&gt;&lt;td id=6&gt;&lt;\/td&gt;&lt;td id=7&gt;&lt;\/td&gt;&lt;td id=8&gt;&lt;\/td&gt;&lt;\/tr&gt;&lt;\/table&gt;&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n<\/code><br \/>\n?&gt;   <\/p>\n<p> &#8230; via <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php-----GETME' title='recent-posts-2.php'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php-------GETME' title='recent-posts-2.php'>recent-posts-2.php<\/a> PHP code.<\/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\/wordpress-recent-post-animated-gif-improvement-mobile-tutorial\/'>WordPress Recent Post Animated GIF Improvement Mobile Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wrpagifit'>Previous relevant <a target=_blank title='Wordpress Recent Post Animated GIF Improvement Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-animated-gif-improvement-tutorial\/'>WordPress Recent Post Animated GIF Improvement 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\/zero_html.gif\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Animated GIF Improvement Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/zero_html.gif\" title=\"Wordpress Recent Post Animated GIF Improvement Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Animated GIF Improvement Tutorial<\/p><\/div>\n<p>The last time we visited our <a target=_blank title='crontab' href='http:\/\/www.computerhope.com\/unix\/ucrontab.htm'>crontab<\/a>\/<a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/CURL' title='Curl information from Wikipedia ... thanks'>curl<\/a> once a day Recent Posts thumbnail imagery PHP application was for a bug fix when we presented <a title='Wordpress Recent Post Bug Fix Tutorial' href='#wrpbft'>WordPress Recent Post Bug Fix Tutorial<\/a>.  But there was an ongoing annoyance on top of that addressed today involving &#8230;<\/p>\n<ul>\n<li>animated GIF image presentations would not, until hovering over them, display as &#8230;<\/li>\n<li>the first slide of that animated GIF (but rather would show a snapshot of the previous day&#8217;s image) on &#8230;<\/li>\n<li>the iframe of the RJM Programming <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/\" title=\"Landing page\">landing page<\/a> &#8230; that iframe content having been &#8230;<\/li>\n<li>created via <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php-----GETME' title='recent-posts-2.php'>the changed<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php------GETME' title='recent-posts-2.php'>recent-posts-2.php<\/a><\/li>\n<\/ul>\n<p>The three part changes (as proved would help over at <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> (you can see a bit of with today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/zero_html.gif\" title=\"Tutorial picture\">animated GIF tutorial picture<\/a>) by isolating the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/zero.html\" title=\"zero.html\">zero.html<\/a> webpage (iframe content) recent-posts-2.php creates once a day every day at the instigation of crontab\/curl) &#8230;<\/p>\n<table style=\"width:100%;\">\n<tr>\n<th>Relating to<\/th>\n<th>Was &#8230;<!--\/th><th-->Becomes<\/th>\n<\/tr>\n<tr>\n<td><font color=brown>After<\/font> onmouseover image name<\/td>\n<td>\n<!--code>\n ...  &lt;img onmouseover=\\\"this.src=this.src.replace('.jpeg','.jpg');  ...\n<\/code>\n<\/td>\n\n<td-->\n&lt;?php<br \/>\n<code style=\"font-size:8px;\"><br \/>\n ...  &lt;img onmouseover=\\\"this.src=this.src<font color=brown>.replace('-0.jpeg','.jpg')<\/font>.replace('.jpeg','.jpg');  ...<br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<tr>\n<td>Before onmouseover image name <font color=blue>call<\/font><\/td>\n<td>\n<!--code>\n ...  src='\/\/www.rjmprogramming.com.au\/PHP\/\" . $narray[$thisij] . \".jpeg\" . \"' \/&gt;&lt;\/a&gt;&lt;\/td&gt;\" ...\n<\/code>\n<\/td>\n\n<td-->\n&lt;?php<br \/>\n<code style=\"font-size:8px;\"><br \/>\n ...  src='\/\/www.rjmprogramming.com.au\/PHP\/\" . <font color=blue>minuszerobetter(<\/font>$narray[$thisij] . \".jpeg\"<font color=blue>) . \"?rand=\" . rand(12345678)<\/font> . \"' \/&gt;&lt;\/a&gt;&lt;\/td&gt;\" ...<br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<tr>\n<td>Before onmouseover image name <font color=purple>called<\/font><\/td>\n<td><!--\/td><td-->\n&lt;?php<br \/>\n<code style=\"font-size:8px;\"><br \/>\n  <font color=purple>function minuszerobetter($infp) {<br \/>\n    if (file_exists(dirname(__FILE__) . \"\/\" . explode(\".\", $infp)[0] . \"-1.jpeg\")) {<br \/>\n      if (file_exists(dirname(__FILE__) . \"\/\" . explode(\".\", $infp)[0] . \"-0.jpeg\")) {<br \/>\n      return explode(\".\", $infp)[0] . \"-0.jpeg\";<br \/>\n      } else {<br \/>\n      return explode(\".\", $infp)[0] . \".jpg\";<br \/>\n      }<br \/>\n    }<br \/>\n    if (!file_exists(dirname(__FILE__) . \"\/\" . $infp)) { return str_replace(\"jpeg\",\"jpg\",$infp); }<br \/>\n    return $infp;<br \/>\n  }<\/font><br \/>\n<\/code><br \/>\n?&gt;\n<\/td>\n<\/tr>\n<\/table>\n<p>Now if it was me asking the questions, I&#8217;d ask &#8230;<\/p>\n<blockquote><p>\nHow does &#8220;-0&#8221; come into it?\n<\/p><\/blockquote>\n<p>Glad you asked?  It relates to something being the smart thing behind the scenes that detects any animated GIF presentations and not only creates an animated GIF presentation that starts up after onmouseover (ie. on hover) but supplies the animated GIF as JPEG &#8220;image slides&#8221; of that animated GIF, the first &#8220;image slide&#8221; being named with a &#8220;-0&#8221; in its name.  Now, what is that &#8220;smart application&#8221;?  It&#8217;s the great Linux (or other) command line &#8220;convert&#8221; application of the <a target=_blank title='ImageMagick' href='http:\/\/www.imagemagick.org'>ImageMagick<\/a> suite of image manipulations programs.  We call it from the PHP as per &#8230;<\/p>\n<p><code><br \/>\nif (file_exists(dirname(__FILE__) . \"\/\" . $narray[$thisij] . \".jpeg\")) {<br \/>\n        unlink(dirname(__FILE__) . \"\/\" . $narray[$thisij] . \".jpeg\");<br \/>\n}<br \/>\n$zis=0;<br \/>\nwhile (file_exists(dirname(__FILE__) . \"\/\" . $narray[$thisij] . \"-\" . $zis . \".jpeg\")) {<br \/>\n        unlink(dirname(__FILE__) . \"\/\" . $narray[$thisij] . \"-\" . $zis . \".jpeg\");<br \/>\n        $zis++;<br \/>\n}<br \/>\nexec(\"convert \" . dirname(__FILE__) . \"\/\" . $narray[$thisij] . \".jpg  -resize 105 -quality 50 -strip \" . dirname(__FILE__) . \"\/\" . $narray[$thisij] . \".jpeg\");<br \/>\n<\/code><\/p>\n<p> &#8230; the other &#8220;beauty&#8221; of this PHP <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> method arrangement being that the PHP hangs around until the &#8220;exec&#8221; command finishes, letting the (PHP) <a target=_blank title='PHP file_exists information' href='http:\/\/php.net\/manual\/en\/function.file-exists.php'>file_exists<\/a> of the new PHP function above be functional and accurate and useful.<\/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\/wordpress-recent-post-animated-gif-improvement-tutorial\/'>WordPress Recent Post Animated GIF Improvement Tutorial<\/a>.<\/p-->\n<hr>\n<p id='wrpbft'>Previous relevant <a target=_blank title='Wordpress Recent Post Bug Fix Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-bug-fix-tutorial\/'>WordPress Recent Post Bug Fix Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/recent_posts_bug_fix.gif\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Bug Fix Tutorial\" src=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/recent_posts_bug_fix.jpg\" title=\"Wordpress Recent Post Bug Fix Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Bug Fix Tutorial<\/p><\/div>\n<p>Welcome to our &#8220;WordPress Blog Recent Posts Widget Enhancer Bug Fix Troubleshooting Special&#8221; &#8230; catchy, huh?!   But seriously, recently, on this 23\/10\/2019, we&#8217;d noticed &#8230;<\/p>\n<ul>\n<li>an out of kilter WordPress Blog Recent Posts Widget where only some of the blog posting thumbnails were showing properly &#8230; as well as &#8230;<\/li>\n<li>an out of kilter <a target=_blank title='RJM Programming Landing Page' href='http:\/\/www.rjmprogramming.com.au\/'>Landing Page<\/a> iframe row of thumbnail image links to the WordPress Blog Recent Posts (last talked about with <a title='Wordpress Recent Post Semi-Transparent Background Tutorial' href='#wrps-tbt'>WordPress Recent Post Semi-Transparent Background Tutorial<\/a> below) also not showing properly<\/li>\n<\/ul>\n<p> &#8230; and picked this day to pull our head out of the sand (of three days worth of problem time) and look into the issue.<\/p>\n<p>Cue &#8220;Troubleshooting Mode of Thinking&#8221;, which we hope involves &#8230;<\/p>\n<ul>\n<li>calm thinking<\/li>\n<li>strategic thinking<\/li>\n<li>curiosity as to timings<\/li>\n<li>recognizing patterns<\/li>\n<li>open minded thinking (in terms of what might be the cause of an issue) &#8230; and as far as tools go, we almost invariably find &#8230;<\/li>\n<li>web browser Web Inspectors are wonderful allies to those early bits of Troubleshooting identification of bug characteristics &#8230; and where possible, but not needed today &#8230;<\/li>\n<li>before starting, perhaps, look for independent evidence of interim files proving formats of data that used to work, and set them aside independent in your test system ready for comparison purposes (we did this for an old version of wpage.txt that an eagle eyed viewer will notice in today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/recent_posts_bug_fix.gif\" title=\"Click picture\">stream of consciousness<\/a> troubleshooting presentation today)<\/li>\n<\/ul>\n<p>In troubleshooting scenarios, especially if you see that obvious boundary where a piece of functionality used to work, and then it didn&#8217;t, is to ask &#8220;What&#8217;s happened since then?&#8221;.  For us, that meant we had an immediate suspect with our Recent Posts issue, that being the TwentyTen Theme header.php\/single.php\/loop.php Custom Fields work of the recent <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-landing-page-custom-fields-inhouse-media-tutorial\/' title='WordPress Landing Page Custom Fields Inhouse Media Tutorial'>WordPress Landing Page Custom Fields Inhouse Media Tutorial<\/a> <font size=1>(Spoiler Alert: read the Stop Press of this posting to verify just such)<\/font>.  That&#8217;s a theory, but most of us feel better gathering evidence to solidify the theory, so read on.<\/p>\n<p>We started in Google Chrome&#8217;s (View -&gt; Developer -&gt; Developer Tools) web inspector, a bit inconclusive, surprisingly, when pointing at a missing image (img) tag, but did prompt me to think to enter into the address bar <i>https:\/\/www.rjmprogramming.com.au\/PHP\/zero.html<\/i> which is the content of the (<a target=_blank title='Linux or unix crontab information from computerhope' href='http:\/\/www.computerhope.com\/unix\/ucrontab.htm'>Crontab<\/a> <a target=_blank title='Linux or unix curl information from computerhope' href='http:\/\/www.computerhope.com\/unix\/curl.htm'>Curl<\/a> created) Landing Page iframe element content and there was the first verification of our theory.  We saw the words &#8220;Our link hints for this blog posting&#8221; in zero.html&#8217;s content (as the <i>title<\/i> attribute of some (but not all, interestingly) of the table row cells).  This is a phrase we used in our WordPress TwentyTen Theme header.php\/single.php\/loop.php Custom Fields work, but nothing to do with Recent Posts, as such.  And then we saw the pattern that the images showed okay for blog postings not containing a WordPress Custom Field usage dropdown (as controlled by the admin user and author of the blog posting) and problematic when that blog posting did have such a dropdown.<\/p>\n<blockquote><p>\nM&#8217;lord, I cite this as Evidence B.\n<\/p><\/blockquote>\n<p><a target=_blank title=\"but there's more\" href=\"http:\/\/www.youtube.com\/watch?v=iiATDMHU7gc\">But there&#8217;s more<\/a>!  It is the same evidence but there before the eyes visiting RJM Programming&#8217;s Landing Page (as it was, when problematic) and hovering over the leftmost table row cell and see that strange wording.<\/p>\n<p>So, zero.html has wrong content.  Let&#8217;s go behind the <a target=_blank title='Linux or unix crontab information from computerhope' href='http:\/\/www.computerhope.com\/unix\/ucrontab.htm'>Crontab<\/a> <a target=_blank title='Linux or unix curl information from computerhope' href='http:\/\/www.computerhope.com\/unix\/curl.htm'>Curl<\/a> web server arrangements of how zero.html is created a few times each day, and run it at the command line.  Doing this, got us an error, as per &#8230;<\/p>\n<p><code><br \/>\n<b>Warning<\/b>:  file_get_contents(this.value;): failed to open stream: No such file or directory in <b>$HOME\/public_html\/PHP\/recent-posts-2.php<\/b> on line <b>70<\/b><br \/>\n<\/code><\/p>\n<p> &#8230; the analysis of which had us honing in on the code leading up to (and including, below) line 70 &#8230;<\/p>\n<p><code><br \/>\n      $hrefis = explode(\"href=\", $warticles[$jh]);<br \/>\n      if (substr($hrefis[1], 0, 1) == \"'\") {<br \/>\n        $thesehref = explode(\"'\", substr($hrefis[1], 1));<br \/>\n        $thishref = $thesehref[0];<br \/>\n      } else if (substr($hrefis[1], 0, 1) == '\"') {<br \/>\n        $thesehref = explode('\"', substr($hrefis[1], 1));<br \/>\n        $thishref = $thesehref[0];<br \/>\n      } else {<br \/>\n        $thesehref = explode(\" \", $hrefis[1]);<br \/>\n        $thishref = $thesehref[0];<br \/>\n      }<br \/>\n      }<br \/>\n      $titleis = explode(\"title=\", $warticles[$jh]);<br \/>\n      if (substr($titleis[1], 0, 1) == \"'\") {<br \/>\n        $thesetitle = explode(\"'\", substr($titleis[1], 1));<br \/>\n        $thistitle = $thesetitle[0];<br \/>\n      } else if (substr($titleis[1], 0, 1) == '\"') {<br \/>\n        $thesetitle = explode('\"', substr($titleis[1], 1));<br \/>\n        $thistitle = $thesetitle[0];<br \/>\n      } else {<br \/>\n        $thesetitle = explode(\" \", $titleis[1]);<br \/>\n        $thistitle = $thesetitle[0];<br \/>\n      }<br \/>\n      $imgis = explode(\"src=\", $warticles[$jh]);<br \/>\n      if (substr($imgis[1], 0, 1) == \"'\") {<br \/>\n        $theseimg = explode(\"'\", substr($imgis[1], 1));<br \/>\n        $thisimg = $theseimg[0];<br \/>\n      } else if (substr($imgis[1], 0, 1) == '\"') {<br \/>\n        $theseimg = explode('\"', substr($imgis[1], 1));<br \/>\n        $thisimg = $theseimg[0];<br \/>\n      } else {<br \/>\n        $theseimg = explode(\" \", $imgis[1]);<br \/>\n        $thisimg = $theseimg[0];<br \/>\n      }<br \/>\n      if (substr($thisimg,0,2) == '\/\/') $thisimg='http:' . $thisimg;    \/\/ new SSL specific line 4\/5\/2017<br \/>\n      $icont = file_get_contents($thisimg);<br \/>\n<\/code><\/p>\n<p> &#8230; and realising that the TwentyTen Theme based single.php and loop.php HTML (code) can influence the &#8230;<\/p>\n<p><code><br \/>\n      $titleis = explode(\"title=\", $warticles[$jh]);<br \/>\n      \/\/ ... and ...<br \/>\n      $imgis = explode(\"src=\", $warticles[$jh]);<br \/>\n<\/code><\/p>\n<p> &#8230; delimitation searches.  Rather than change <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php-----GETME' title='recent-posts-2.php'>recent-posts-2.php<\/a> as above, we felt better about accommodating it, rather, by changing single.php and loop.php as per <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-landing-page-custom-fields-inhouse-media-tutorial\/' title='WordPress Landing Page Custom Fields Inhouse Media Tutorial'>WordPress Landing Page Custom Fields Inhouse Media Tutorial<\/a>&#8216;s <a target=_blank title='WordPress Landing Page Custom Fields Inhouse Media Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-landing-page-custom-fields-inhouse-media-tutorial#pidloop'>&#8220;Stop Press&#8221;<\/a> explanation of how we change &#8230;<\/p>\n<table style='width:100%;' border=3>\n<tr>\n<th><\/th>\n<th>From<\/th>\n<th>To<\/th>\n<\/tr>\n<tr>\n<th>single.php<\/th>\n<th> title=<\/th>\n<th> TITLE=<\/th>\n<\/tr>\n<tr>\n<th>loop.php<\/th>\n<th> title=<\/th>\n<th> TITLE=<\/th>\n<\/tr>\n<tr>\n<th>single.php<\/th>\n<th> src=<\/th>\n<th> SRC=<\/th>\n<\/tr>\n<tr>\n<th>loop.php<\/th>\n<th> src=<\/th>\n<th> SRC=<\/th>\n<\/tr>\n<tr>\n<th>single.php<\/th>\n<th>.src=<\/th>\n<th>.src&nbsp;=&nbsp;<\/th>\n<\/tr>\n<tr>\n<th>loop.php<\/th>\n<th>.src=<\/th>\n<th>.src&nbsp;=&nbsp;<\/th>\n<\/tr>\n<\/table>\n<p>Voila!  The result being &#8230;<\/p>\n<ul>\n<li>WordPress Blog Recent Posts Widget images fixed &#8230; as well as &#8230;<\/li>\n<li><a target=_blank title='RJM Programming Landing Page' href='http:\/\/www.rjmprogramming.com.au\/'>Landing Page<\/a> iframe row of thumbnail image links to the WordPress Blog Recent Posts fixed<\/li>\n<\/ul>\n<p>Your proof?   Take a look at the <a href='#recent-posts-2' title='Recent Posts'>Recent Posts<\/a> widget at this blog.<\/p>\n<hr>\n<p id='wrps-tbt'>Previous relevant <a target=_blank title='Wordpress Recent Post Semi-Transparent Background Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-semi-transparent-background-tutorial\/'>WordPress Recent Post Semi-Transparent Background Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rp_tb.jpg\"><img decoding=\"async\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Semi-Transparent Background Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/rp_tb.jpg\" title=\"Wordpress Recent Post Semi-Transparent Background Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Semi-Transparent Background Tutorial<\/p><\/div>\n<p>Do you know what we would be trying to achieve with the HTML (containing inline CSS styling) below?<\/p>\n<p><code><br \/>\n style=\"background: rgba(0,255,0,0.6); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.6), rgba(255,255,0,0.6)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.5), rgba(255,255,0,0.6)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.6), rgba(255,255,0,0.6)); background: linear-gradient(to bottom right, rgba(0,255,0,0.6), rgba(255,255,0,0.6));\"<br \/>\n<\/code><\/p>\n<p>Yes, for a lot of you am sure, this is allowing for a greenish semi-transparent background colour, using the great <a target=_blank title='CSS linear gradient information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/func_linear-gradient.asp'>linear gradient<\/a> (and <a target=_blank title='CSS rgba() function information from w3schools' href='https:\/\/www.w3schools.com\/cssref\/func_rgba.asp'>rgba<\/a> colour) CSS concepts.  That&#8217;s all and good, but not that special really, is it?   Well, yes, it is for us, but maybe not for all of you out there?   Okay, let&#8217;s take a (perhaps naive) step back here.  Background anything is pretty good.  Background anything with opacity is very good really.  But to us, background anything with opacity that is independent of any opacity of HTML elements it overlays is stupendous, incredible and useful.<\/p>\n<p>When we first discovered this technique with (the &#8220;Did you Know?&#8221; section of) <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/column-intelligence-primer-tutorial\/' title='Column Intelligence Primer Tutorial'>Column Intelligence Primer Tutorial<\/a> we were as pleased as punch, and now &#8230; well &#8230; we&#8217;re as pleased as punch, really, like.  Maybe even pickled pink.  It&#8217;s a smallish to medium sized world after all, given the parameters of the orbital dynamics here.<\/p>\n<p>Here&#8217;s an easier one &#8230;<\/p>\n<p><code><br \/>\nstyle=\"border:1px solid rgba(0,127,0,0.6);\"<br \/>\n<\/code><\/p>\n<p>Yes again, we add a focus for the user here, containing the &#8220;blob&#8221; of &#8220;a&#8221; link (linear gradient background) colour with a semi-transparent border, the colour of which has a lot in common with the linear-gradient start colour (another green shade), so that the ugliness of an HTML inline element border has a feel less &#8220;snakelike&#8221; but still feel as if it is encasing <font size=1>&#8230; can a python do both?<\/font><\/p>\n<p>Where are we applying this last &#8220;enthusiasm&#8221; to effect?  On this blog, over in the Recent Posts widget section, so the &#8220;a&#8221; links we apply the new styling ideas above to, overlay some thumbnail images reflecting the content of the blog posting referred to.  You may recall our previous <a title='Wordpress Recent Post Landing Page Tutorial' href='#wrplpt'>WordPress Recent Post Landing Page Tutorial<\/a> setting up some inhouse embellishments to this excellent WordPress widget for use with our Twenty Ten themed blog webpage setup?  Well, this change today, adds to those changes then, to the TwentyTen theme&#8217;s header.php <em>to be precise<\/em> &#8230;<\/p>\n<p><code><br \/>\nfunction rptwo() {<br \/>\n  var tworp=document.getElementById('recent-posts-2');<br \/>\n  if (tworp != null) {<br \/>\n    if (tworp.innerHTML.indexOf('&lt;u' + 'l&gt;') != -1) {<br \/>\n      <em>var ihs=tworp.innerHTML.split(\"&lt;\/a&gt;\");<\/em><br \/>\n      tworp.innerHTML = tworp.innerHTML.replace('&lt;u' + 'l&gt;', '&lt;u' + 'l class=\"iconlist\"&gt;')<em>.replace(\/a href\/g,'a style=\"border:1px solid rgba(0,127,0,0.6);background: rgba(0,255,0,0.6); background: -webkit-linear-gradient(left top, rgba(0,255,0,0.6), rgba(255,255,0,0.6)); background: -o-linear-gradient(bottom right, rgba(0,255,0,0.5), rgba(255,255,0,0.6)); background: -moz-linear-gradient(bottom right, rgba(0,255,0,0.6), rgba(255,255,0,0.6)); background: linear-gradient(to bottom right, rgba(0,255,0,0.6), rgba(255,255,0,0.6));\" title=\"Go to tutorial\" onclick=\"if (1 == 2) { findthing=' + \"''\" + '; } nothanks=true;\" href')<\/em>;<br \/>\n      var eight=new Array(\"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\");<br \/>\n      var ieight;<br \/>\n      tworp.innerHTML = tworp.innerHTML.replace(\/&lt;\/a&gt;\/g, \"&lt;\/a&gt;&lt;img class='iiconlist' src='http:\/\/www.rjmprogramming.com.au\/wordpress\/transparent.png' style='z-index:3;margin-left:0px;margin-top:0px;opacity:0.2;width:140px;height:100px;box-shadow:rgba(0,0,255,0.2) 2px 2px 2px 2px inset;' onmouseover='getRpnow();' onmouseout='yehbut();' ontouchstart='getRpnow();' ontouchend='yehbut();' title=' ... welcome to the long hover functionality that shows Blog Post regarding Recent Post images'&gt;\");<br \/>\n      for (ieight=0; ieight&lt;eight.length; ieight++) {<br \/>\n        tworp.innerHTML = tworp.innerHTML.replace(\"&lt;li&gt;\", \"&lt;li class='\" + eight[ieight] + \"'&gt;\");<br \/>\n        tworp.innerHTML = tworp.innerHTML.replace(\"&lt;img class=\", \"&lt;img onclick=\"clickaid('a\" + eight[ieight] + \"');\" class=\").replace(\"&lt;img title=\" \", \"&lt;img onclick=\"clickaid('a\" + eight[ieight] + \"');\" title=\"\");<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Take a skeg at the Recent Posts widget to left or at bottom of this webpage to see what we mean.<\/p>\n<hr>\n<p id='wrplpt'>Previous relevant <a target=_blank title='Wordpress Recent Post Landing Page Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-landing-page-tutorial\/'>WordPress Recent Post Landing Page Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zero_html_change.jpg\"><img decoding=\"async\" id=\"qqqqqfghjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Landing Page Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/zero_html_change.jpg\" title=\"Wordpress Recent Post Landing Page Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Landing Page Tutorial<\/p><\/div>\n<p>A few days back we decided to revisit (<a target=_blank href='#wrpifut' title='Wordpress Recent Post Image Follow Up Tutorial'>WordPress Recent Post Image Follow Up Tutorial<\/a>) in order to (software) integrate it with the www.rjmprogramming.com.au domain&#8217;s Landing Page.   We did this for two reasons.  It was probably a good visual cue for users, who may be more inclined to click an icon, than a link, these days (&#8230; am not sure yet &#8230;) and because support for <a target=_blank title='Adobe Flash information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Adobe_Flash'>Flash<\/a> is becoming too difficult with the Flash we had going on the Landing Page.<\/p>\n<p>As such we decided to replace the contents within the <a target=_blank title='iWeb web design' href='https:\/\/www.apple.com\/au\/support\/iweb\/\n'>iWeb<\/a> <a target=_blank title='CSS Position information from w3schools' href='http:\/\/www.w3schools.com\/css\/css_positioning.asp'>position:absolute<\/a> <a target=_blank title='HTML div information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'>div<\/a> (that iWeb loves to use) that had Flash with new home-grown HTML <a target=_blank title='HTML iframe information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'>iframe<\/a> webpage that shows those latest 8 recent posts as referred to below.<\/p>\n<p>The change did pan out to involve the &#8220;few times a day code&#8221;.  Do you remember, below &#8230;<\/p>\n<blockquote>\n<p>Why would this job have &#8220;a few times a day&#8221; functionality? &#8230; Well, the images change when a blog posting goes live, and at this blog this happens once a day, so there is no need to slow functionality down getting these images together more often than during that time the new blog posting is scheduled.  So this &#8220;a few times a day&#8221; functionality uses (the web server Linux) crontab\/curl &#8230; what a team &#8230; and we wrote <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php_GETME' title='recent-posts-2.php'>recent-posts-2.php<\/a> to be the PHP run with a curl &#8230; chortle, chortle.<\/p>\n<\/blockquote>\n<p>&#8230; well, all that still applies, but what if we were to intervene in that code to write out HTML that suits that proposed iframe we talked about, above.<\/p>\n<p>So that&#8217;s where we get &#8230; <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php-GETME' title='recent-posts-2.php'>recent-posts-2.php<\/a> &#8230; and the changes to code &#8230; <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php-GETME' title='recent-posts-2.php'>here<\/a>.<\/p>\n<p>That leaves a good <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/zero.html' title='zero.html'>zero.html<\/a> arrangement that is dynamic with those &#8220;few times a day&#8221; arrangements we already had in place, and which you can read more about below, as you wish.  Alas, one speaks too soon, as there is something else needed for zero.html to be user-friendly enough for mobile usage &#8230; the scrolling is not as &#8220;truncaty&#8221; (is this a word?) on mobile devices as on non-mobile devices and we have decided here to just show the two most recent icons where the platform is mobile &#8230; and how was this done?   After reading this brilliant <a target=_blank title='Great cross-platform advice' href='http:\/\/www.abeautifulsite.net\/detecting-mobile-devices-with-javascript\/'>advice<\/a> &#8230; thanks &#8230;  we did some Javascript onload functionality (in zero.html) as below &#8230;<\/p>\n<p><code><br \/>\n&lt;script type='text\/javascript'&gt; var one_o_five=600; function ol() { if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { one_o_five=105; for (var j=3; j&lt;=8; j++) { document.getElementById(j).style.display='none';  } } } &lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p>All that is left is to wipe out the iWeb div Landing Page functionality that was Flash and put in, instead &#8230;<\/p>\n<p><code><br \/>\n&lt;iframe style=\"width:264px;\" title=\"Recent Blog Posts\" src=\"PHP\/zero.html\"&gt;&lt;\/iframe&gt;<br \/>\n<\/code><\/p>\n<p>&#8230; all okay?  You can see it at the www.rjmprogramming.com.au <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/' title='Landing Page'>Landing Page<\/a> a little bit down at the left hand edge of (usual) functionality.<\/p>\n<hr \/>\n<p id='wrpifut'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11008' title='Wordpress Recent Post Image Follow Up Tutorial'>WordPress Recent Post Image Follow Up Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/RecentPostImage_FollowUp.jpg\"><img decoding=\"async\" id=\"qqqqfghjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Image Follow Up Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/RecentPostImage_FollowUp.jpg\" title=\"Wordpress Recent Post Image Follow Up Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Image Follow Up Tutorial<\/p><\/div>\n<p>A couple of days back (<a target=_blank href='#wrpipt' title='Wordpress Recent Post Image Primer Tutorial'>WordPress Recent Post Image Primer Tutorial<\/a>) we did some functionality work on this WordPress Blog&#8217;s Recent Posts menu, and left it more functional for sure and very much &#8220;okay&#8221; &#8230; but is &#8220;okay&#8221; okay? &#8230; well, OK, it might be &#8220;okay&#8221; for a while, but think we seek more functionality:<\/p>\n<ul>\n<li>think quite often users expect that an image on a website will have some underlying functionality, so think that would be an improvement<\/li>\n<li>would like to include online contextual Ajax help for these newly included images<\/li>\n<\/ul>\n<p>To move forward from where we were regarding these improvements we could proceed on 3 logic fronts methinks:<\/p>\n<ul>\n<li>use the <i>ul<\/i>-&gt;<i>li<\/i> hierarchy to do one thing with the new images and other blog posting specific things for all the links &#8230; this may be possible, but it didn&#8217;t work (after some time) so &#8230;<\/li>\n<li>change the logic so that those new CSS created background-url images are turned into real images &#8230; but we prefer to try &#8230;<\/li>\n<li>add a real image superimposed over the new background-url images with a higher <a target=_blank href='http:\/\/www.w3schools.com\/cssref\/pr_pos_z-index.asp' title='CSS z-index information from w3schools'>z-index<\/a> but totally <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/transparent.png\" title=\"transparent png image\">transparent<\/a> (via techniques of <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=9389' title='Gimp Transparency Primer Tutorial'>Gimp Transparency Primer Tutorial<\/a>) and add event logic to these, separate to the link event logics &#8230; this worked, and simplified code ideas as well<\/li>\n<\/ul>\n<p>Our old favourite WordPress blog PHP header.php changed as in bold below:<\/p>\n<p><code><br \/>\nfunction rptwo() {<br \/>\n  var tworp=document.getElementById('recent-posts-2');<br \/>\n  if (tworp != null) {<br \/>\n    if (tworp.innerHTML.indexOf('&lt;u' + 'l&gt;') != -1) {<br \/>\n      tworp.innerHTML = tworp.innerHTML.replace('&lt;u' + 'l&gt;', '&lt;u' + 'l class=\"iconlist\"&gt;');<br \/>\n      <b><br \/>\n      var eight=new Array(\"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\");<br \/>\n      var ieight;<br \/>\n      tworp.innerHTML = tworp.innerHTML.replace(\/&lt;\/a&gt;\/g, \"&lt;\/a&gt;&lt;img class='iiconlist' src='http:\/\/www.rjmprogramming.com.au\/wordpress\/transparent.png' style='z-index:3;margin-left:0px;margin-top:0px;opacity:0.2;width:140px;height:100px;box-shadow:rgba(0,0,255,0.2) 2px 2px 2px 2px inset;' onmouseover='getRpnow();' onmouseout='yehbut();' ontouchstart='getRpnow();' ontouchend='yehbut();' title=' ... welcome to the long hover functionality that shows Blog Post regarding Recent Post images'&gt;\");<br \/>\n      <\/b><br \/>\n      for (ieight=0; ieight&lt;eight.length; ieight++) {<br \/>\n        tworp.innerHTML = tworp.innerHTML.replace(\"&lt;li&gt;\", \"&lt;li class='\" + eight[ieight] + \"'&gt;\");<br \/>\n        <b><br \/>\n         tworp.innerHTML = tworp.innerHTML.replace(\"&lt;img class=\", \"&lt;img onclick=\"clickaid('a\" + eight[ieight] + \"');\" class=\").replace(\"&lt;img title=\" \", \"&lt;img onclick=\"clickaid('a\" + eight[ieight] + \"');\" title=\"\");<br \/>\n        <\/b><br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><\/p>\n<p>Our contextual help Javascript source code can be downloaded by <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js-----GETME' title='wajax.js'>wajax.js<\/a> which changed as per <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js-----GETME' title='wajax.js'>wajax.js<\/a> for these changes today.<\/p>\n<p>Hope you enjoy today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/RecentPostImage_FollowUp.jpg\" title=\"Click picture\">tutorial<\/a>.<\/a><\/p>\n<hr \/>\n<p id=\"wrpipt\">Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10985' title='Wordpress Recent Post Image Primer Tutorial'>WordPress Recent Post Image 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\/wordpress\/RecentPostImage.jpg\"><img decoding=\"async\" id=\"qqfghjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Recent Post Image Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/RecentPostImage.jpg\" title=\"Wordpress Recent Post Image Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Recent Post Image Primer Tutorial<\/p><\/div>\n<p>Sometimes CSS meets Javascript meets &#8220;a few times a day&#8221; functionality, to get a job done, in this case a CSS styling job on this WordPress blog (continuing on with tutorials like <a target=_blank href='#wbctcpt' title='Wordpress Blog Code Tag CSS Primer Tutorial'>WordPress Blog Code Tag CSS Primer Tutorial<\/a> as shown below).   The job is to put small images below the links in the Recent Posts menu on this WordPress blog.  Figure this would help &#8230; and it is good to have a reason &#8230; it would add images or pictures to content below the field of vision &#8230; this makes the blog more user-friendly we think &#8230; but, again, as with many styling issues, this is subjective.<\/p>\n<p>Why would this job have &#8220;a few times a day&#8221; functionality? &#8230; Well, the images change when a blog posting goes live, and at this blog this happens once a day, so there is no need to slow functionality down getting these images together more often than during that time the new blog posting is scheduled.  So this &#8220;a few times a day&#8221; functionality uses (the web server Linux) crontab\/curl &#8230; what a team &#8230; and we wrote <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/recent-posts-2.php_GETME' title='recent-posts-2.php'>recent-posts-2.php<\/a> to be the PHP run with a curl &#8230; chortle, chortle.<\/p>\n<p>Then our old favourite WordPress PHP header.php gets modified as with the bold code below for CSS (part 1 change of 2) &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<\/p>\n<p>#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<\/p>\n<p>code {<br \/>\n    width:90%;<br \/>\n    background-color:#F9F9F9;<br \/>\n    margin-top: 10px;<br \/>\n    margin-bottom: 10px;<br \/>\n    padding:20px 20px;<br \/>\n    border:1px dashed blue;<br \/>\n    display: inline-block;<br \/>\n    text-overflow: ellipsis;<br \/>\n    white-space: pre-wrap;       \/* css-3 *\/<br \/>\n    white-space: -moz-pre-wrap;  \/* Mozilla, since 1999 *\/<br \/>\n    white-space: -pre-wrap;      \/* Opera 4-6 *\/<br \/>\n    white-space: -o-pre-wrap;    \/* Opera 7 *\/<br \/>\n    word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/<br \/>\n}\u200b<\/p>\n<p><b><br \/>\n.iconlist<br \/>\n{<br \/>\nlist-style: none;<br \/>\nmargin: 0;<br \/>\npadding: 0;<br \/>\n}<\/p>\n<p>li.one {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/one.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.two {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/two.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.three {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/three.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.four {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/four.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.five {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/five.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.six {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/six.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.seven {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/seven.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p>li.eight {<br \/>\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/eight.jpg');<br \/>\nbackground-position: left;<br \/>\nbackground-repeat: no-repeat;<br \/>\nbackground-size: 128px 80px;<br \/>\nheight: 150px;<br \/>\ntext-indent: 0px;<br \/>\n}<\/p>\n<p><\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>&#8230; and then our old favourite WordPress PHP header.php gets modified as with the bold code below for Javascript (part 2 change of 2) &#8230;<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction rptwo() {<br \/>\n  var tworp=document.getElementById('recent-posts-2');<br \/>\n  if (tworp != null) {<br \/>\n    if (tworp.innerHTML.indexOf('&lt;u' + 'l&gt;') != -1) {<br \/>\n      tworp.innerHTML = tworp.innerHTML.replace('&lt;u' + 'l&gt;', '&lt;u' + 'l class=\"iconlist\"&gt;');<br \/>\n      var eight=new Array(\"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\");<br \/>\n      var ieight;<br \/>\n      for (ieight=0; ieight&lt;eight.length; ieight++) {<br \/>\n        tworp.innerHTML = tworp.innerHTML.replace(\"&lt;li&gt;\", \"&lt;li class='\" + eight[ieight] + \"'&gt;\");<br \/>\n      }<br \/>\n    }<br \/>\n  }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction courseCookies() {<br \/>\n<b><br \/>\n  rptwo();  \/\/ Recent Post images<br \/>\n<\/b><br \/>\n  winit();  \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile<br \/>\n<\/code><\/p>\n<p>&#8230; and if no Course Design functionality call at the <code>&lt;body onload='rptwo();'&gt;<\/code><\/p>\n<p>A live run is where you are now but you can see it again with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/\" title='Live run'>this<\/a>.<\/p>\n<p>Hope this helps you out in some way shape or form.<\/p>\n<hr \/>\n<p id='wbctcpt'>Previous relevant <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10939' title='Wordpress Blog Code Tag CSS Primer Tutorial'>WordPress Blog Code Tag CSS 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\/wordpress\/Code_Tag_CSS.jpg\"><img decoding=\"async\" id=\"fghjspt\" style=\"float:left;border: 15px solid pink;\" alt=\"Wordpress Blog Code Tag CSS Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/Code_Tag_CSS.jpg\" title=\"Wordpress Blog Code Tag CSS Primer Tutorial\"  \/><\/a><p class=\"wp-caption-text\">Wordpress Blog Code Tag CSS Primer Tutorial<\/p><\/div>\n<p>Explanations of software code are so many and varied these days because there are so many platforms and programming languages to get your head around, that it would be advantageous, (lazy me finally admits), that as you scan down a blog posting in that fast scan we do as we surf the net, something stands out recognizably as <i>&#8220;a piece of code&#8221;<\/i>, apart from the default WordPress theme TwentyTen styling of the <i>&lt;code&gt;<\/i> tag used in our blog here (use <i>&lt;blockquote&gt;<\/i> for non-code quotes &#8230; by the by, all this is subjective).<\/p>\n<p><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/wordpress\/Code_Tag_CSS.jpg\" title=\"Click picture\">Today<\/a> we settle on a CSS <i>&lt;code&gt;<\/i> tag styling definition that mixes a few ideas:<\/p>\n<ul>\n<li>it is important &#8220;code&#8221; line breaks where the writer of the &#8220;code&#8221; said it should<\/li>\n<li> &#8230; conflictingly (is this a word?) sometimes, you want to see everything, so allow line breaking if the line overshoots at the right hand side<\/li>\n<li>use a background colour to make the &#8220;code&#8221; text stand out differently<\/li>\n<li>use an unusual dashed border to catch the user&#8217;s scanning eye<\/li>\n<li>don&#8217;t scare the living daylights (out of the living day lights &#8230; chortle, chortle) &#8230; make the border a non-jittery colour &#8230; like &#8230; blue<\/li>\n<\/ul>\n<p>So let&#8217;s see what made this happen (for itself) with our old favourite <i>header.php<\/i> (what would we do without it!) in bold:<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n.mypclass { color:rgb(185,127,206); }<br \/>\n#mypid { color:rgb(185,127,206); }<br \/>\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }<br \/>\n#mypid2 {  background-color:rgb(185,127,206); color:'black';  }<\/p>\n<p>#ahomeis {<br \/>\n    color: #ffffff;<br \/>\n    font: 24pt Arial;<br \/>\n    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);<br \/>\n}<\/p>\n<p><b><br \/>\ncode {<br \/>\n    width:90%;<br \/>\n    background-color:#F9F9F9;<br \/>\n    margin-top: 10px;<br \/>\n    margin-bottom: 10px;<br \/>\n    padding:20px 20px;<br \/>\n    border:1px dashed blue;<br \/>\n    display: inline-block;<br \/>\n    text-overflow: ellipsis;<br \/>\n    white-space: pre-wrap;       \/* css-3 *\/<br \/>\n    white-space: -moz-pre-wrap;  \/* Mozilla, since 1999 *\/<br \/>\n    white-space: -pre-wrap;      \/* Opera 4-6 *\/<br \/>\n    white-space: -o-pre-wrap;    \/* Opera 7 *\/<br \/>\n    word-wrap: break-word;       \/* Internet Explorer 5.5+ *\/<br \/>\n}\u200b<br \/>\n<\/b><br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>All the following links helped, so, thanks <a target=_blank title='Good CSS code tag CSS advice' href='http:\/\/stackoverflow.com\/questions\/13119441\/code-tags-css-like-wikipedia'>Code Tags CSS like Wikipedia<\/a>, <a target=_blank title='Good CSS code tag CSS advice' href='http:\/\/www.w3schools.com\/cssref\/css3_pr_text-wrap.asp'>CSS3 PR Text<\/a>, <a target=_blank title='Good CSS code tag CSS advice' href='http:\/\/stackoverflow.com\/questions\/15372568\/word-wrap-break-word-not-breaking-the-code-code-tag'>Word Wrap Break Not Breaking &#8211; The Code Tag<\/a>, <a target=_blank title='Good CSS code tag CSS advice' href='http:\/\/davidwalsh.name\/code-tags'>David Walsh Code CSS<\/a>, <a target=_blank title='Good CSS code tag CSS advice' href='http:\/\/css-tricks.com\/snippets\/css\/make-pre-text-wrap\/'>Make Pre Text Wrap<\/a>.<\/p>\n<p>Finally, as far as Ajax contextual help goes, the recent <i>wajax.js<\/i> changed as per the bold code below, last talked about with <a target=_blank title='' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10819'>WordPress Ajax Mobile Friendly Primer Tutorial<\/a>:<\/p>\n<p><code><br \/>\n<b><br \/>\nfunction getCode(evt) {<br \/>\n   bpost = 10939;<br \/>\n   if ((wisiPad || wisTouch)) {<br \/>\n   if (mtimer) clearInterval(mtimer);<br \/>\n   tickcnt = 0;<br \/>\n   mtimer = setInterval(mchecker, 1000);<br \/>\n   } else {<br \/>\n   setTimeout(xget, 4000);<br \/>\n   }<br \/>\n}<br \/>\n<\/b><br \/>\nfunction winit() {<br \/>\n      var allPs;<br \/>\n      zhr = null;<br \/>\n      zok = 1;<br \/>\n      if ((wisiPad || wisTouch) || 1 == 1) {<br \/>\n        var mybased = document.getElementById('site-description');<br \/>\n        if (mybased.innerHTML.indexOf(\"Long \") == -1) {<br \/>\n        if ((wisiPad || wisTouch)) {<br \/>\n        mybased.innerHTML = mybased.innerHTML.replace(\")\", \") &lt;br&gt;&lt;a onclick=' alert(wadvice); ' href='#' title='Long touch contextual help'&gt;Long touch help available.&lt;\/a&gt;\");<br \/>\n        } else {<br \/>\n        mybased.innerHTML = mybased.innerHTML.replace(\")\", \") &lt;br&gt;&lt;a onclick=' alert(wadvice.replace(\"touch on\",\"hover over\")); ' href='#' title='Long hover contextual help'&gt;Long hover help available.&lt;\/a&gt;\");<br \/>\n        }<br \/>\n        }<br \/>\n      }<br \/>\n<b><br \/>\n      if (navigator.userAgent.toLowerCase().indexOf(\"ie\") != (0 - 1)) {<br \/>\n       allPs = document.getElementsByTagName('code');<br \/>\n      } else {<br \/>\n       allPs= document.getElementsByTagName('code');<br \/>\n      }<br \/>\n      for (var j=0; j &lt; allPs.length; j++) {<br \/>\n           if ((wisiPad || wisTouch)) {<br \/>\n           allPs[j].ontouchstart = getCode;<br \/>\n           allPs[j].ontouchend = yehBut;<br \/>\n           } else {<br \/>\n           allPs[j].onmouseover = getCode; \/\/ 10939<br \/>\n           if (allPs[j].title.indexOf(\" ...\") == -1) {<br \/>\n             allPs[j].title = allPs[j].title + \" ... welcome to the long hover functionality that shows Blog Post regarding Code Tag CSS\";<br \/>\n           }<br \/>\n           allPs[j].onmouseout = yehBut;<br \/>\n           }<br \/>\n      }<br \/>\n<\/b><br \/>\n<\/code><\/p>\n<p>&#8230; to become <a target=_blank title='wajax.js' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/wajax.js----GETME'>wajax.js<\/a><\/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='#10939' onclick='var dv=document.getElementById(\"d10939\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10939' 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='#10985' onclick='var dv=document.getElementById(\"d10985\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d10985' 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='#11008' onclick='var dv=document.getElementById(\"d11008\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11008' 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='#11388' onclick='var dv=document.getElementById(\"d11388\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=CSS\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d11388' 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='#40633' onclick='var dv=document.getElementById(\"d40633\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wordpress\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d40633' 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='#46921' onclick='var dv=document.getElementById(\"d46921\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/troubleshoot\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46921' 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='#49366' onclick='var dv=document.getElementById(\"d49366\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/animated-gif\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49366' 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='#49385' onclick='var dv=document.getElementById(\"d49385\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/overflow\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49385' 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='#49390' onclick='var dv=document.getElementById(\"d49390\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/presentation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49390' 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='#49406' onclick='var dv=document.getElementById(\"d49406\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/font\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49406' 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='#49416' onclick='var dv=document.getElementById(\"d49416\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/karaoke\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49416' 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='#49463' onclick='var dv=document.getElementById(\"d49463\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/browse\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49463' 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='#49471' onclick='var dv=document.getElementById(\"d49471\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/order\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49471' 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='#49536' onclick='var dv=document.getElementById(\"d49536\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/audio\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d49536' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Three topics of our interest come together today, those being &#8230; animated GIF creation via image slides URL or data-URI (result of local browsing) &#8230; synchronizing media (a totally harder ballgame on mobile platforms, but possible for non-mobile Animated GIF &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/animated-gif-audio-or-video-foreground-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":[83,1832,113,3340,1993,177,215,1985,3339,2380,385,418,419,1840,451,557,2016,721,3337,3343,760,792,1668,2732,2076,932,3341,980,2738,997,2047,1149,1172,1670,1254,2167,3338,1319,1333,1369,3348,2529,1431,1493],"class_list":["post-49536","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-animated-gif","tag-annotation","tag-audio","tag-bridge","tag-browse","tag-cache","tag-closed-captions","tag-comment","tag-dejavusansmono","tag-delay","tag-emoji","tag-file","tag-file-api","tag-filereader","tag-font","tag-hashtag","tag-karaoke","tag-lyrics","tag-making-of","tag-mashed","tag-media","tag-mime","tag-mime-type","tag-mimetype","tag-order","tag-php","tag-poetry","tag-presentation","tag-procedure","tag-programming","tag-random","tag-slide","tag-song","tag-synchronize","tag-text","tag-title","tag-true-type-font","tag-tutorial","tag-unicode","tag-video","tag-voiceover","tag-watermark","tag-wikipedia","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49536"}],"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=49536"}],"version-history":[{"count":7,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49536\/revisions"}],"predecessor-version":[{"id":49543,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/49536\/revisions\/49543"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=49536"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=49536"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=49536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}