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
    Junior Member
    Join Date
    Jun 2016
    Posts
    3
    Member #
    54354

    Need help: resizing thumbnail dimensions

    Hello,

    I'm having trouble with the thumbnails for the product "zoom in" feature on this ecommerce site. I'm a total HTML/CSS novice, but I'm sure that it's the thumbnail dimensions that are causing the images to appear blurry (I've already tested out different "raw image" sizes). I'm just wondering what part of the code needs to be altered to specify a smaller size for the thumbnails. Would it be specified in the CSS for the layout or the HTML for the product page? Or both?

    Thanks for any help you could provide!

    http://www.modamoiselle.com/collecti...rose-gold-ring

  2.  

  3. #2
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    The thumbnail images are only 200 pixels square, but they're being stretched to fill a space over 300 pixels wide (except on smaller screens). It looks like those thumbnails are created dynamically by the website, perhaps you can increase the size of the thumbnails it generates (it not clear from your post what software you're using).

    In addition, the ring size chart is smaller than 200 pixels to begin with, so it's being stretched to 200 pixels by the thumbnail generator, then stretched again by the browser to fill that 300+ pixel space. You'd see some improvement just by replacing that image with one that's at least 200 pixels in both dimensions - then it will only be stretched once.

    You could make the thumbnails smaller by altering the CSS, but that just going to cause more problems since the smaller thumbnails will no longer fill the available space.

    If you really want to make the thumbnails smaller, though, this is the line in the CSS that sets the size of the thumbnail area:

    #product #thumbs li {
    width: 50%;
    margin: 0;
    }
    Kevin Henney
    CRUCIAL CREATIVE
    Web Development - Graphic Design - Branding

  4. #3
    Junior Member
    Join Date
    Jun 2016
    Posts
    3
    Member #
    54354
    Quote Originally Posted by khenney View Post
    The thumbnail images are only 200 pixels square, but they're being stretched to fill a space over 300 pixels wide (except on smaller screens). It looks like those thumbnails are created dynamically by the website, perhaps you can increase the size of the thumbnails it generates (it not clear from your post what software you're using).

    In addition, the ring size chart is smaller than 200 pixels to begin with, so it's being stretched to 200 pixels by the thumbnail generator, then stretched again by the browser to fill that 300+ pixel space. You'd see some improvement just by replacing that image with one that's at least 200 pixels in both dimensions - then it will only be stretched once.

    You could make the thumbnails smaller by altering the CSS, but that just going to cause more problems since the smaller thumbnails will no longer fill the available space.

    If you really want to make the thumbnails smaller, though, this is the line in the CSS that sets the size of the thumbnail area:

    #product #thumbs li {
    width: 50%;
    margin: 0;
    }
    Hi Kevin,

    Thanks for your reply. It hadn't occurred to me that there were "containers" (so to speak) of a particular size that housed the each "thumbnail" image. I use Photoshop to edit the images, but the "containers" are generated by whatever coding is used by the Ecommerce company (in this case, Storenvy). So then what I'd need to do is alter the sizing of the "containers". So the code that you specified will allow me to resize the "containers", or the actual thumbnail image?

    Thanks kindly!

  5. #4
    Senior Member khenney's Avatar
    Join Date
    Apr 2016
    Location
    Half Moon Bay, California
    Posts
    276
    Member #
    53911
    Liked
    148 times
    The code I'm pointing to would make the containers smaller (just change "width" to something smaller than 50%).

    The actual size of the thumbnails is 200 pixels square, and those look like they're being produced by storenvy, I'm not sure if they give you an option to override that size, but it would have to be done in their configuration somewhere.

    Because the store is generating 200 pixel square thumbnails, no image that's less than 200 pixels on the shortest side (like the ring size image) is going to look it's best, because it's being stretched by the store software, and even if you shrink it back down with css there's still likely to be some artifacts.
    Kevin Henney
    CRUCIAL CREATIVE
    Web Development - Graphic Design - Branding

  6. #5
    Junior Member
    Join Date
    Jun 2016
    Posts
    3
    Member #
    54354
    Hi Kevin,

    You're right; I was taking at peek at the HTML that can be configured for the "pages" Storenvy let's you alter to customize the themes and the images are set to 200sq. But reducing the size of the container makes the blurriness a bit less of an eyesore, so I'm good with that. Oddly enough, my sister pointed out that when she viewed the page in a smaller browser window, the blurriness was gone. At any rate, I just wanted to thank you for your help; I greatly appreciate it!


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
  •  
All times are GMT -6. The time now is 09:02 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com