Published in Web Development on Thursday, August 12th, 2004
Putting a custom 404 script to work behind the scenes to help find broken images on your site.
While monkeying around with an error document for a clients site, I accidentally discovered a neat solution to a problem we were having. While rather specific to the situation, I thought I'd post it up here as maybe someone could extend it in other directions, or maybe there are other ways to solve the issue we were having. Please, feel free to brainstorm or share ideas in the comments...
The client in question has roughly 600 images that are used on various pages within their website. They have in house staff that prep all of the images, thumbnails and larger versions. Image names are entered into their in-house database app, and the db and image files are uploaded/updated nightly.
As should be expected in such situations, sometimes either the thumbnail or large versions are mistakenly not created, or files are mis-named between the actual image and the value that they record in the database. This leads to problems in the form of missing images on their website.
The little trick involved here is quite simple, and relies on the fact that the missing image results in a 404 - not found error. By using a custom error document (in our case php driven - for more on error docs, perhaps start with The Great Custom 404 Page Adventure) and checking the $_SERVER['REQUEST_URI'], we are able to check if the request was from the image folder, and if so record the name of the missing image in a database.
The kicker of this is that a list of broken images is built up and stored in the db as users browse the site. We pass on the list to the client and they clean up the mess. Quick and effective.
Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:
I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.
The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.
Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..
Comments and Feedback
Your custom error document could even use some output buffering, save the missing image details into a database, flush the buffer, then send a JPEG or GIF header and write out a pre-prepared (or specially generated) "missing" image, so the page isn't left with a hole. Maybe a grey background with "image temporarily offline" written across it. Elegant and useful...
You could improve this by having your system automatically create missing thumbnails on-the-fly using something like Image Magick (where possible).
Hey good thinking. That looks like an effective solution, especially with the above mentioned additions. Now, what I really want to know is, can you create a 404 page that'll make us coffee and bagels?
Low-carb bagels, that is.
No way. Enough with that Atkins crap. Get some excercise!
Perhaps you could take it one step further, and use the missing image name to generate a set of search results from the image folder? That way if someone accidentally mistyped an image name your search results might help them find what they were looking for (or another interesting image).
Of course, for some sites this would be overkill, it does depend upon what those images are - and how they are named. It also requires a nice search function, but that should be easy.
Talking about coffee & bagel 404 pages, I was asked to modify one client's website and found that every dynamic page was generated from a 404 page error - the designer thought it was cute to use multiple nested imaginary folder names, but then only interpreted the last part of the URL in order to get the identify of the data the user actually wanted. This led to maintenance being very cumbersome.