[theme: mystile] help fixing blurry product images

  • Resolved michellegish

    (@michellegish)


    11 years, 3 months ago

    Hello all, any help I can get on this issue will be appreciated. If this is the incorrect place to ask, please let me know.

    Right now I am using the wootheme’s theme mystile for a client’s website. The website is almost completed, but the product photos are blurry.

    The theme is responsive, thus whenever the window is resized the image resizes itself (as the width of the image is 100%, according to the css, which I have chosen to keep). The image I uploaded is 1000×1000 pixels.

    Using chrome’s developer tools, I found that the theme forces the image down to 300×300 pixels (by making the url end in “-300×300.jpg”), making the image blurry when it resizes itself. I was able to take away the “-300×300.jpg” part of the image url in the developer tools (which is unfortunately not a permanent change) and the image was exactly how I needed it to be.

    Because I can’t change the html in this case, I figured that there was a setting somewhere that would post the image as its original size.

    If you want to see what I mean, you can see it here:
    https://www.loviacosmetics.com/product/eye-shadow-matte/

    Thanks!
    Michelle

Viewing 7 replies - 1 through 7 (of 7 total)

  • I think what you’re running into is a conflict between your theme’s image handling–the width 100% declaration–and the way your shopping cart handles images. Your shopping cart is evidently set to use 300 px images in the product detail page, but your theme is trying to scale that up based on the window width, thus the blurry images on higher-resolution displays.

    There are a few things you could do.

    One is to set the image size for the product detail pages to 1000 x 1000. You’d still get a blurry image on a really high-resolution display that scaled it beyond that, though. You would need to set a max-width in your CSS for 1000px to prevent that. Fortunately, your shop is using a class called “attachment-shop_single” that you may be able to use to confine your CSS to those product detail images. You might also have to regenerate the thumbnail images for your existing products.

    The second thing you could do, if you’re okay using the smaller image size, is to remove or override the 100% width declaration for images in your CSS for your theme and live with the image sizes you’ve set for your site and Woocommerce.

    The third thing is too involved to attempt. That would be to recode the theme and the shop so they use a different image size on different displays. It would be easier to change themes than to do all that coding and cross-browser testing.

    Thread Starter michellegish

    (@michellegish)

    Thanks for the quick reply! I will see if I can change the css for that class.

    I did try to remove the 100% width before, but the image was a bit too small for the layout.

    I’ll keep trying things out and see where it goes. Thanks again!!

    Please update me also if you find any solutions!
    I’m having the same issues here – especially with the products/store front images (set to 150×150 by default). The other images show just fine.
    Thanks ??

    I’m sorry but as you are using a non-WPORG theme, you need to seek support from the theme’s developers – paid or otherwise. We only support themes downloaded from www.ads-software.com here.

    This is fairly straightforward to fix – you need to change the settings in woocommerce > catalog to so that each of the image sizes is 450px (if you want to match the mystile theme dummy images). Then you simply need to use the regenerate thumbnails plugin to change the old auto-generated sizes for images you’ve already uploaded. This way you let the theme’s responsive design do the resizing – and you don’t need to add 1000px images, as the max the images need to reach is 450px

    https://docs.woothemes.com/document/adding-product-images-and-galleries/

    Thread Starter michellegish

    (@michellegish)

    Yess! It ended up working! Thanks, ashbydesign!!

    Oh and sorry, esmi, I’ll know where to post these things from now on

    Thank you ashbydesign. I had the same problem, but solved already)

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘[theme: mystile] help fixing blurry product images’ is closed to new replies.