{"id":11008,"date":"2014-12-11T05:05:24","date_gmt":"2014-12-10T18:05:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=11008"},"modified":"2014-12-11T05:05:24","modified_gmt":"2014-12-10T18:05:24","slug":"wordpress-recent-post-image-follow-up-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-image-follow-up-tutorial\/","title":{"rendered":"WordPress Recent Post Image Follow Up Tutorial"},"content":{"rendered":"<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","protected":false},"excerpt":{"rendered":"<p>A couple of days back (WordPress Recent Post Image Primer Tutorial) 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; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-image-follow-up-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,16,37],"tags":[126,151,281,491,576,590,652,798,876,932,997,1293,1302,1456,1496],"class_list":["post-11008","post","type-post","status-publish","format-standard","hentry","category-elearning","category-gimp","category-tutorials","tag-background","tag-blog","tag-css","tag-gimp","tag-html","tag-image","tag-javascript","tag-mobile-friendly","tag-opacity","tag-php","tag-programming","tag-totorial","tag-transparency","tag-wordpress","tag-z-index"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11008"}],"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=11008"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/11008\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=11008"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=11008"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=11008"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}