{"id":10985,"date":"2014-12-09T05:06:00","date_gmt":"2014-12-08T18:06:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=10985"},"modified":"2017-08-03T19:34:23","modified_gmt":"2017-08-03T09:34:23","slug":"wordpress-recent-post-image-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wordpress-recent-post-image-primer-tutorial\/","title":{"rendered":"WordPress Recent Post Image Primer Tutorial"},"content":{"rendered":"
\"Wordpress<\/a>

Wordpress Recent Post Image Primer Tutorial<\/p><\/div>\n

Sometimes CSS meets Javascript meets “a few times a day” functionality, to get a job done, in this case a CSS styling job on this WordPress blog (continuing on with tutorials like 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 … and it is good to have a reason … it would add images or pictures to content below the field of vision … this makes the blog more user-friendly we think … but, again, as with many styling issues, this is subjective.<\/p>\n

Why would this job have “a few times a day” functionality? … 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 “a few times a day” functionality uses (the web server Linux) crontab\/curl … what a team … and we wrote recent-posts-2.php<\/a> to be the PHP run with a curl … chortle, chortle.<\/p>\n

Then our old favourite WordPress PHP header.php gets modified as with the bold code below for CSS (part 1 change of 2) …<\/p>\n


\n<style>
\n.mypclass { color:rgb(185,127,206); }
\n#mypid { color:rgb(185,127,206); }
\n.mypclass2 { background-color:rgb(185,127,206); color:'black'; }
\n.mypclass22 { background-color:rgb(185,127,206); color:'black'; }
\n#mypid2 { background-color:rgb(185,127,206); color:'black'; }<\/p>\n

#ahomeis {
\n color: #ffffff;
\n font: 24pt Arial;
\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);
\n}<\/p>\n

code {
\n width:90%;
\n background-color:#F9F9F9;
\n margin-top: 10px;
\n margin-bottom: 10px;
\n padding:20px 20px;
\n border:1px dashed blue;
\n display: inline-block;
\n text-overflow: ellipsis;
\n white-space: pre-wrap; \/* css-3 *\/
\n white-space: -moz-pre-wrap; \/* Mozilla, since 1999 *\/
\n white-space: -pre-wrap; \/* Opera 4-6 *\/
\n white-space: -o-pre-wrap; \/* Opera 7 *\/
\n word-wrap: break-word; \/* Internet Explorer 5.5+ *\/
\n}\u200b<\/p>\n


\n.iconlist
\n{
\nlist-style: none;
\nmargin: 0;
\npadding: 0;
\n}<\/p>\n

li.one {
\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/one.jpg');
\nbackground-position: left;
\nbackground-repeat: no-repeat;
\nbackground-size: 128px 80px;
\nheight: 150px;
\ntext-indent: 0px;
\n}<\/p>\n

li.two {
\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/two.jpg');
\nbackground-position: left;
\nbackground-repeat: no-repeat;
\nbackground-size: 128px 80px;
\nheight: 150px;
\ntext-indent: 0px;
\n}<\/p>\n

li.three {
\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/three.jpg');
\nbackground-position: left;
\nbackground-repeat: no-repeat;
\nbackground-size: 128px 80px;
\nheight: 150px;
\ntext-indent: 0px;
\n}<\/p>\n

li.four {
\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/four.jpg');
\nbackground-position: left;
\nbackground-repeat: no-repeat;
\nbackground-size: 128px 80px;
\nheight: 150px;
\ntext-indent: 0px;
\n}<\/p>\n

li.five {
\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/five.jpg');
\nbackground-position: left;
\nbackground-repeat: no-repeat;
\nbackground-size: 128px 80px;
\nheight: 150px;
\ntext-indent: 0px;
\n}<\/p>\n

li.six {
\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/six.jpg');
\nbackground-position: left;
\nbackground-repeat: no-repeat;
\nbackground-size: 128px 80px;
\nheight: 150px;
\ntext-indent: 0px;
\n}<\/p>\n

li.seven {
\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/seven.jpg');
\nbackground-position: left;
\nbackground-repeat: no-repeat;
\nbackground-size: 128px 80px;
\nheight: 150px;
\ntext-indent: 0px;
\n}<\/p>\n

li.eight {
\nbackground-image: url('http:\/\/www.rjmprogramming.com.au\/PHP\/eight.jpg');
\nbackground-position: left;
\nbackground-repeat: no-repeat;
\nbackground-size: 128px 80px;
\nheight: 150px;
\ntext-indent: 0px;
\n}<\/p>\n

<\/b>
\n<\/style>
\n<\/code><\/p>\n

… and then our old favourite WordPress PHP header.php gets modified as with the bold code below for Javascript (part 2 change of 2) …<\/p>\n


\n
\nfunction rptwo() {
\n var tworp=document.getElementById('recent-posts-2');
\n if (tworp != null) {
\n if (tworp.innerHTML.indexOf('<u' + 'l>') != -1) {
\n tworp.innerHTML = tworp.innerHTML.replace('<u' + 'l>', '<u' + 'l class=\"iconlist\">');
\n var eight=new Array(\"one\", \"two\", \"three\", \"four\", \"five\", \"six\", \"seven\", \"eight\");
\n var ieight;
\n for (ieight=0; ieight<eight.length; ieight++) {
\n tworp.innerHTML = tworp.innerHTML.replace(\"<li>\", \"<li class='\" + eight[ieight] + \"'>\");
\n }
\n }
\n }
\n}
\n<\/b>
\nfunction courseCookies() {
\n
\n rptwo(); \/\/ Recent Post images
\n<\/b>
\n winit(); \/\/ Ajax functionality 26\/11\/2014 ... slow hover ... not for mobile
\n<\/code><\/p>\n

… and if no Course Design functionality call at the <body onload='rptwo();'><\/code><\/p>\n

A live run is where you are now but you can see it again with this<\/a>.<\/p>\n

Hope this helps you out in some way shape or form.<\/p>\n

\n

Previous relevant WordPress Blog Code Tag CSS Primer Tutorial<\/a> is shown below.<\/p>\n

\"Wordpress<\/a>

Wordpress Blog Code Tag CSS Primer Tutorial<\/p><\/div>\n

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 “a piece of code”<\/i>, apart from the default WordPress theme TwentyTen styling of the <code><\/i> tag used in our blog here (use <blockquote><\/i> for non-code quotes … by the by, all this is subjective).<\/p>\n

Today<\/a> we settle on a CSS <code><\/i> tag styling definition that mixes a few ideas:<\/p>\n