WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] WP screws up image size (15 posts)

  1. bruwa
    Member
    Posted 1 year ago #

    Hi

    I uploaded a few product-images of horizontal orientation to a WooCommerce shop. No problem.
    Then I uploaded an image of vertical orientation.
    To my surprise the vertical image is displayed much bigger (double the size) than the horizontal ones.
    All images were uploaded with the same setting.
    http://www.wp.fotowalther.ch/?product_cat=memory-test

    It seems that WP screwed up when creating the thumbnails.

    With a Joomla website I used to upload pre-sized thumbnails, then Joomla offered the option to select whether I wanted the software to automatically create a thumbnail or to use the one I created myself (default = "no action").

    Is there a way to directly import a pre-sized image into a page (without WP messing with it)?

    As this seems to be a flaw, will this be corrected in the new WP version?

    Thanks,

    Bruno

  2. When you upload your image via WP... there will be a popup box with your images. In each image... there is an option to use one of three, pre-selected, thumbnail sizes... or the original size of the upload.

    Choose the original size... when inserting into the content.

    As this seems to be a flaw, will this be corrected in the new WP version?

    No flaw. WP creates the thumbnail sizes by default, so they are available for different usage areas (like featured image, or comment thumbnail, or whatever), should you need them.

    Imagine what a pain it would be if you had to manually upload each of the dimensions you required on your blog ;)

  3. bruwa
    Member
    Posted 1 year ago #

    I created an image 190x284 px and uploaded it.
    I selected the option "Full-size (189x284)".

    The image gets displayed double the size.

    Are you saying that you consider it as normal, if uploading 2 images with the same setting results in images of different sizes?
    Would you buy a calculator that tells you "1+1" is "2" sometimes and "4" on other times?

    As I mentioned, it is for a shop, not a blog, so I need to upload every individual product manually anyway. And I do it once. Just as I did with Joomla.

  4. What's the link to the page with the image you uploaded?

  5. bruwa
    Member
    Posted 1 year ago #

    the link is the one I included in my post

  6. bruwa
    Member
    Posted 1 year ago #


  7. Which image is it that displays incorrectly when you upload it?

    1. Upload an image like you would normally want to do.
    2. Let it display the "wrong" way.

    Now, let me know which image it is that is not displaying with your desired results.

  8. bruwa
    Member
    Posted 1 year ago #

    there are 3 horizontal images and 2 vertical images

    the 2 vertical images are displayed double the size of the horizontal images

    the 2 vertical images should display the same size as the horizontal, as they were uploaded with the same settings

    the link is http://www.wp.fotowalther.ch/?product_cat=memory-test

  9. Okay.. it is a style added by your woocommerce theme.

    Try adding this to your custom styles...

    #top .thumbnail_container img, #top .thumbnail_container a:hover img {
        height: none;
    }

    I don't know why your theme does that... but this should fix it. Although, you might want to double check other aspects of your site to make sure the image adjustment didn't adversely affect any other areas.

  10. bruwa
    Member
    Posted 1 year ago #

    I added the code
    then added another vertical image (product)

    unfortunately no change

  11. Where did you add the code? I don't see the change.

    Perhaps, try this...

    #top .thumbnail_container img, #top .thumbnail_container a:hover img {
        height: none !important;
    }
  12. bruwa
    Member
    Posted 1 year ago #

    I added the code and one more image (product)

    unfortunately no change

    you may need to refresh your browser to see the additional images

  13. ZachMatthews
    Member
    Posted 1 year ago #

    Has anyone ever solved this?

    The problem is WordPress (and the forum plug-in bbPress) both use the "width" value of an uploaded image to determine the screen real estate the image is given, whether the image is originally in landscape (horizontal) or portrait (vertical) format.

    This results in a horizontal image of, say 600 pixels, being displayed significantly smaller than a vertical image, which will be given a width of 600 pixels *but a much larger height*.

    The fix would be for WordPress to recognize whether the image is vertical or horizontal in size and to use the *longest side* to determine the screen real estate.

    I can't figure out how to do this in CSS. However LOTS OF OTHER FORUMS have solved this problem. Hell, even YaBB figured this one out.

    So it has to have a fix.

    Anyone?

  14. ZachMatthews
    Member
    Posted 1 year ago #

    Ha! Unbelievably, I was able to fix it on the first try.

    width: auto;
    height: auto;
    max-height: 750px;
    max-width: 750px;

    Use that CSS for whichever img tag you are trying to adjust, and obviously size the pixels to what you want. That resulted in vertical and horizontal images retaining their correct aspect ratio with the longest side (vertical or horizontal, respectively) being limited to 750px.

    Zach

  15. bruwa
    Member
    Posted 1 year ago #

    Hi

    Just in case it might be of use for someone else:

    I use the theme Flashlight (themeforest.net), where WooCommerce seems to be modified somehow.

    The following 3 steps were the solution for me to avoid the portrait format images to be stretched in the catalog.

    1)
    change the settings in the WooCommerce/Settings (catalog tab: image options) to 300x300 and uncheck the "crop" option (for all 3 types of images). For existing images: regenerate thumbnails.

    ****************************************
    2)
    In the file themes/flashlight/woocommerce-config/config.php (line 41-44) you change

    //product thumbnails
    //$avia_config['imgSize']['shop_thumbnail'] = array('width'=>80, 'height'=>80);
    //$avia_config['imgSize']['shop_catalog'] = array('width'=>200, 'height'=>140);
    //$avia_config['imgSize']['shop_single'] = array('width'=>350, 'height'=>350);
    //avia_backend_add_thumbnail_size($avia_config);

    to

    //product thumbnails
    $avia_config['imgSize']['shop_thumbnail'] = array('width'=>300, 'height'=>300, 'crop'=>false);
    $avia_config['imgSize']['shop_catalog'] = array('width'=>300, 'height'=>300, 'crop'=>false);
    $avia_config['imgSize']['shop_single'] = array('width'=>300, 'height'=>300, 'crop'=>false);

    ******************************************************
    3)

    In the quick css or custom.css you add:

    #top div .avia_3_column_gallery {
    width: initial;
    }
    .template-shop-single .product {
    overflow: visible;
    }
    #top .panel.entry-content {
    width: initial;
    }
    #top .thumbnail_container img {
    width: auto;
    margin-right: auto;
    margin-left: auto;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags