Browsing articles tagged with " image"
Mar 14, 2009

Something I Probably Should Have Thought About [Gmail Pictures]

gmail-logoThis is actually pretty stupid of me to do this, but I have to laugh at it. At the end of January, I was forwarded some information I was expected to post on a web site I administer. After sitting on it for awhile, I simply copied the information from the email, and pasted it into the WordPress visual editor. The email  contained a photo which, to my surprise, appeared in the post perfectly formatted. Apparently, I thought nothing of this.

Today, I went back to edit the page because I noticed a typo. Often, when you go to edit a page or post in WordPress, the HTML of the content will appear briefly before the TinyMCE visual editor has a chance to load. So, during that half-second, something in the code caught my eye; something about the image. I checked it out, and it seemed that all this time, the photo was being called from mail.google.com. I thought that couldn’t be right; Google isn’t going to play photo host through their Gmail system. But, the picture was there in the editor and the live page. But, wait a minute… I loaded the page in Internet Explorer (I had been using Firefox), and the image was broken. The problem? Whenever I edited or visited the page, I was also logged into Gmail with the same account that the image came from, so the image loaded because Firefox was authenticated while Internet Explorer wouldn’t be.

I should have known better. When you copy and paste stuff on the web (like web-based email), your browser is actually copying the code behind the content you’ve selected. If the image had already come from another web site like Flickr or Picasa, it wouldn’t have been a problem. But, anyway… another day, another lesson learned. :-)

Mar 10, 2009

A Slick Automatic Random Image Rotator Script [Random Picture]

I’ve had this post in the drafts bin for awhile now, I’m just going to finish off it’s miserable existence and push it out into the cold, untamed wilderness of the Internets.

Matt Mullenweg, (of Automattic and WordPress fame), wrote a random image script that fixed a problem I was having building a site about a year ago. The wonderful trick with his random method is that it calls a PHP file which then serves the image by manually writing the file headers to make the browser think it’s calling up an image. This is especially helpful when trying to achieve an image rotation in conjunction with a CSS layout. Normally, random image scripts will place a random image tag (rather, a random value for img=)in the page with a specified image file from a list when the page is parsed. But, if you’re using CSS to serve the images (say, as a background, or header), then that won’t work in CSS since the browser/server is not parsing CSS, but merely reading. So, what this script does is allow you to put a reference to a single PHP file in the CSS (or anywhere else). It’s, then, that PHP file that selects the random image and serves it up to the browser.

The best part about this script is that you can drop a new image in the specified directory, and it’s automatically included in the mix! No need to edit the script every time!

One problem I found, though, is because the CSS makes a call to a PHP file, the browser will call up the cached version of that file until expiration, or forced refresh. (This doesn’t seem to be a problem if the call is being made from another PHP, HTML – or otherwise- file) Since, the PHP file never changes (according to the browser) it’ll likely not be as “random” as you’d like. The result is the same image loading over and over. To overcome this, I added a few lines to the PHP file to include the file header of the image that’s returned to the browser:
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");

Now, hopefully, the browser will not cache the file at all. But, if it does, the expiration date is set to July 26, 1997. So, the next time the browser loads the page, since the file seems horribly out-of-date, it’ll load the file again.

Below,  I will list the code I have deployed on a live site where it works quite wonderfully. Though, now that I go back and look at it… it’s not very similar to Matt’s script. Huh… I told you this was an oldie. I’m not sure where I got this script, or if I modified it that heavily, but at any rate, here are two random image scripts that work similarly. Perhaps at some point I’ll merge the two different scripts because it seems that Matt’s version is more up-to-date, and uses the more “random” and lightweight “mt_rand” PHP operation.

Script I’m using:
// Modify the following line before using this script
$folder = ".";

$fileList = array();
$handle = opendir($folder);
while (false !== ($file = readdir($handle) ) ) {
if ( substr($file, -4) == ".gif" || substr($file, -4) == ".jpg" ) {
$fileList[count($fileList)] = $file;
}
}
closedir($handle);
$randNum = rand( 0, (sizeOf($fileList) -1) );
if ( substr($fileList[$randNum], -4) == ".gif" ) {
header ("Content-type: image/gif");
} elseif ( substr($fileList[$randNum], -4) == ".jpg" ) {
header ("Content-type: image/jpeg");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header("Cache-Control: no-cache");
header("Pragma: no-cache");
}
readfile($fileList[$randNum]);
?>

Matt’s Random Image Script.

To use, just make a call to the php file like you would any image either in a PHP/HTML/CSS/what-have-you page.

(Photo by David Asch)