{"id":54058,"date":"2021-12-19T03:01:15","date_gmt":"2021-12-18T17:01:15","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=54058"},"modified":"2021-12-21T12:02:10","modified_gmt":"2021-12-21T02:02:10","slug":"php-image-dimensions-linux-and-windows-glob-preview-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-image-dimensions-linux-and-windows-glob-preview-tutorial\/","title":{"rendered":"PHP Image Dimensions Linux and Windows Glob Preview Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image Dimensions Linux Linux and Windows Glob Preview Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size_preview.jpg\" title=\"PHP Image Dimensions Linux and Windows Glob Preview Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image Dimensions Linux and Windows Glob Preview Tutorial<\/p><\/div>\n<p>Another web application candidate we like for &#8220;preview&#8221; possibilities is that of <a title='PHP Image Dimensions Linux and Windows Glob Curl Tutorial' href='#phpidlwgct'>PHP Image Dimensions Linux and Windows Glob Curl Tutorial<\/a>.  Adding to <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-preview-tutorial\/' title='Text to Emoji Preview Tutorial'>Text to Emoji Preview Tutorial<\/a>&#8216;s &#8230;<\/p>\n<blockquote cite='https:\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-preview-tutorial\/'>\n<ul>\n<li>yesterday&#8217;s work HTML iframe destination was populated via some HTML via that iframe&#8217;s &#8220;srcdoc&#8221; attribute &#8230; whereas with &#8230;<\/li>\n<li>today&#8217;s work switches the &#8220;target&#8221; attribute of an HTML form (POST<font size=1>ing<\/font> data to some PHP) to our &#8220;overlay preview&#8221; HTML iframe before putting that form&#8217;s &#8220;target&#8221; attribute back to the normal flow of work<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; our work today is like that latter approach above, but achieved at different intervention points, those being &#8230;<\/p>\n<ul>\n<li>interventions at onblur and onchange events of the user &#8220;asking&#8221; elements &#8230;<\/li>\n<li>interventions at onmouseover (ie. non-mobile only) event for the &#8220;List&#8221; form submit button<\/li>\n<\/ul>\n<p> &#8230; coalescing to the calling of &#8220;omo()&#8221; Javascript function below <font color=blue>(and for Did You Know? change)<\/font> &#8230;<\/p>\n<p><code><br \/>\n var unpopsecs=5000;<br \/>\n <font color=blue>var bih='';<\/font><br \/>\n<br \/>\n function gthen() {<br \/>\n    document.getElementById('myrform').target='_blank';<br \/>\n    document.getElementById('preview').style.display='none';<br \/>\n }<br \/>\n<br \/> <br \/>\n function antiomo() {<br \/>\n  if (unpopsecs != 0) {<br \/>\n    document.getElementById('myrform').target='_blank';<br \/>\n  }<br \/>\n }<br \/>\n<br \/>\n function omo() {<br \/>\n  if (unpopsecs != 0) {<br \/>\n    <font color=blue>if (bih == '' || bih != document.body.innerHTML) {<\/font><br \/>\n    document.getElementById('preview').style.width='100%';<br \/>\n    document.getElementById('preview').style.height='900px';<br \/>\n    document.getElementById('preview').style.display='block';<br \/>\n    document.getElementById('myrform').target='preview';<br \/>\n    document.getElementById('myrform').submit();<br \/>\n    document.getElementById('myrform').target='_blank';<br \/>\n    setTimeout(gthen, unpopsecs);<br \/>\n    <font color=blue>}<br \/>\n    bih=document.body.innerHTML;<\/font><br \/>\n  }<br \/>\n }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php------GETME\" title=\"find_images_via_size.php\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php------GETME\" title=\"find_images_via_size.php\">find_images_via_size.php<\/a> that can be downloaded or tried out at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p><b><i>Did You Know?<\/i><\/b><\/p>\n<p><font color=blue>We discovered the amount of Previewing for short periods of time got annoying, if nothing had changed, and so we introduced a test for document.body.innerHTML change extra condition to previewing.<\/font><\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Also adding to <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/text-to-emoji-preview-tutorial\/' title='Text to Emoji Preview Tutorial'>Text to Emoji Preview Tutorial<\/a>&#8216;s underlying &#8220;preview couple&#8221; web applications we&#8217;ve added to those, relative keyboard &#8220;onkeyup&#8221; functionality that goes &#8230;<\/p>\n<table>\n<tr>\n<th><a target=_blank title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html-------------GETME'>The changed<\/a> HTML parent <a target=_blank title='do_away_with_the_boring_bits.html' href='http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html-------------GETME'>do_away_with_the_boring_bits.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/do_away_with_the_boring_bits.html\" title=\"Click picture\">HTML editor web application<\/a>&#8216;s document.body &#8220;onload&#8221; event called &#8230;<\/th>\n<\/tr>\n<tr>\n<td><code><br \/>\nfunction trynm() {<br \/>\n if (unpopsecs != 0 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  document.getElementById('htmlcontent').onkeyup = function(e) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/24386354\/execute-js-code-after-pressing-the-spacebar\/24386518<br \/>\n     if (e.keyCode == 32 || e.keyCode == 190) {  \/\/ ie. type space or &gt; character<br \/>\n        checkih();<br \/>\n     }<br \/>\n    }<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/td>\n<\/tr>\n<tr>\n<th><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html------GETME\" title=\"fillin_gaps_with_emojis.html\">The HTML and Javascript changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html------GETME\" title=\"fillin_gaps_with_emojis.html\">fillin_gaps_with_emojis.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/fillin_gaps_with_emojis.html\" title=\"Click picture\">&#8220;Text to Emoji&#8221; web application<\/a>&#8216;s document.body &#8220;onload&#8221; event called &#8230;<\/th>\n<\/tr>\n<tr>\n<td><code><br \/>\nfunction trynm() {<br \/>\n if (unpopsecs != 0 && !navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) {<br \/>\n  document.getElementById('intext').onkeyup = function(e) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/24386354\/execute-js-code-after-pressing-the-spacebar\/24386518<br \/>\n    if (e.keyCode == 32) {<br \/>\n        checkih();<br \/>\n     }<br \/>\n    }<br \/>\n }<br \/>\n}<br \/>\n<\/code><\/td>\n<\/tr>\n<\/table>\n<p> &#8230; which intensifies the amount of previewing happening should the user want previewing.<\/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\/php-image-dimensions-linux-and-windows-glob-preview-tutorial\/'>PHP Image Dimensions Linux and Windows Glob Preview Tutorial<\/a>.<\/p-->\n<hr>\n<p id='phpidlwgct'>Previous relevant <a target=_blank title='PHP Image Dimensions Linux and Windows Glob Curl Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-dimensions-linux-and-windows-glob-curl-tutorial\/'>PHP Image Dimensions Linux and Windows Glob Curl 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\/find_images_via_size.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image Dimensions Linux Linux and Windows Glob Curl Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_file_size_curl.jpg\" title=\"PHP Image Dimensions Linux and Windows Glob Curl Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image Dimensions Linux and Windows Glob Curl Tutorial<\/p><\/div>\n<p>Yes, we do believe that of the PHP modes of use, those being &#8230;<\/p>\n<ul>\n<li>surfing the net<\/li>\n<li>command line<\/li>\n<li><a target=_blank title='Linux or unix curl information from computerhope' href='http:\/\/www.computerhope.com\/unix\/curl.htm'>curl<\/a><\/li>\n<\/ul>\n<p> &#8230; there can be a role for <a target=_blank title='Linux or unix curl information from computerhope' href='http:\/\/www.computerhope.com\/unix\/curl.htm'>curl<\/a> as that hybrid &#8220;bit of both worlds&#8221; mode of use with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php----GETME\" title=\"find_images_via_size.php\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php----GETME\" title=\"find_images_via_size.php\">find_images_via_size.php<\/a> that can be downloaded or tried out at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>That circumstance is regarding when a user is online (ie. starts out &#8220;surfing the net&#8221;) and would prefer an option to just see the Image Dimensions report as a really simple &#8220;no bells and whistles&#8221; offering.  Though there are ways, at least with Linux (and macOS) <a target=_blank title='Linux tee command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/utee.htm'>tee<\/a> command to do this quite neatly and stay in &#8220;surfing the net&#8221; mode.  But this did not appeal to us now that we support Windows as the underlying operating system.  And this is where &#8220;curl&#8221; being that hybrid is interesting, and there is &#8220;delimitation&#8221; interest galore in our idea to, for this &#8220;simple report curl subproject&#8221; &#8230;<\/p>\n<ul>\n<li>within &#8220;surfing the net&#8221; mode offer a new HTML form input type=button as per &#8230;<br \/>\n<code><br \/>\n&lt;input style='background-color:orange;font-size:20px;' type=button onclick='shortlist();' value=Short&gt;&lt;\/input&gt;<br \/>\n<\/code>\n<\/li>\n<li>with Javascript event logic as per &#8230;<br \/>\n<code><br \/>\n<b><br \/>\n function shortlist() {<br \/>\n   var ccmd=document.URL.split('?')[0].split('#')[0] + '?curl=' + encodeURIComponent('-p') + encodeURIComponent(String.fromCharCode(9)) + encodeURIComponent(document.getElementById('path').title) + encodeURIComponent(String.fromCharCode(9)) + encodeURIComponent('-f') + encodeURIComponent(String.fromCharCode(9)) + encodeURIComponent(document.getElementById('filespec').title);<br \/>\n   var sels=document.getElementsByTagName('select');<br \/>\n   for (var isels=0; isels&lt;sels.length; isels++) {<br \/>\n     if (('' + sels[isels].title) != '') {<br \/>\n       ccmd+=encodeURIComponent(String.fromCharCode(9)) + encodeURIComponent(sels[isels].title);<br \/>\n     }<br \/>\n   }<br \/>\n   location.href=ccmd;<br \/>\n }<\/b><br \/>\n<\/code>\n<\/li>\n<li>feeding off the way we now utilize HTML form element (user) data collection element <i>title<\/i> attributes in conjunction with Javascript functions &#8230;<br \/>\n<code><br \/>\n function selsett(os) {<br \/>\n for (var i=0; i&lt;os.length; i++) {<br \/>\n  if (os.options[i].selected) {<br \/>\n   if (os.id == 'wo') {<br \/>\n    os.title=(os.options[i].title.replace(\/\\ \/g,String.fromCharCode(9)) + String.fromCharCode(9) + document.getElementById('wv').value + String.fromCharCode(9)).replace('  ',' ').replace('  ',' ').replace('  ',' ');<br \/>\n   } else if (os.id == 'ho') {<br \/>\n    os.title=(os.options[i].title.replace(\/\\ \/g,String.fromCharCode(9)) + String.fromCharCode(9) + document.getElementById('hv').value + String.fromCharCode(9)).replace('  ',' ').replace('  ',' ').replace('  ',' ');<br \/>\n   } else {<br \/>\n    os.title=os.options[i].title.replace(\/\\ \/g,String.fromCharCode(9));<br \/>\n   }<br \/>\n  }<br \/>\n }<br \/>\n }<br \/>\n<br \/>\n function sett(os) {<br \/>\n   if (os.id == 'wv') {<br \/>\n    selsett(document.getElementById('wo'));<br \/>\n    os.title='';<br \/>\n   } else if (os.id == 'hv') {<br \/>\n    selsett(document.getElementById('ho'));<br \/>\n    os.title='';<br \/>\n   } else {<br \/>\n    os.title=os.value;<br \/>\n   }<br \/>\n }<br \/>\n<\/code>\n<\/li>\n<li>where the String.fromCharCode(9) (horizontal tab) delimitation used is a hint that &#8220;curl&#8221; might be the &#8220;end game&#8221; here &#8230; huh?! &#8230; well, &#8220;curl&#8221; is called from the command line (or we do it in PHP &#8220;surfing the net&#8221; mode via <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'><i>exec<\/i><\/a>) and it takes as its argument an absolute URL, which as you probably know consists of &#8220;[absoluteURL]?arg1name=arg1value&#038;arg2name=arg2value&#8221; type of arrangement &#8230; Linux\/macOS alert!!! <font size=1>(and we all know the woooooorrrrrllllldd needs more lerts &#8230; but we digress)<\/font> &#8230; in Linux\/macOS &#8220;&#038;&#8221; has that other meaning of &#8220;put command into background&#8221; &#8230; so rather than trying to work out &#8220;curl&#8221; syntax in this scenario we&#8217;ve always used alternative delimitation ideas (hence the tabs) in the one (now far more complex) &#8220;?arg1name=arg1value&#8221; data arrangement &#8230; leading to us &#8230;<\/li>\n<li>recalling &#8220;surfing the net&#8221; with that <b>function shortlist<\/b> ?curl=[complexArg1Value] and on that re-entry use the PHP to &#8230;<br \/>\n<code><br \/>\nif (isset($_GET['curl'])) { \/\/ in surfing the net mode wanting to call a curl mode of use execution<br \/>\n  exec(\"curl \\\"\" . \"HTTP:\/\/\" . $_SERVER['SERVER_NAME'] . \"\" . str_replace(\"~\",\"\",str_replace(\":443~\",\"\",str_replace(\":80~\",\"\",(\":\" . $_SERVER['SERVER_PORT'] . \"~\")))) . \"\" . str_replace(\"find_images_via_size.php\",\"\",explode(\"#\",explode(\"?\",$_SERVER['REQUEST_URI'])[0])[0]) . \"find_images_via_size.php?commandline=\" . urlencode(str_replace(\"+\",\" \",urldecode($_GET['curl']))) . \"\\\"\");<br \/>\n  echo \"&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;Find Images Via Size - RJM Programming - October, 2019&lt;\/title&gt;&lt;meta charset='utf-8'&gt;&lt;\/head&gt;&lt;body&gt;&lt;div&gt;Find&emsp;Images&emsp;Via&emsp;Size&lt;br&gt;&lt;br&gt;RJM&emsp;Programming&emsp;-&emsp;October,&emsp;2019&lt;br&gt;&lt;br&gt;&lt;br&gt;Width&emsp;x&emsp;Height&emsp;File&lt;br&gt;\" . str_replace(\" \",\"&emsp;\",str_replace(\"\\n\",\"&lt;br&gt;\", file_get_contents(\"find_images_via_size.txt\"))) . \"&lt;\/div&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n  exit;<br \/>\n}<br \/>\n<br \/>\nif (isset($_GET['commandline'])) {  \/\/ in curl mode<br \/>\n  $gcl=str_replace(\"+\",\" \",urldecode($_GET['commandline']));<br \/>\n  if (!isset($argc)) {<br \/>\n  if (strpos($gcl, \"\\t\") !== false) {<br \/>\n  $argv=explode(\"\\t\", \"file_images_via_size.php\\t\" . $gcl);<br \/>\n  $argc=sizeof($argv);<br \/>\n  for ($ii=0; $ii&lt;$argc; $ii++) {<br \/>\n    $argv[$ii]=trim($argv[$ii]);    \/\/ join \"command line\" mode of use logic<br \/>\n  }<br \/>\n  valit('','');<br \/>\n  }<br \/>\n  }<br \/>\n}<br \/>\n<\/code><br \/>\n &#8230; rejoin &#8220;command line&#8221; mode of use logic by inventing our own (does not normally exist with &#8220;curl&#8221;) $argv array of size $argc &#8230; and &#8230;\n<\/li>\n<li>you can output Image Dimension report data in that simplified way to the webpage (rather than the command line) and make use of that (use of) &amp;emsp; advice we got from this <a target=_blank href='https:\/\/stackoverflow.com\/questions\/20414504\/how-do-i-replicate-a-t-tab-space-in-html' title='Useful link, thanks'>useful link<\/a> regarding tabstop spacing simulation on a webpage (without using table elements) &#8230; thanks<\/li>\n<\/ul>\n<p> &#8230; adding onto that &#8220;command line&#8221; mode of use &#8220;push&#8221; of yesterday&#8217;s <a title='PHP Image Dimensions Linux and Windows Glob Command Line Tutorial' href='#phpidlwgclt'>PHP Image Dimensions Linux and Windows Glob Command Line Tutorial<\/a>.<\/p>\n<hr>\n<p id='phpidlwgclt'>Previous relevant <a target=_blank title='PHP Image Dimensions Linux and Windows Glob Command Line Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-dimensions-linux-and-windows-glob-command-line-tutorial\/'>PHP Image Dimensions Linux and Windows Glob Command Line 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\/find_images_via_size.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image Dimensions Linux Linux and Windows Glob Command Line Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_file_size_command_line.jpg\" title=\"PHP Image Dimensions Linux and Windows Glob Command Line Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image Dimensions Linux and Windows Glob Command Line Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial' href='#phpidlffasjt'>PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial<\/a> helped out a PHP &#8230;<\/p>\n<ul>\n<li>&#8220;surfing the net&#8221; mode of use &#8230; but what if you are on Windows? (well, today we link up PHP&#8217;s <a target=_blank title='PHP glob() method information' href='http:\/\/php.net\/manual\/en\/function.glob.php'>glob<\/a>&#8216;s organizational skills with its image interrogation <a target=_blank title='PHP getimagesize' href='https:\/\/www.php.net\/manual\/en\/function.getimagesize.php'>getimagesize<\/a> skills to help) &#8230; and as far as &#8230;<\/li>\n<li>&#8220;command line&#8221; mode of use &#8230; yes, that could be useful as a report with brevity &#8230; no links, nor webpages, but still lots of the data of interest in a text Image Dimensions report<\/li>\n<\/ul>\n<p>Differentiating these two different modes of use in PHP?   Pretty simple really &#8230;<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\n  if (isset($argc)) {<br \/>\n     \/\/ do command line mode of use logics here<br \/>\n  } else {<br \/>\n     \/\/ do surfing the net (or perhaps, curl), modes of use here logics here<br \/>\n  }<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p>If this is of interest, take a skeg at <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php---GETME\" title=\"find_images_via_size.php\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php---GETME\" title=\"find_images_via_size.php\">find_images_via_size.php<\/a> that can be downloaded or tried out at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='phpidlffasjt'>Previous relevant <a target=_blank title='PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-dimensions-linux-find-file-awk-sed-javascript-tutorial\/'>PHP Image Dimensions Linux Find File Awk Sed Javascript 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\/find_images_via_size.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/img_dimension_listing_better_gif.jpg\" title=\"PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image Dimensions Linux Find File Awk Sed Javascript Tutorial<\/p><\/div>\n<p>It&#8217;s a little bit funny, <strike>this feeling inside<\/strike>, how yesterday&#8217;s <a title='PHP Image Dimensions Linux Find File Awk Sed UX Tutorial' href='#phpidlffasuxt'>PHP Image Dimensions Linux Find File Awk Sed UX Tutorial<\/a> was about UX (or user experience), what to our eyes very much involves &#8220;front-end&#8221; concepts, yet the vast majority of work done on this remained on the &#8220;server&#8221; side of the software coding ledger.  Even our one tiny foray <font size=1>(via &#8220;Operation 4Ay U Over There, &#8216;guv&#8221;)<\/font> into Javascript &#8220;client land&#8221; we used to set non-default select (dropdown) element values on analyzing posted data we could have handled in &#8220;server land&#8221; by inserting some &#8220;selected&#8221; HTML element attributes.  And so, yesterday, we didn&#8217;t even have a &#8220;script&#8221; tag within a &#8220;head&#8221; tag, which is quite unusual.<\/p>\n<p>Not so today, though, where <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=agVZgVGOnfA'>we unleash<\/a> Javascript in all its glorious &#8220;client side&#8221; partnership with the &#8220;server side&#8221; PHP, as a layer of web application logic for immediately before the user sees the web page, from that time when a &#8220;web browser address bar URL&#8221; equates to Javascript DOM&#8217;s &#8220;document.URL&#8221;, through &#8220;document onload&#8221; event logic and responding to user actions. Today, in this regard, we convert that hardcoded &#8220;x&#8221; between the width column and the height column into a select (dropdown) element initially showing that &#8220;x&#8221; but selectable so that &#8230;<\/p>\n<ul>\n<li>Exif Information<\/li>\n<li>Blog Search<\/li>\n<li>Animated GIF Creation<\/li>\n<\/ul>\n<p> &#8230; &#8220;client facing&#8221; functionalities have been added with <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php--GETME\" title=\"find_images_via_size.php\">today&#8217;s changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php--GETME\" title=\"find_images_via_size.php\">find_images_via_size.php<\/a> that can be downloaded or tried out at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>Please note with <a target=_blank title='Node.js installation download webpage' href='https:\/\/nodejs.org\/en\/download\/'>Node.js<\/a> Javascript is used as a &#8220;server&#8221; language and &#8220;client&#8221; language.  Interesting, huh?!<\/p>\n<hr>\n<p id='phpidlffasuxt'>Previous relevant <a target=_blank title='PHP Image Dimensions Linux Find File Awk Sed UX Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-dimensions-linux-find-file-awk-sed-ux-tutorial\/'>PHP Image Dimensions Linux Find File Awk Sed UX 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\/find_images_via_size.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image Dimensions Linux Find File Awk Sed UX Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/img_dimension_listing_better.jpg\" title=\"PHP Image Dimensions Linux Find File Awk Sed UX Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image Dimensions Linux Find File Awk Sed UX Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial' href='#phpidlffaspt'>PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial<\/a> set the scene for a new approach to an Image by Dimension Size web application idea.   Today we turn our attention to &#8230;<\/p>\n<ol>\n<li><a target=_blank title='User experience information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/User_experience'>user experience<\/a> (ie. UX) functionality improvements &#8230;<\/li>\n<li>user experience fixes for annoyances<\/li>\n<\/ol>\n<p> &#8230; both contributors to the overall viability of a web application project.<\/p>\n<p>What are some examples of this for this project?   We&#8217;d say the offering of several &#8220;sorting of data&#8221; mechanisms falls into the &#8220;improvements&#8221; category.  The moving of the &#8220;form&#8221; back above the fold when there is a report to show is the fix of an annoyance, and, it pans out, an improvement, because we take advantage of this change to &#8230;<\/p>\n<ul>\n<li>make it an optional &#8220;read&#8221; for non-IE and non-Edge users by encasing it in a <a target=_blank title='Reveal postings' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/reveal'>&#8220;reveal star&#8221;<\/a> <a target=_blank title='HTML details tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>details<\/a> tag (and its nested <a target=_blank title='HTML summary tag information from w3schools' href='https:\/\/www.w3schools.com\/tags\/tag_details.asp'>summary<\/a>) HTML element encasing (initially set to &#8220;hide&#8221;) &#8230; as well as &#8230;<\/li>\n<li>start initializing form defaults according to user designations so that the form can also be like a report header helper, to explain the Image Find Parameters of an execution run<\/li>\n<\/ul>\n<p>The emoji hashtag navigation?  Doesn&#8217;t matter either way, but at least brings attention to a navigational offering.<\/p>\n<p>So here&#8217;s the thing.  Am sure you can think of a whole swag of offerings to improve.  It is up to the programmer, or user acceptance test results, to try to imagine improvement ideas and to imagine what might annoy.  On hover (for non-mobile users) over an image link, for example, we faintly show that image full size as a (total) webpage background image.  There might be those who hate any overlay clashes to be annoyed by what we were hoping would be an UX functional improvement.  More assured, we&#8217;d say, are the newly displayed thumbnail images next to the (image) URLs, that when clicked, still go off showing the user the full image in a new (target=_blank) window (or tab &#8230; which is a web browser setting of your choosing, to do with the web browser).   UX considerations are subjective by nature, though you can look around the net and see lots of do&#8217;s and don&#8217;ts talked about ad infinitum with regard to UX.<\/p>\n<p>So, &#8220;UX-wise&#8221; see <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php-GETME\" title=\"find_images_via_size.php\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php-GETME\" title=\"find_images_via_size.php\">find_images_via_size.php<\/a> that can be downloaded or tried out at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<hr>\n<p id='phpidlffaspt'>Previous relevant <a target=_blank title='PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-image-dimensions-linux-find-file-awk-sed-primer-tutorial\/'>PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/img_dimension_listing.jpg\" title=\"PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP Image Dimensions Linux Find File Awk Sed Primer Tutorial<\/p><\/div>\n<p>We&#8217;ve written web applications to list image files via their dimension, based on the incredible <a target=_blank title='ImageMagick command line' href='http:\/\/www.imagemagick.org\/script\/command-line-tools.php'>ImageMagick<\/a>, when we presented the blog post thread ending with <a title='PHP ImageMagick Image Dimensions Sort Tutorial' href='#phpimidst'>PHP ImageMagick Image Dimensions Sort Tutorial<\/a>.  But ImageMagick, alas, does not come out of the box with an operating system, always.  Looking for an image bigger than or equal to a particular dimension yesterday, our online research had us thinking, &#8220;What about a macOS (or Mac OS X) and Linux &#8220;PHP supervises <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> supervises <a target=_blank title='Linux find command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/ufind.htm'>find<\/a> pipes <a target=_blank title='Linux file command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/ufile.htm'>file<\/a> pipes <a target=_blank title='Linux awk command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/uawk.htm'>awk<\/a> pipes <a target=_blank title='Linux sed command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/used.htm'>sed<\/a>&#8221; solution (inspired by <a target=_blank title='Useful link, thanks' href='https:\/\/unix.stackexchange.com\/questions\/52906\/find-images-by-size-find-file-awk'>this useful link<\/a>, thanks), relying on not much more than having a Unix (ie. Linux) shell?&#8221;   Sounds good?!  And why, pray tell, when macOS has the Finder desktop app?   Well, remarkably, here with macOS Mojave, we think we&#8217;ve seen better times showing image dimensions.  But even if we have missed something, we&#8217;re looking for &#8230;<\/p>\n<ul>\n<li>a report &#8230; ideally &#8230;<\/li>\n<li>tabularized &#8230; ideally &#8230;<\/li>\n<li>linkable to the images themselves &#8230; and user interactive tailorable as far as being able to &#8230;<\/li>\n<li>define width and height operator and value constraints (eg. width >= 567 and height < 751)<\/li>\n<\/ul>\n<p> &#8230; which is all beyond a GUI like macOS&#8217;s Finder desktop app.  But it isn&#8217;t beyond our &#8220;PHP supervises <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'>exec<\/a> supervises <a target=_blank title='Linux find command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/ufind.htm'>find<\/a> pipes <a target=_blank title='Linux file command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/ufile.htm'>file<\/a> pipes <a target=_blank title='Linux awk command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/uawk.htm'>awk<\/a> pipes <a target=_blank title='Linux sed command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/used.htm'>sed<\/a>&#8221; solution called <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php_GETME\" title=\"find_images_via_size.php\">find_images_via_size.php<\/a> that can be downloaded or tried out at this <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/find_images_via_size.php\" title=\"Click picture\">live run<\/a> link.<\/p>\n<p>We&#8217;ve long admired unix&#8217;s (ie. Linux&#8217;s) sed but our admiration grew with today&#8217;s project.  It truly is a star of a piece of software functionality.  The modesty of &#8220;man sed&#8221;&#8216;s &#8220;sed &#8212; stream editor&#8221; heading belies the power of the combination &#8230;<\/p>\n<ul>\n<li>&#8220;stream&#8221; being any text piped to it &#8230; and &#8230;<\/li>\n<li>&#8220;editor&#8221; which covers a lot more than just a &#8230;\n<ol>\n<li>&#8220;substituting&#8221; tool &#8230; when you consider its &#8220;regex&#8221; type syntax particularly featuring its &#8220;group regex&#8221; syntax today allowing it to be &#8230;<\/li>\n<li>&#8220;expanding and repeating of data&#8221; tool &#8230; eg. <font color=darkgray>find occurrence 1<\/font>, <font color=pink>replace with find occurrence (or <a target=_blank title='Useful link, thanks' href='https:\/\/www.gnu.org\/software\/sed\/manual\/html_node\/Back_002dreferences-and-Subexpressions.html'>back-reference<\/a>) 1<\/font>, <font color=lightblue>find occurrence 2<\/font>, <font color=lightgreen>replace with find occurrence (or <a target=_blank title='Useful link, thanks' href='https:\/\/www.gnu.org\/software\/sed\/manual\/html_node\/Back_002dreferences-and-Subexpressions.html'>back-reference<\/a>) 2<\/font>,<br \/>\n<code><br \/>\n$ echo \"<font color=darkgray> <\/font><font color=pink>in Spain<\/font> \" | sed 's\/<font color=darkgray>\\(\\ \\)<\/font><font color=pink>\\(in\\ [^\\ ]*\\)<\/font>\/The rain<font color=lightblue>\\1<\/font><font color=lightgreen>\\2<\/font><font color=lightblue>\\1<\/font>falls mainly on the plain.\/g'<br \/>\nThe rain<font color=lightblue> <\/font><font color=lightgreen>in Spain<\/font><font color=lightblue> <\/font>falls mainly on the plain.<br \/>\n$<br \/>\n<\/code>\n<\/ol>\n<\/li>\n<\/ul>\n<p>Add the incredible Linux (and macOS command line) find and file and awk into the mix and behind the scenes of our PHP web application and PHP could have fed exec <font size=1>(after a quiche entree)<\/font> &#8230; for the example of our <a target=_blank title='MAMP' href='http:\/\/www.mamp.info'>MAMP<\/a> document root HTTP:\/\/localhost:888\/find_images_via_size.php address bar URL &#8230;<\/p>\n<p><code><br \/>\ncd <font color=blue>\/Applications\/MAMP\/htdocs<\/font>; find <font color=red>.<\/font> -name '<font color=red>*.*g<\/font>' -exec file {} \\; | sed 's\/\\(<font color=red>.*g<\/font>\\): .* \\([0-9]* x [0-9]*\\).*\/<font color=orange>\\2<\/font> <font color=orange>\\1<\/font>\/' | awk 'int(<font color=gray>$1<\/font>) <font color=red>&gt;<\/font> <font color=red>500<\/font> && int(<font color=gray>$3<\/font>) <font color=red>&gt;<\/font> <font color=red>500<\/font> {print}' | sed 's\/\\(\\ \\)\\(\\.[^\\&lt;]*\\)\/\\ \\&lt;a target=_blank title=\"<font color=blue>\\\/Applications\\\/MAMP\\\/htdocs<\/font>\\\/<font color=brown>\\2<\/font>\" href=\"<font color=brown>\\2<\/font>\"\\&gt;<font color=brown>\\2<\/font>\\&lt;\\\/a\\&gt;\/g'<br \/>\n<\/code><\/p>\n<p> &#8230; resulting in (the first five lines of result set) &#8230;<\/p>\n<p><code><br \/>\n<font color=lightgreen>625<\/font> <font color=lightblue>x<\/font> <font color=lightgreen>896<\/font><font color=purple> &lt;a target=_blank title=<\/font>\"<font color=blue>\/Applications\/MAMP\/htdocs<\/font>\/<font color=green>.\/HTMLCSS\/MIDI.js-master\/examples\/images\/tuna.png<\/font>\" href=\"<font color=green>.\/HTMLCSS\/MIDI.js-master\/examples\/images\/tuna.png<\/font>\"&gt;<font color=green>.\/HTMLCSS\/MIDI.js-master\/examples\/images\/tuna.png<\/font><font color=purple>&lt;\/a&gt;<\/font><br \/>\n<font color=lightgreen>2880<\/font> <font color=lightblue>x<\/font> <font color=lightgreen>1800<\/font><font color=purple> &lt;a target=_blank title=<\/font>\"<font color=blue>\/Applications\/MAMP\/htdocs<\/font>\/<font color=green>.\/HTMLCSS\/web_audio.png<\/font>\" href=\"<font color=green>.\/HTMLCSS\/web_audio.png<\/font>\"&gt;.\/HTMLCSS\/web_audio.png<\/font><font color=purple>&lt;\/a&gt;<\/font><br \/>\n<font color=lightgreen>800<\/font> <font color=lightblue>x<\/font> <font color=lightgreen>563<\/font><font color=purple> &lt;a target=_blank title=<\/font>\"<font color=blue>\/Applications\/MAMP\/htdocs<\/font>\/<font color=green>.\/vmcommerce\/administrator\/templates\/hathor\/template_preview.png<\/font>\" href=\"<font color=green>.\/vmcommerce\/administrator\/templates\/hathor\/template_preview.png<\/font>\"&gt;<font color=green>.\/vmcommerce\/administrator\/templates\/hathor\/template_preview.png<\/font><font color=purple>&lt;\/a&gt;<\/font><br \/>\n<font color=lightgreen>800<\/font> <font color=lightblue>x<\/font> <font color=lightgreen>767<\/font><font color=purple> &lt;a target=_blank title=<\/font>\"<font color=blue>\/Applications\/MAMP\/htdocs<\/font>\/<font color=green>.\/vmcommerce\/templates\/atomic\/template_preview.png<\/font>\" href=\"<font color=green>.\/vmcommerce\/templates\/atomic\/template_preview.png<\/font>\"&gt;<font color=green>.\/vmcommerce\/templates\/atomic\/template_preview.png<\/font><font color=purple>&lt;\/a&gt;<\/font><br \/>\n<font color=lightgreen>2880<\/font> <font color=lightblue>x<\/font> <font color=lightgreen>1800<\/font><font color=purple> &lt;a target=_blank title=<\/font>\"<font color=blue>\/Applications\/MAMP\/htdocs<\/font>\/<font color=green>.\/stopPropagation_preventDefault.png<\/font>\" href=\"<font color=green>.\/stopPropagation_preventDefault.png<\/font>\"&gt;<font color=green>.\/stopPropagation_preventDefault.png<\/font><font color=purple>&lt;\/a&gt;<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; the parts thereof gleaned via a combination of <font color=red>user interactive HTML input textbox values<\/font> and PHP <font color=blue>dirname(__FILE__)<\/font> and Linux awk <font color=gray>space delimiter arguments<\/font> and Linux <font color=green>find data<\/font> and Linux <font color=lightgreen>file data<\/font> and Linux <font color=lightblue>sed &#8220;x&#8221; inclusions<\/font> and Linux <font color=purple>sed edits (within as well, regarding those <font color=orange>file<\/font> and <font color=brown>awk<\/font> &#8220;replace with find occurrence&#8221; usages, but others override)<\/font>.<\/p>\n<hr>\n<p id='phpimidst'>Previous relevant <a target=_blank title='PHP ImageMagick Image Dimensions Sort Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/php-imagemagick-image-dimensions-sort-tutorial\/'>PHP ImageMagick Image Dimensions Sort Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/image_dimensions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP ImageMagick Image Dimensions Sort Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/image_dimensions_sort.jpg\" title=\"PHP ImageMagick Image Dimensions Sort Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP ImageMagick Image Dimensions Sort Tutorial<\/p><\/div>\n<p>It&#8217;s natural for people to try to introduce order into their world.  No matter what you think of the goings on in the world, you can &#8220;retire&#8221; into that &#8220;cushioned world&#8221; of I.T. and create your own order.  The most common form of &#8220;order&#8221; used, we dare to guess, in the I.T. world is to sort data.  Our data we started with yesterday&#8217;s <a title='PHP ImageMagick Image Dimensions Primer Tutorial' href='#phpimidpt'>PHP ImageMagick Image Dimensions Primer Tutorial<\/a> in the form of image URLs and their dimensions (plus some other fields) presented in a table are a case in point where a lot of people would be quick to point out &#8220;that it would be good to sort by width&#8221; and those who would &#8220;do a triple pike with a double somersault to see data sorted by height&#8221;.<\/p>\n<p>If you are in charge of the data that forms your data, that is easy to arrange.  But if you are the &#8220;second source&#8221; you need to work out your own ways to manipulate the data to be able to sort it usefully.  We found these manipulations still only had to call on &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Linux awk command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/uawk.htm'>awk<\/a> # command line processor repeats column field data<\/li>\n<li><a target=_blank title='Linux sed command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/used.htm'>sed<\/a> # command line editor most associated with pipe commands<\/li>\n<\/ul>\n<p> &#8230; with the focus, today, on <i>awk<\/i>&#8216;s String functionality &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Linux awk substr command information' href='https:\/\/www.gnu.org\/software\/gawk\/manual\/html_node\/String-Functions.html'>substr<\/a> # substring<\/li>\n<li><a target=_blank title='Linux awk gsub command information' href='https:\/\/www.gnu.org\/software\/gawk\/manual\/html_node\/String-Functions.html'>gsub<\/a> # global replacement<\/li>\n<li><a target=_blank title='Linux awk length command information' href='https:\/\/www.gnu.org\/software\/gawk\/manual\/html_node\/String-Functions.html'>length<\/a> # length of string<\/li>\n<\/ul>\n<p> &#8230; preparing the ground for the Linux command &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Linux sort command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/usort.htm'>sort<\/a> # sort with its -k -t -n -r switches<\/li>\n<\/ul>\n<p> &#8230; enabling the useful sorting of image URL filespec data presented in a table &#8230; order indeed!<\/p>\n<p>You can retry this out for yourself at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/image_dimensions.php\" title=\"Click picture\">live run<\/a> link with its underlying serverside PHP code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/image_dimensions.php-GETME\" title=\"image_dimensions.php\">image_dimensions.php<\/a> and changed in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/image_dimensions.php-GETME\" title=\"image_dimensions.php\">this way<\/a> as you wish.<\/p>\n<hr>\n<p id='phpimidpt'>Previous relevant <a target=_blank title='PHP ImageMagick Image Dimensions Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-imagemagick-image-dimensions-primer-tutorial\/'>PHP ImageMagick Image Dimensions 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\/image_dimensions.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"PHP ImageMagick Image Dimensions Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/image_dimensions.jpg\" title=\"PHP ImageMagick Image Dimensions Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">PHP ImageMagick Image Dimensions Primer Tutorial<\/p><\/div>\n<p>We revisit the talents of the brilliant <a target=_blank title='ImageMagick' href='http:\/\/www.imagemagick.org'>ImageMagick<\/a>&#8216;s <i>Identify<\/i> command featuring, last, in <a title='Location Services iPad Camera Geolocation Png Metadata Tutorial' href='#lspcgpmt'>Location Services iPad Camera Geolocation Png Metadata Tutorial<\/a> to start down the road of a <i>web server image information presenter<\/i> web application.<\/p>\n<p>With ImageMagick command line &#8230;<\/p>\n<p><code><br \/>\nidentify [webServerImageFileSpec]<br \/>\n<\/code><\/p>\n<p> &#8230; sums up what we build a web application around, having a PHP shell use its <a target=_blank title='PHP exec() method information' href='http:\/\/php.net\/manual\/en\/function.exec.php'><i>exec<\/i><\/a> method to filter the information through (Linux command line) &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Linux awk command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/uawk.htm'>awk<\/a> # command line processor repeats column field data<\/li>\n<li><a target=_blank title='Linux sed command information from computerhope' href='http:\/\/www.computerhope.com\/unix\/used.htm'>sed<\/a> # command line editor most associated with pipe commands<\/li>\n<\/ul>\n<p> &#8230; to result in the table contents of our image (specification) table in our web application today.<\/p>\n<p>You can try this out for yourself at today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/image_dimensions.php\" title=\"Click picture\">live run<\/a> link with its underlying serverside PHP code you could call <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/image_dimensions.php_GETME\" title=\"image_dimensions.php\">image_dimensions.php<\/a> as you wish.<\/p>\n<hr>\n<p id='lspcgpmt'>Previous relevant <a target=_blank title='Location Services iPad Camera Geolocation Png Metadata Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/location-services-ipad-camera-geolocation-png-metadata-tutorial\/'>Location Services iPad Camera Geolocation Png Metadata 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\/read_exif_off_image_rotate.php?animg=http:\/\/www.rjmprogramming.com.au\/IMG_0550.PNG\"><img decoding=\"async\"   style=\"float:left; border: 15px solid pink;\" alt=\"Location Services iPad Camera Geolocation Png Metadata Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif.JPG\" title=\"Location Services iPad Camera Geolocation Png Metadata Tutorial\" \/><\/a><p class=\"wp-caption-text\">Location Services iPad Camera Geolocation Png Metadata Tutorial<\/p><\/div>\n<p>Today&#8217;s &#8220;foot further into the water&#8221; progress building on <a title='Location Services iPad Camera Geolocation Jpeg Exif Tutorial' href='#lsicgjet'>Location Services iPad Camera Geolocation Jpeg Exif Tutorial<\/a>, as shown below, has a posting title that includes the word &#8220;Geolocation&#8221;, but alas, we&#8217;ve found with PNG files coming off our iPad that Geolocation or Geotagging information is lost, unlike our recent iPad JPEG files, and so our preference for the latter has become stronger.  We discuss this also at WordPress 4.1.1&#8217;s <a target=_blank title='Location Services iPad Camera Geolocation Png Metadata Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/location-services-ipad-camera-geolocation-png-metadata-tutorial\/'>Location Services iPad Camera Geolocation Png Metadata Tutorial<\/a>.  However, there are other interesting pieces of information regarding an image that don&#8217;t involve the &#8220;where&#8221; of life, and so we find this topic interesting even so, and hope you do too.<\/p>\n<p>As with so many issues in Information Technology, there are often many approaches to solving problems, and we took the first approach of just some of the possibilities for approaches to PNG metadata processing, listed below &#8230;<\/p>\n<ul>\n<li><a target=_blank title='ImageMagick command line' href='http:\/\/www.imagemagick.org\/script\/command-line-tools.php'>ImageMagick command line<\/a> functionality via &#8220;identify&#8221; command<\/li>\n<li><a target=_blank href='http:\/\/php.net\/manual\/en\/imagick.getimageproperties.php' title='Imagick class'>Imagick class<\/a> in PHP<\/li>\n<li><a target=_blank title=ExifTool href='http:\/\/www.sno.phy.queensu.ca\/%7Ephil\/exiftool\/index.html'>ExifTool<\/a> third party solution in Perl<\/li>\n<\/ul>\n<p> &#8230; and so, once again, we find useful work for the wonderful ImageMagick software product for our purposes.  As we say, our foot is just further in the water, and there is more analysis and testing we feel necessary here, but hope this helps you out or is a source of ideas for you.<\/p>\n<p>We leave you with the reworked <a target=_blank title='read_exif_off_image_rotate.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php---GETME'>read_exif_off_image_rotate.php<\/a>, changed <a target=_blank title='read_exif_off_image_rotate.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php---GETME'>this way<\/a>, that has this corresponding new <a target=_blank title='Live Run' href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php?animg=http:\/\/www.rjmprogramming.com.au\/IMG_0550.PNG'>live run<\/a>.<\/p>\n<hr \/>\n<p id='lsicgjet'>Previous relevant <a target=_blank title='Location Services iPad Camera Geolocation Jpeg Exif Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/location-services-iPad-camera-geolocation-JPEG-exif-tutorial\/'>Location Services iPad Camera Geolocation Jpeg Exif 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\/read_exif_off_image_rotate.php?image=http:\/\/www.rjmprogramming.com.au\/IMG_0536.JPG\"><img decoding=\"async\"   style=\"float:left; border: 15px solid pink;\" alt=\"Location Services iPad Camera Geolocation Jpeg Exif Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/IMG_0558.PNG\" title=\"Location Services iPad Camera Geolocation Jpeg Exif Tutorial\" \/><\/a><p class=\"wp-caption-text\">Location Services iPad Camera Geolocation Jpeg Exif Tutorial<\/p><\/div>\n<p>Maybe you were here when we left off with <a title='Location Services iPad Camera Geolocation Primer Tutorial' href='#lsicgpt'>Location Services iPad Camera Geolocation Primer Tutorial<\/a> as shown below &#8230;<\/p>\n<ul>\n<li>amazed at the power of mobile devices, specifically an iPad, with their Camera apps and Geolocation data &#8230; and\/or &#8230;<\/li>\n<li>not knowing enough &#8230; and still not &#8230; about when the iPad chooses to output the photograph in *.PNG or *.JPG &#8230; ie. the blurb below about meta data versus exif data &#8230; and &#8230;<\/li>\n<li>vowing to be like Fu Manchu &#8230; so here we are\n<\/ul>\n<p>Okay, you might want to read more about that iPad decision regarding *.PNG versus *.JPG, and you may want to start <a target=_blank title='PNG vs JPG on iPad Camera' href='https:\/\/discussions.apple.com\/thread\/4475996?start=0&#038;tstart=0'>here<\/a>, but in any case, with our fish photographs from that day we got a mix of &#8230;<\/p>\n<ul>\n<li>JPG<\/li>\n<li>PNG<\/li>\n<\/ul>\n<p> &#8230; and as far as teeing into Geolocation (or <a target=_blank title='Geotagging information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Geotagging'>Geotagging<\/a>) data goes we, so far, much prefer JPG, because we can use PHP exif methods, and today&#8217;s tutorial is about that, building on what we did at <a target=_blank title='PHP Exif Image Information Rotation Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/php-exif-image-information-rotation-tutorial\/'>PHP Exif Image Information Rotation Tutorial<\/a>.  As far as the PNG photos go &#8230; well, there&#8217;s more to do regarding metadata considerations, and we haven&#8217;t given up on that &#8230; but that is for another day.  In the meantime, enjoy the reworked <a target=_blank title='read_exif_off_image_rotate.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php--GETME'>read_exif_off_image_rotate.php<\/a>, changed <a target=_blank title='read_exif_off_image_rotate.php' href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php--GETME'>this way<\/a>, that has this corresponding new <a target=_blank title='Live Run' href='http:\/\/www.rjmprogramming.com.au\/PHP\/read_exif_off_image_rotate.php?image=http:\/\/www.rjmprogramming.com.au\/IMG_0536.JPG'>live run<\/a> link to show that GPS data we haven&#8217;t seen up until the fish photographs, and interpreting the exif data now, means we can display a Google Chart Map Chart &#8230;<\/p>\n<p><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Location Services iPad Camera Geolocation Jpeg Exif Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/IMG_0559.PNG\" title=\"Location Services iPad Camera Geolocation Jpeg Exif Tutorial\" \/><\/p>\n<p> &#8230; showing the Geolocation context of where and when, and even how high up, this photograph was taken.  Cute, huh?!<\/p>\n<hr \/>\n<p id='lsicgpt'>Previous relevant <a target=_blank title='Location Services iPad Camera Geolocation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/location-services-ipad-camera-geolocation-primer-tutorial\/'>Location Services iPad Camera Geolocation 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\/IMG_0548.PNG\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Location Services iPad Camera Geolocation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/IMG_0548.PNG\" title=\"Location Services iPad Camera Geolocation Primer Tutorial\" \/><\/a><p class=\"wp-caption-text\">Location Services iPad Camera Geolocation Primer Tutorial<\/p><\/div>\n<p>We had occasion to read <a target=_blank title='Resetting Location Services Google search information' href='https:\/\/www.google.com.au\/search?q=stackoverflow+resetting+location+services&#038;ie=utf-8&#038;oe=utf-8&#038;client=firefox-b-ab&#038;gfe_rd=cr&#038;ei=RCUMWLfaBKvr8Ae04ZewBg#q=resetting+location+services'>here<\/a> about resetting <a target=_blank title='iOS Location Services information from Apple' href='https:\/\/support.apple.com\/en-au\/HT203033'>Location Services<\/a> on an iPad &#8230; which, we need to say, you&#8217;d only read about and contemplate if something you&#8217;ve done has stopped a Geolocation thing you wanted to happen to no longer happen and you&#8217;ve ruled out tweaks to Location Service individual app settings with regard to this  (and you may have been in on the discussion we had with some time back with <a target=_blank title='Location Services iPad Battery Loss Issue Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/location-services-ipad-battery-loss-issue-tutorial\/'>Location Services iPad Battery Loss Issue Tutorial<\/a>) &#8230; and the result of doing this opened up the iPad&#8217;s Camera app for permission for Location Services to record <a target=_blank title='Geolocation information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Geolocation'>Geolocation<\/a> data, and it looks like, time, information on the photographs you take.  We also explore this subject at WordPress 4.1.1&#8217;s <a target=_blank title='Location Services iPad Camera Geolocation Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/location-services-ipad-camera-geolocation-primer-tutorial\/'>Location Services iPad Camera Geolocation Primer Tutorial<\/a>.  Presumably, this happens in the photograph&#8217;s <a target=_blank title='Exif information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Exif'>exif<\/a> data, perhaps (am not promising, might pan out to be metadata) &#8230; which interests us as well, and we&#8217;ll go into that more soon.<\/p>\n<p>So we used this functionality, as well as zooming in on some fish in our pond for today&#8217;s digital photography <a target=_blank title='Mindfulness' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mindfulness'>sojourn<\/a>.  Maybe seeing fish is a source of <a target=_blank title='Mindfulness information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Mindfulness'>mindfulness<\/a> &#8230;<\/p>\n<p><img src='http:\/\/www.rjmprogramming.com.au\/IMG_0550.PNG' title='Fish'><\/img><\/p>\n<p><iframe style='width:100%;' src='http:\/\/www.rjmprogramming.com.au\/spec_img.php?imgurls=http:\/\/www.rjmprogramming.com.au\/IMG_054*.JPG,http:\/\/www.rjmprogramming.com.au\/IMG_053*.JPG' title='Glob img spec'><\/iframe><\/p>\n<p> &#8230; for you, as it seems to help for me?<\/p>\n<p>The Geolocation aspects are great, as you can imagine, for helping document a trip, in pictures, even well after the event, if you can get the context of where you are when a photograph is taken.<\/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='#d25891' onclick='var dv=document.getElementById(\"d25891\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ipad\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25891' 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='#d25966' onclick='var dv=document.getElementById(\"d25966\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/photography\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d25966' 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='#d26059' onclick='var dv=document.getElementById(\"d26059\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/ImageMagick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d26059' 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='#d33778' onclick='var dv=document.getElementById(\"d33778\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33778' 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='#d33800' onclick='var dv=document.getElementById(\"d33800\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sort\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d33800' 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='#d46645' onclick='var dv=document.getElementById(\"d46645\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sed\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46645' 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='#d46676' onclick='var dv=document.getElementById(\"d46676\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/user-experience\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46676' 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='#d46680' onclick='var dv=document.getElementById(\"d46680\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/javascript\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46680' 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='#d46690' onclick='var dv=document.getElementById(\"d46690\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/glob\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46690' 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='#d46700' onclick='var dv=document.getElementById(\"d46700\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/curl\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d46700' 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='#d54058' onclick='var dv=document.getElementById(\"d54058\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/preview\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d54058' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Another web application candidate we like for &#8220;preview&#8221; possibilities is that of PHP Image Dimensions Linux and Windows Glob Curl Tutorial. Adding to Text to Emoji Preview Tutorial&#8216;s &#8230; yesterday&#8217;s work HTML iframe destination was populated via some HTML via &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/php-image-dimensions-linux-and-windows-glob-preview-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":[327,400,452,1615,587,590,673,860,1631,1812,871,932,983,997,1200,3565,1319],"class_list":["post-54058","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-did-you-know","tag-event","tag-form","tag-glob","tag-iframe","tag-image","tag-keyboard","tag-onblur","tag-onchange","tag-onkeyup","tag-onmouseover","tag-php","tag-preview","tag-programming","tag-stop-press","tag-target","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54058"}],"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=54058"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54058\/revisions"}],"predecessor-version":[{"id":54375,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/54058\/revisions\/54375"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=54058"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=54058"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=54058"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}