Vertical thumbnails are incorrectly displayed

11 posts from 2 voices

• Started 5 months ago by bruwa
• Latest reply from Devin
• This topic is resolved

Tags:

No tags yet.

1. 

   bruwa
   Member

   Hi

   When I upload a product image, the theme creates a couple of thumbnails.

   To my surprise, thumbnails created from a vertical image are not displayed at their real size on the frontend.

   Please take a look at the thumbnails displayed on page http://www.wp.fotowalther.ch/?product_cat=display-mismatch

   The thumbnail 1191 sitting in the Media Library is 284x188 px - the thumbnail you see is correctly displayed at 284x188 px.

   The thumbnail 1196 sitting in the Media Library is 126x190 px - however, the thumbnail you see is displayed at 282x428 px.

   The thumbnail 1214 originally was 126x190 px, it was replaced (within Photoshop) by a thumbnail sized 188x284 px to fool the theme - however, the thumbnail you see is 282x428 px.

   The thumbnails 1196 and 1214 are both displayed at the same size, although they reflect thumbnails of ]b]different]/b] size.
   The thumbnails 1191 and 1214 are both displayed at different size, although they reflect thumbnails of the [/b]same size.

   In other words:
   A horizontal thumbnail of 284x188 px is correctly displayed.
   A vertical thumbnail of the same size however is displayed at a much bigger size (282x428 px instead of 188x284 px).

   Neither a thumbnail of 126x190 px, nor a thumbnail of 188x284 px is correctly displayed.

   I noticed this mismatch only with [b]vertical images (width smaller than height).
   There are not extreme sizes nor an extreme aspect ratio that would need any sort of adjustment in order to be displayed.

   I checked the page on a different computer with different OS and different monitor - the mismatch is the same.

   What makes the vertical thumbnails displayed incorrectly?
   How could this be remedied?

   Thanks,

   Bruno

   Posted 5 months ago #
2. 

   bruwa
   Member

   I started with a new installation (as Nick suggested).
   - Created a new subdomain and a new database with the webhost.
   - Downloaded the WP files and installed.
   - Had WP install WooCommerce (no additional plugins activated).
   - Created the basic settings (mind you: all media settings left at default!)

   - Created a few products - some vertical product images, some horizontal product images.
   - Upon upload selected image size "Medium (300x199 / 199x300)".

   See: http://www.wp2.fotowalther.ch/?product_cat=subcategory-test-1

   Questions
   1) horizontal images: why is the thumbnail 200x140 displayed instead of the one I selected (300x199) upon upload?

   2) vertical images:
   2a) why is a thumbnail of 92x140 displayed instead of the one I selected upon upload (199x300)?
   2b) why is the thumbnail of 92x140 suddenly blown up to 202x303 when it appears on the monitor? (no thumbnail of this size was created - it is the 92x140)
   2c) in every series of thumbnails created from a vertical image there is always 1 thumbnail with inverted dimensions, e.g. 200x140 instead of 140x200 (the image got from a vertical to a horizontal and got cropped accordingly) - how come?

   When I select the thumbnail to be 199x300 or 300x199 - why don't I get the size I selected?
   (neither for a horizontal. nor for a vertical thumbnail)
   When a thumbnail is 92x140 - why does it get blown up to 201x303 at the monitor

   Where is the logic?
   What could have gone wrong?
   How to fix?

   Thnanks

   Bruno

   Posted 5 months ago #
3. 

   Devin
   Moderator

   Hi Bruno,

   The way thumbnails works in this theme and all of Kriesi's themes is this: The image size you upload should be the largest single image of your product or portfolio item. So for Flashlight, the bigger the better since the file can be used for the big background image as well.

   From there, the theme looks to the functions.php and for the woocommerce stuff woocommerce>config.php for the sizes the theme should create for all the various theme uses.

   Those images sizes are not going to be 100% what will be displayed on the front end, but they make it so you aren't pulling in a 1000x1000 pixel image when you are showing thumbnails.

   Also to note is the sizes are not exact unless the size has crop=true at the end. Wordpress will constrain the image to the longest edge of the image size so that both edges are within the specified size (unless its set to crop).

   What this means when in actual use is you start with an image that is 1000px tall and 500px wide and you upload that for a product image the them then takes that and creates all the other image sizes. **Note: the selection of size in the window when you upload has NOTHING to do with what sizes are generated. That is purely for when you put images into the visual editor.

   So on your catalog page in your examples, the image size being pulled in is selected by the theme and you have no control over which one it uses. Further, the css for the 3 column layout controls the size the image gets stretched to as well as the size of the images.

   If you want individual control, you will need to either re-write the theme functions or create individual product pages as regular pages and use the woo commerce shortcode to add the add to cart button to that single page for that specific product.

   Regards,

   Devin

   Posted 5 months ago #
4. 

   bruwa
   Member

   Hi Devin

   Sorry to insist ....

   is there a documentation where I can learn more about the behavior as to how exactly images are handled (resized)?

   I would like to learn what size I best upload to get the results I expect.
   I would like to "reverse engineer" starting from what I want to see on the frontend to determine the best way to get the result I want.
   I need consistency!

   I especially need to understand why with vertical images the aspect ratio is unexpectedly reversed with one of the 10 thumbnails.
   The image consequently is distorted.
   (by definition in a vertical image width must be smaller than height - this is reversed with one single size of thumbnails)

   

   while with horizontal images this never happened
   (height is never larger than width)
   

   What could I possibly do to prevent the software from changing the aspect ratio?
   What triggers this? There must be an explanation in the logic of the program code.

   Thanks

   Bruno

   Posted 4 months ago #
5. 

   Devin
   Moderator

   Hi Bruno,

   The only documentation I know of explaining it, is what I just posted above combined with http://codex.wordpress.org/Function_Reference/add_image_size

   The best size, as I said, is the largest image you've got. The theme functions in the function.php and in the woocommerce config file (woocommerce>config.php) determine what sizes of images get created when you upload a photo. The settings for each also say if an image should be cropped or not (see the codex link above for more).

   The best explanation is in the codex link. Also keep in mind the certain layouts change what size an image is displayed at proportionally as it gets scaled down to fit the layout with css (or scaled up).

   I am really unable to say what happened with the one single image that seems to be different but it could be a mistake and just need to be regenerated.

   This is a really good plugin if you want to modify image sizes and such from the wordpress admin: http://wordpress.org/extend/plugins/simple-image-sizes/

   Regards,

   Devin

   Posted 4 months ago #
6. 

   bruwa
   Member

   Hi Devin

   thanks.

   Unfortunately the change in aspect ratio did not only happen with one single image file, it is a constant feature to be observed
   - only with vertical images
   - only with one size: 300x201px (instead of 200x300)

   I'm convinced that this behavior is depending on some yet unknown condition.
   As far as I know software does not (systematically) change its behavior without a reason.

   So, I will continue with trial-and-error - if only it wasn't so time-consuming ...

   :-(

   Regards,

   Bruno

   Posted 4 months ago #
7. 

   Devin
   Moderator

   Not really sure how else to explain as I've never had that much trouble with it.

   The images are generated based on the settings. The generation is taken care of by wordpress core using the add_image_size function.

   Make sure that after any change to an image size via functions or anything else, you regenerate thumbnails so the newest settings take place.

   Regards,

   Devin

   Posted 4 months ago #
8. 

   bruwa
   Member

   no need to regenerate as I did not change any setting ...
   (I even reinstalled WP and Flashlight recently because I was not sure whether there was any problem with the installation)

   Can you please educate me on another (maybe stupid) question:
   how do WP and Flashlight recognize whether the image is a vertical or a horizontal - and how to handle the different formats?
   I see values for width and height in the config/functions file - but no condition attached (sort of "IF width>height, IF width=height, ELSE ..." ). I'm unfamiliar with PHP, however I used to be familiar with basic dBase programming.

   **********************
   I've just noticed another strange behavior:

   I see that I uploaded the same image (#1192) twice on the same day.
   The number of thumbnails that were created are not the same - some of the sizes differ as well!

   
   ********************************************
   

   Regards,

   Bruno

   Posted 4 months ago #
9. 

   Devin
   Moderator

   Hi Bruno,

   There is no code to recognize a portrait vs landscape photo. The function just takes your base photo and compares it to the sizes specified. Then creates additional images based on the data.

   The kind of single off instances you are getting in to are a bit beyond what I can explain without being over your should at the time of doing it. Unknown variables and specific set ups could be the cause or it could just be a miss communication.

   Overall, if you want complete control over exactly how your photo will appear, you shouldn't be using any kind of automatically generated layout. Just stick to single pages and put in each item manually. Otherwise, you'll get procedural errors or slight differences just by the way code works.

   Regards,

   Devin

   Posted 4 months ago #
10. 

    bruwa
    Member

    Hi

    3 steps to get vertical and horizontal product images of same dimensions equally resized and displayed at the same size in the catalog (BIG thanks to Nick):

    ************************************
    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;
    }

    Regards,

    Bruno

    Posted 4 months ago #
11. 

    Devin
    Moderator

    Glad you were able to get it working how you wanted it!

    Also thanks for posting your solution :)

    Regards,

    Devin

    Posted 4 months ago #

RSS feed for this topic

Reply

You must log in to post.