Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
  1. #1
    rie
    rie is offline
    Junior Member
    Join Date
    Feb 2008
    Posts
    1
    Member #
    16458
    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!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    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.


  4. #3
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    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.

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    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.


  6. #5
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    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:

    Code:
    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.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css page layout resize

,

images in liquid layouts

,

liquid lay outs in atlanta ga

,

liquid layouts with multiple sized images

,

resize image php different layout

,

resize images in liquid layout

,

resizing images in liquid website design

Click on a term to search for related topics.
All times are GMT -6. The time now is 01:04 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com