WordPress.org

Support

Support » Plugins and Hacks » How to achieve Responsive Images

How to achieve Responsive Images

  • So, like many others, I’m having image size and pixelation problems. I’ve looked around at many of the solutions, but none will work when trying to build a responsive theme with woocommerce. The images that I post will more than likely, always be different dimensions, plus I need them to be responsive, not a fixed width. Does anyone have any tips on what I should do?

    http://wordpress.org/extend/plugins/woocommerce/

Viewing 14 replies - 1 through 14 (of 14 total)
  • for some crazy reason, woocommerce has image width set like this:
    div.product div.images img,#content div.product div.images img{width:100%}
    when it should be this:
    div.product div.images img,#content div.product div.images img{width:auto; max-width:100%}

    this will prevent images from stretching out beyond their natual size, but will allow them to collapse if the div they are in is more narrow

    Roy Ho

    @splashingpixelscom

    bheadrick – have you opened a ticket for this issue? Might benefit many others in the future.

    Well, this is their answer to the problem:
    http://wcdocs.woothemes.com/tutorials/using-the-appropriate-product-image-dimensions/
    so I don’t think they would really consider it a “bug”

    but if you don’t want to have the product thumb to be that big, then my solution above will do the trick.

    Roy Ho

    @splashingpixelscom

    No, it certainly is not a bug however it is not a practical implementation. width 100% should only be set and triggered when size has already been reduced responsively then the 100% width would be correct as it tries to fill the container with the image.

    Another words, by default, max-width:100% is the correct implementation in a responsive design.

    it’ll probably get shot down but
    https://github.com/woothemes/woocommerce/issues/2117

    Awesome. Thanks for the replies! I actually did switch to width:auto but didn’t get a chance to get back and update my question. Thanks for starting a ticket as well!

    And this is the answer:
    We use width 100% so the product grids are consistent. I don’t think there’s any excuse to use smaller images than the design intends?

    Roy Ho

    @splashingpixelscom

    Actually they don’t need “width:100%” to maintain consistency. They can simply grab the width of the product image settings in WooCommerce and let that determine the width of each grid item.

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    … just for example my Theme is using grids and images are still max-width. They should be like this:

    img {
        -ms-interpolation-mode: bicubic;
        border: 0;
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }

    You can also override WooCommerce styles within Child Theme and be done with it 🙂

    Thanks,
    Emil

    Emil. Would this work in your excellent Responsive Theme?

    Sounds like the steps would be:
    1) copy WooCommerce style sheet to child theme (woocommerce.css?)
    2) change the image properties that I find there to what you outline:
    img {
    -ms-interpolation-mode: bicubic;
    border: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    }

    AM I understanding this correctly?

    Emil Uzelac

    @emiluzelac

    Theme Review Admin

    I would say so and this is already in Responsive 🙂

    One thing I’ve noticed is that the product title doesn’t change in responsive. Then when a product (with image) is viewed on mobile the product title breaks up onto multiple lines. Is there a way to set the title text so it responds as well?

    How would I go about doing that?

    Is the font in ems instead of pixels? That will certainly help some.

    I will have to check. I am using Emil’s Responsive Theme that is optimized for WooCommerce. Therefore I’m a little skeptical about changing certain things that might actually hurt what the Theme does automatically.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How to achieve Responsive Images’ is closed to new replies.