Liquid Layout and Resizing Images

[rie]

I hope this is the right area for me to post but I have a potential client who has a site with a liquid layout. It is an e-commerce site so he has more than a few images used to display his products. He would like for his images to resize based on the user's screen resolution. Correct me if I am wrong, but isn't this usually not a good idea? I am under the impression that sites with liquid layouts are sites that are not image heavy.

I also know that using percentages to scale the images could cause them to display poorly, which would not be good for a site that is using the images in order to entice customers to buy their product.

I was wondering if anyone has any advice on how I could make this happen for him or if it is something that should even be done at all.

Thanks in advance!

[mlseim]

Screen resolution is not the same thing as browser (screen) size.

Anyone can resize their browser and you can adjust accordingly the widths
of divs, tables, etc. The images are a different story. I suppose you could
pre-load full-size images and use some sort of Javascripting to size them, but
it would be ugly and awkward.

I would try to talk him into a fixed-width site that is around 900-1000 pixels
wide, and the important stuff is in the left 800 pixels of the screen. You center
the width so the page centers in a 1024 browser. People with 800 pixel
browsers will see the most important part without horizontal scrolling.

[Ferro]

Hmmm.... I may be wrong but you could use php as well to resize your images. Also so long as you keep the proprotions intact, I don't see why they shouldn't display properly. You could also use php to whack a minimum/maximum size on them.
Only downside is I think this may involve the php rendering some inline dynamic style sheets for the pics, which isn't good practise, but there may be some other way of doing this that I haven't thought of (only a beginner at php really).
I could be totally wrong though but this is how I would approach it.

[mlseim]

Using PHP:
The problem with using PHP (GD library for manipulating images) ...
Each page refresh would require processing each time. Using a ton of
CPU processing.

Using <img src width= height= > ..... or Javascripting ....
You could have the largest image saved and simply change the W and H
when displaying it ... that makes page loading really long, because the large
image still needs to load. Javascripting could do a pre-load, but the same
thing ... the largest image is cached. What if your client uploaded an image
that was 2.5 megabytes in size?

Best Solution ....

Don't resize the images at all. Talk your client out of it.


When to use PHP GD ....

When the client uploads a new product (photograph), use PHP GD to resize
the photo for a "full-size" image AND also create a "thumbnail" at the same time.
These get saved and used on the website. By doing this, you control the sizes
of both the "full-size" and the "thumbnail" images, not the client.

[Shadowfiend]

Alternatively, it's relatively easy to devise a `cache-on-create' version of your thumbnails with some mod_rewrite and PHP magic. For example, you could have this in your .htaccess for an images/ directory:

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*(?:gif|jpg|jpeg|png))$ generateThumbnail.php?file=$1 [L]

RewriteRule ^generateThumbnail\.php.* nothing [F]

Then make sure generateThumbnail.php generates the file and actually writes it to a file before sending it back to the browser. What this does is that, if the file does not already exist, it calls generateThumbnail.php and hands it the filename, presumably generating the file. Because it writes the file, the next time the file is looked up, it will exist, so generateThumbnail.php won't get hit at all.

Note also that the redirect only happens for files with the appropriate extensions. Also, note that the [L] after the first rule means it will be the last rule, so the second part doesn't apply. The second part sends a 403 forbidden in case someone tries to access generateThumbnail.php directly rather than indirectly. This should prevent someone trying to pull dirty tricks on you. Nonetheless, you should still verify the filename that comes in to generateThumbnail.php.

This is just one solution. An alternative is to write a PHP page that will itself check if the file already exists before generating it. This just does it at the Apache level, which tends to be slightly faster as it doesn't invoke the overhead of the PHP interpreter.