How to replace missing images with default image

Reply

Join Date: Nov 2006
Posts: 9
Reputation: ultranet is an unknown quantity at this point 
Solved Threads: 0
ultranet ultranet is offline Offline
Newbie Poster

How to replace missing images with default image

 
0
  #1
Jan 2nd, 2007
Is there a way to detect missing images and redirect them to a static image?

Basically if I had an image that I was displaying from a different site (with permission), and that image were removed, is there a way I can default that image to a default .gif? I have tried PHP getimagesize, but to do that multiple times per page REALLY slowed things down.

Is there a better way? The only other thing I could think of was to create a background image of the default gif, load the images on top of the background, and use blank alt text so that if the image I'm trying to load doesn't exist, just the background default image will show, but this won't work very well, as sometimes the background image would show through as the size of the images are variable.

Thanks in advance
Reply With Quote Quick reply to this message  
Join Date: Sep 2006
Posts: 44
Reputation: MCP is an unknown quantity at this point 
Solved Threads: 3
MCP MCP is offline Offline
Light Poster

Re: How to replace missing images with default image

 
0
  #2
Jan 2nd, 2007
Maybe use something in javascript along the lines of:
  1. function validateImage(url){
  2. var img = new Image();
  3. img.src = url;
  4. return img.height>0;
  5. }
which should return true if the image exists (i.e. height is greater than 0). This might fail if the image takes time to load, so test a lot. You might be able to mitigate this by running your validation function using the body onload event. And in this case, you should be able to avoid the image loading lag, because your browser would have cached the image and the height would be readily available. Hmm, so something like:
  1. function replaceMissingImages(){
  2. for (var i=0; i<document.images.length; i++){
  3. img = new Image();
  4. img.src = document.images[i].src;
  5. if (img.height == 0)
  6. document.images[i].src = 'mydefault.jpg';
  7. }
  8. }
Alternatively, you can do an XMLHTTPRequest to the image, to get the return code (I think you can use some kind of HTTP HEAD instruction to avoid actually requesting/retrieving the entire image). 404 would indicate a missing picture, 200 it's good, 304 it's not modified if you use the right headers, etc.. There are plenty of pages where they have these codes available..
Reply With Quote Quick reply to this message  
Join Date: Nov 2006
Posts: 9
Reputation: ultranet is an unknown quantity at this point 
Solved Threads: 0
ultranet ultranet is offline Offline
Newbie Poster

Re: How to replace missing images with default image

 
0
  #3
Jan 3rd, 2007
Thanks a lot for information code, I got it right now:lol:
Reply With Quote Quick reply to this message  
Join Date: Nov 2009
Posts: 1
Reputation: romeo0830 is an unknown quantity at this point 
Solved Threads: 0
romeo0830 romeo0830 is offline Offline
Newbie Poster

It is working however?

 
0
  #4
6 Days Ago
The function you stated is working, i put a little twist on it to get it to work..
  1. function replaceMissingImages(){
  2. for (var i=0; i<document.images.length; i++){
  3. img = new Image();
  4. img.src = document.images[i].src;
  5. if (img.height == 0) {
  6. document.images[i].src = '/images/no-image.jpg';
  7. }
1 problem as you stated the delay of the images loading is telling the script hey these images are not here and we need to replace them before giving the image time to load.. How can I add a delay to the function so it doesnt start until the end of the page loading?
Last edited by nav33n; 6 Days Ago at 11:46 am. Reason: Use [code] tags to wrap your code for better readability.
Reply With Quote Quick reply to this message  
Join Date: Oct 2008
Posts: 61
Reputation: Manuz is an unknown quantity at this point 
Solved Threads: 8
Manuz's Avatar
Manuz Manuz is offline Offline
Junior Poster in Training
 
0
  #5
6 Days Ago
Try to call the function at the end of the script.
  1. <?php "<script type="text/javascript">replaceMissingImages()</script>"; ?>
Sharing Knowledge Is Better Than Any Other Thingz
Reply With Quote Quick reply to this message  
Join Date: Oct 2006
Posts: 942
Reputation: ardav will become famous soon enough ardav will become famous soon enough 
Solved Threads: 125
ardav's Avatar
ardav ardav is offline Offline
Posting Shark
 
0
  #6
6 Days Ago
Here's my two-penneth worth. If JS not on - problems with JS solution. WHat about file_get_contents?

The reason I suggest this is that the display of the page if using JS is at the mercy of the client's (user's) settings. The following should work regardless as it is processed on the server (although you may need full control of your php.ini file).

$file is the image to check (from DB value I take it)

  1. if( false == ($str=@file_get_contents('$file',NULL,NULL,0,1))){
  2. echo "<img src=\"$default_file\" ...other_attributes... />";
  3. }else{
  4. echo <img src=\"$file\" ...other_attributes... />";
  5. }

The parameters for file_get_contents (0 and 1) relate to start at character 1 and read 1 character - so you're not reading the whole file - should save time - should be quick.

The '@' is required to surpress errors.

CAVEAT - if allow_url_fopen is set to false (0) - this will not work, if you have access to your php.ini file, turn allow_url_fopen on. The alternative would be to use cURL, but I assume this would be sloooooow.
?>

***
Linking to remote images may be asking for trouble. If this is an "avatar"/"profile" type image, perhaps it would be better if users could upload their image (which could be resized via GD2 or ImageMagick library) and the filename stored in a db.
Last edited by ardav; 6 Days Ago at 2:56 pm.
"...the woods would be a very silent place if no birds sang except for the best"
All opinions count.
Reply With Quote Quick reply to this message  
Reply

Message:



Similar Threads
Other Threads in the PHP Forum
Thread Tools Search this Thread



About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC