SSL Recent Post ImageMagick Thumbnail Tutorial

SSL Recent Post ImageMagick Thumbnail Tutorial

We worked on SSL for our WordPress blog the other day, but a part of its added inhouse functionality that we talked about at WordPress Recent Post Image Follow Up Tutorial, as shown below, was not working as a result of the changes. On the day of the changes occurring that would not have been apparent. Are you interested yet? Are you the type to gather evidence before jumping into conclusive action? For me, sometimes, and it’s definitely the case that I could improve, that is for sure, because am very keen to jump to optimistic thoughts regarding programming. But optimism, am here to say, can be the enemy, or perhaps a better word is “irritant”, to programmers, at times. Sure, choose your times to take “jumping” risks. And we “assumed” a “jumping” risk doing our SSL thangthing of substituting http:// for // everywhere in recent-posts-2.php but it went wrong, as you can see in several different “evidential” ways we’ll add to our other bit of evidence below, and that you can see in today’s tutorial picture, lined up at the left …

1. the problem didn’t show on the day of making https: compliant WordPress blog code changes … as well as, from the next day on …
2. on the WordPress blog Recent Posts widget section our usual homegrown code produced background were all missing bar one, the Webcam blog posting one
3. in web browser, viewing zero.html which forms the contents near the top and at the right of our RJM Programming landing page showed missing images
4. in web browser, viewing the (HTML iframe) contents near the top and at the right of our RJM Programming landing page showed missing images
5. the error message ‘The image “https://www.rjmprogramming.com.au/PHP/two.jpeg” cannot be displayed as it contains errors.‘ results with two.jpeg URL (a homegrown code via ImageMagick convert (via PHP exec) generated thumbnail image) at web browser address bar.
6. the error message ‘The image “https://www.rjmprogramming.com.au/PHP/two.jpg” cannot be displayed as it contains errors.‘ results with two.jpg URL (an original WordPress blog posting top image) at web browser address bar.

… and all these were aspects to a “gathering evidence before jumping into action” way of stepping back a bit and planning and thinking a bit before diving into the code. What does the evidence suggest? Respectively, for us …

1. This suggests to us that the problem occurs in a Crontab run piece of code (run overnight AEST … yes, we sleep here at RJM Programming … even our pet fish) …the problem didn’t show on the day of making https: compliant WordPress blog code changes … as well as, from the next day on …
2. The thing different about the one background image there, and fully functional, is that, unusually, we supplied it with an https:// starting URL … curious, eh wot guv’? …on the WordPress blog Recent Posts widget section our usual homegrown code produced background were all missing bar one, the Nostalgia blog posting one
3. Similar evidence confirming above …in web browser, viewing zero.html which forms the contents near the top and at the right of our RJM Programming landing page showed missing images
4. Similar evidence confirming above …in web browser, viewing the (HTML iframe) contents near the top and at the right of our RJM Programming landing page showed missing images
5. Similar evidence confirming above, but also pointing to a more specific problem with the code’s (ImageMagick’s convert based) creation of the thumbnail image version of the WordPress Blog posting’s top image (as that is how all this functions) …the error message ‘The image “https://www.rjmprogramming.com.au/PHP/two.jpeg” cannot be displayed as it contains errors.‘ results with two.jpeg URL at web browser address bar.
6. Similar evidence confirming above, but also pointing to a more specific problem before the code’s (ImageMagick’s convert based) creation of the thumbnail image version of the WordPress Blog posting’s top image (as that is how all this functions), because the *.jpeg thumbnail is based on the original blog posting top image (which must be wrong as well, and so we should look to code before the ImageMagick code) …the error message ‘The image “https://www.rjmprogramming.com.au/PHP/two.jpg” cannot be displayed as it contains errors.‘ results with two.jpg URL at web browser address bar.

… and that pointed us to a piece of PHP code that is Crontab Curl’ed on our Linux web server (overnight AEST) at RJM Programming called recent-posts-2.php and to where the problem is likely to happen, resulting in our additional PHP code line as below …


if (substr($thisimg,0,2) == '//') $thisimg='http:' . $thisimg; // new SSL specific line 4/5/2017
$icont = file_get_contents($thisimg);
file_put_contents(dirname(__FILE__) . "/" . $narray[$thisij] . ".jpg", $icont);
exec("convert " . dirname(__FILE__) . "/" . $narray[$thisij] . ".jpg -resize 105 -quality 50 -strip " . dirname(__FILE__) . "/" . $narray[$thisij] . ".jpeg");


And what does this show us? Anyone, anyone?

It shows us that PHP’s file_get_contents method’s parameter needs to define a definite (PHP $_SERVER[‘SERVER_PROTOCOL]) protocol so that a parameter starting with // is not mistaken for a Windows UNC.

While we are at it with this, note two cute things about all this …

1. how “cute” it is for a batch process thangthing to be able to use (PHP’s ) dirname(__FILE__) to be able to lob on the web server directory of the calling PHP code, which happens when the “dynamic duo” of Crontab and Curl …
   
5 2 * * * ksh -c "curl https://www.rjmprogramming.com.au/ITblog/ > ~rjmprogr/public_html/PHP/wpage.txt ; chown rjmprogr ~rjmprogr/public_html/PHP/wpage.txt ; chgrp rjmprogr ~rjmprogr/public_html/PHP/wpage.txt ; curl http://www.rjmprogramming.com.au/PHP/recent-posts-2.php "

   … meet in a procedure
2. how two images of the Jpeg variety, one named with extension jpeg (the (ImageMagick convert (via the wonderful PHP exec) created) thumbnail) and the other with extension jpg (the original blog posting (top) image) can serve two different purposes, and can even have the same underlying image data, though in our usage that data is different, that difference being that one is the original sized image dimensions and the other is our “constructed by ImageMagick convert” thumbnail equivalent (that the user first sees, but if hovered over, gets “mapped” to the original sized image “view”) … we find similar “cuteness” using .htm and .html usage, though there is a hierarchical difference here, that .htm can take precedence when combined with the Apache default “index.htm” (overriding any “index.html”, in any one web server URL “directory” (folder) of interest)

End result … a slow start, but the “tortoise” beats the “hare” in the end! (“Down, Tor Toys!”)

Previous relevant WordPress Recent Post Image Follow Up Tutorial is shown below.

Wordpress Recent Post Image Follow Up Tutorial

A couple of days back (WordPress Recent Post Image Primer Tutorial) we did some functionality work on this WordPress Blog’s Recent Posts menu, and left it more functional for sure and very much “okay” … but is “okay” okay? … well, OK, it might be “okay” for a while, but think we seek more functionality:

• think quite often users expect that an image on a website will have some underlying functionality, so think that would be an improvement
• would like to include online contextual Ajax help for these newly included images

To move forward from where we were regarding these improvements we could proceed on 3 logic fronts methinks:

• use the ul->li hierarchy to do one thing with the new images and other blog posting specific things for all the links … this may be possible, but it didn’t work (after some time) so …
• change the logic so that those new CSS created background-url images are turned into real images … but we prefer to try …
• add a real image superimposed over the new background-url images with a higher z-index but totally transparent (via techniques of Gimp Transparency Primer Tutorial) and add event logic to these, separate to the link event logics … this worked, and simplified code ideas as well

Our old favourite WordPress blog PHP header.php changed as in bold below:


function rptwo() {
var tworp=document.getElementById('recent-posts-2');
if (tworp != null) {
if (tworp.innerHTML.indexOf('<u' + 'l>') != -1) {
tworp.innerHTML = tworp.innerHTML.replace('<u' + 'l>', '<u' + 'l class="iconlist">');

var eight=new Array("one", "two", "three", "four", "five", "six", "seven", "eight");
var ieight;
tworp.innerHTML = tworp.innerHTML.replace(/<\/a>/g, "</a><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'>");

for (ieight=0; ieight<eight.length; ieight++) {
tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li class='" + eight[ieight] + "'>");

tworp.innerHTML = tworp.innerHTML.replace("<img class=", "<img onclick=\"clickaid('a" + eight[ieight] + "');\" class=").replace("<img title=\" ", "<img onclick=\"clickaid('a" + eight[ieight] + "');\" title=\"");

}
}
}
}


Our contextual help Javascript source code can be downloaded by wajax.js which changed as per wajax.js for these changes today.

Hope you enjoy today’s tutorial.

Previous relevant WordPress Recent Post Image Primer Tutorial is shown below.

Wordpress Recent Post Image Primer Tutorial

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 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.

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 to be the PHP run with a curl … chortle, chortle.

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


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


</style>


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



function rptwo() {
var tworp=document.getElementById('recent-posts-2');
if (tworp != null) {
if (tworp.innerHTML.indexOf('<u' + 'l>') != -1) {
tworp.innerHTML = tworp.innerHTML.replace('<u' + 'l>', '<u' + 'l class="iconlist">');
var eight=new Array("one", "two", "three", "four", "five", "six", "seven", "eight");
var ieight;
for (ieight=0; ieight<eight.length; ieight++) {
tworp.innerHTML = tworp.innerHTML.replace("<li>", "<li class='" + eight[ieight] + "'>");
}
}
}
}

function courseCookies() {

rptwo(); // Recent Post images

winit(); // Ajax functionality 26/11/2014 ... slow hover ... not for mobile


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

A live run is where you are now but you can see it again with this.

Hope this helps you out in some way shape or form.

Previous relevant WordPress Blog Code Tag CSS Primer Tutorial is shown below.

Wordpress Blog Code Tag CSS Primer Tutorial

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

Today we settle on a CSS <code> tag styling definition that mixes a few ideas:

• it is important “code” line breaks where the writer of the “code” said it should
• … conflictingly (is this a word?) sometimes, you want to see everything, so allow line breaking if the line overshoots at the right hand side
• use a background colour to make the “code” text stand out differently
• use an unusual dashed border to catch the user’s scanning eye
• don’t scare the living daylights (out of the living day lights … chortle, chortle) … make the border a non-jittery colour … like … blue

So let’s see what made this happen (for itself) with our old favourite header.php (what would we do without it!) in bold:


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


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

</style>


All the following links helped, so, thanks Code Tags CSS like Wikipedia, CSS3 PR Text, Word Wrap Break Not Breaking – The Code Tag, David Walsh Code CSS, Make Pre Text Wrap.

Finally, as far as Ajax contextual help goes, the recent wajax.js changed as per the bold code below, last talked about with WordPress Ajax Mobile Friendly Primer Tutorial:



function getCode(evt) {
bpost = 10939;
if ((wisiPad || wisTouch)) {
if (mtimer) clearInterval(mtimer);
tickcnt = 0;
mtimer = setInterval(mchecker, 1000);
} else {
setTimeout(xget, 4000);
}
}

function winit() {
var allPs;
zhr = null;
zok = 1;
if ((wisiPad || wisTouch) || 1 == 1) {
var mybased = document.getElementById('site-description');
if (mybased.innerHTML.indexOf("Long ") == -1) {
if ((wisiPad || wisTouch)) {
mybased.innerHTML = mybased.innerHTML.replace(")", ") <br><a onclick=' alert(wadvice); ' href='#' title='Long touch contextual help'>Long touch help available.</a>");
} else {
mybased.innerHTML = mybased.innerHTML.replace(")", ") <br><a onclick=' alert(wadvice.replace(\"touch on\",\"hover over\")); ' href='#' title='Long hover contextual help'>Long hover help available.</a>");
}
}
}

if (navigator.userAgent.toLowerCase().indexOf("ie") != (0 - 1)) {
allPs = document.getElementsByTagName('code');
} else {
allPs= document.getElementsByTagName('code');
}
for (var j=0; j < allPs.length; j++) {
if ((wisiPad || wisTouch)) {
allPs[j].ontouchstart = getCode;
allPs[j].ontouchend = yehBut;
} else {
allPs[j].onmouseover = getCode; // 10939
if (allPs[j].title.indexOf(" ...") == -1) {
allPs[j].title = allPs[j].title + " ... welcome to the long hover functionality that shows Blog Post regarding Code Tag CSS";
}
allPs[j].onmouseout = yehBut;
}
}



… to become wajax.js

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.

If this was interesting you may be interested in this too.