Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #977561

    Hi

    I have just updated Flashlight from 4.2 to 4.3 and WooCommerce from 2.6.8 to 3.4.3.
    Unfortunately this resulted in massively downsized product-thumbnails (from previously 300x200px to 80x53px).

    Using the “customizer” tool [WooCommerce > Settings > Products > Customizer] and setting the shop-thumbnail width = 300 with no crop, I managed to adjust the image width to 300px.

    HOWEVER: this setting increases the height of the portrait orientation images to 300×450 (according to the aspect-ratio of 2:3.).

    In my previous version (Flashlight 4.2; WC 2.6.8) all these images had the same size (300x200px for landscape, 200x300px for portrait orientation)

    The settings in the file flashlight/woocommerce-config/config.php [line 47-51] are set to the same values as before the updates

    $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);
    avia_backend_add_thumbnail_size($avia_config);

    Apparently these settings don’t apply (no change, if I remove these settings from the config.php file).

    I also regenerated the thumbnail size [simple-image-size] with no effect.

    Do you have any suggestion on how to define a maximum value for height and width (width: max. 300px; height: max. 300px), so the images get the same size, regardless of their orientation (vertical or horizontal).

    Please compare:
    https://www.fotowalther.ch/produkt-kategorie/lander/england/ (WC 2.6.8)
    https://www.designbyanna.ch/produkt-kategorie/keramik/vasen/ (WC 3.4.3)

    Thanks!
    Bruno

    #978519

    Hey bruwa,

    Thank you for using Enfold.

    You can set the “Thumbnail Cropping” to “1:1” instead of “2:3”. Have you tried that? You can also set it to “Uncropped” to use the actual aspect ratio of the images.

    Best regards,
    Ismael

    #978615

    Hi Ismael
    yes, I noticed these options and sure I tried them.
    “1:1” means square, that’s not my intention. And as I mentioned, “no crop” did not help.
    In the end I tried width=200px together with “no crop”..
    However, while this makes the vertical images look right – at the same time it makes the horizontal thumbnails too small (200 x 133px).
    With the available options in “customizer”, I can only choose either the horizontal or the vertical thumbnails to have the right size.

    The “customizer” does not help, because It allows to set only the width.

    What I am looking for is a code to make every thumbnail 300px, either in height (for verticals) or in width (for horizontals)

    I need a code resulting in: max. height=300px; max. width=300px.

    Any suggestion?

    Thanks

    Bruno

    PS
    I “Flashlight”, not Enfold.

    #979322

    Hi,

    Thanks for the update.

    (I don’t want them all to become square).

    The product grid looks fine when the thumbnail cropping is set to “Uncropped” (see private field). Not every thumbnail is square. Am I missing something?

    Best regards,
    Ismael

    #979404

    Hi Ismael

    Yes, you are missing one (the) all important detail:
    What you are currently looking at are horizontal thumbnails of 200 x 133px (instead of 300 x 200px)..
    This resulted because I tried width=200px together with “no crop”:
    This shrinks the horizontal thumbnails (from 300x200px to 200x133px)!

    I need the horizontal and the vertical images to have the SAME SIZE

    What I need is
    – horizontal thumbnails of 300x200px (width x height).
    – vertical thumbnails of 200x300px (width x height).
    SAME SIZE – only different orientation – just as it was before updating.

    Example: Take a rectangular object (e.g. a matchbox or a sheet of paper) and rotate it 90° – does it change its size? Why should a thumbnail change its size when rotated 90°?

    Because the available options allow to set only the width, I can only choose between too small horizontals or too big verticals, because they adjust according to the set width and the aspect-ratio.

    I assume I need a code resulting in a container of 300x300px AND the thumbnails to fit to the max.

    “””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””””
    The previous solution was based on suggestions by Nick, a former member of the Kriesi support team.
    It did the trick until the update.

    #979414

    please make sure you are looking at my most recent edit (multiple edits).

    Thank you

    #979641

    searching the internet I came across this: https://developer.wordpress.org/reference/functions/add_theme_support/#post-thumbnails
    Could this be of any use to solve my problem? As a layman I don’t know how to use it.

    #979939

    Hi,

    The size of the horizontal thumbnail is “200 x 133px” because the “Thumbnail width” is set to 200. That is going to be the maximum width of the product thumbnails. I set it to 300 and it works just as well the previous value but the product images become larger. Is that what you want? (see private field)

    If you want to limit the thumbnail height to 300px, install the following plugin then go to the Settings > Media panel. Adjust the height of the “shop_catalog” thumbnail, update, save then regenerate the images.

    // https://wordpress.org/plugins/simple-image-sizes/

    Best regards,
    Ismael

    #980081

    Hi Ismael

    we’re back on square one (see my OP, June 25, 2018 at 4:35 pm)
    Your suggestions are not the solution but a description of the problem I keep on describing.
    Why do you suggest to do what I keep on saying it does not solve my problem in the first place?

    Let me summarize what I have written so far:
    – Horizontal thumbnails must be 300 x 200px and verticals must be 200 x 300px (width x height).- SAME SIZE
    – The current “customizer” does not allow me to do that, because it does not allow to set the height.
    – The suggested plugin simple-image-size does no longer work on WC 3.3 and higher

    I want the horizontals and the verticals to be of the SAME SIZE
    Your suggestions for the customizer result in 200 x 133px or 300 x 450px – can we agree that these are not the same sizes?

    I came across numerous posts complaining that since WC 3.3 you are unable to set the thumbnails’ height and that the simple-image-size plugin has no effect. The answer of the WC moderator is: you can overturn WC with your theme’s settings.
    Accordingly some file modifications in Flashlight should do the trick

    How can I get my problem solved with Flashlight?
    Nick’s modifications of 2013 used to work (see link below) but do not since the update.

    Regards

    Bruno

    • This reply was modified 11 months, 3 weeks ago by  bruwa.
    #980389

    Hi,

    – The suggested plugin simple-image-size does no longer work on WC 3.3 and higher

    The plugin is outdated but it’s still working so you should test it. Adjust the maximum width and height of the “shop_catalog” thumbnail to 300x300px. It is set to 200x140px by default.

    $avia_config['imgSize']['shop_catalog'] = array('width'=>200, 'height'=>140);
    

    Nick’s modifications of 2013 used to work (see link below) but do not since the update.

    How does the product grid look previously? Where we can see that modification?

    Best regards,
    Ismael

    #980428

    Hi Ismael

    The plugin is outdated but it’s still working so you should test it

    Please read my initial post: the code you are currently suggesting is the one that is in place since 2013. (Nick’s – beside a few code additions in the custom.css file.).
    You can read that I tested it before asking for help – simple-image-size no longer works with WooCommerce.(as other users confirmed).

    How does the product grid look previously? Where we can see that modification?

    Please see the private data of my latest post (July 2, 2018 at 1:41 pm).
    You can also find this link in my initial post (at the end – bold).
    Previously all images were 300 x 200px and 200 x 300px respectively.

    Please find all the information in my initial post.

    Regards
    Bruno

    #980835

    Hi,

    Thanks for the update.

    I added a custom function to set the width and height of the product thumbnails according to their orientation. It’s in the functions.php file. I’m not sure if that’s what you wanted though. Please check the grid. (see private field)

    function ratio_check_by_image_size($attachment)
    {
    	$img_size = ' square';
    
    	if(!empty($attachment[1]) && !empty($attachment[2]))
    	{
    		if($attachment[1] > $attachment[2]) //landscape
    		{
    			//only consider it landscape if its 1.7 times wider than high
    			if($attachment[1] > $attachment[2]) $img_size = 'landscape';
    		}
    		else //same check with portrait
    		{
    			if($attachment[2] > $attachment[1]) $img_size = 'portrait';
    		}
    	}
    
    	return $img_size;
    }
    
    add_filter('<a href='https://refer.wordpress.com/r/84/woocommerce/' target='_blank' rel="nofollow">woocommerce</a>_get_image_size_thumbnail', '<a href='https://refer.wordpress.com/r/84/woocommerce/' target='_blank' rel="nofollow">woocommerce</a>_get_image_size_thumbnail_mod', 10, 2);
    function <a href='https://refer.wordpress.com/r/84/woocommerce/' target='_blank' rel="nofollow">woocommerce</a>_get_image_size_thumbnail_mod($size) {
    	global $product;
    	$image = wp_get_attachment_image_src( $product->image_id, 'full' );
    	$orientation = ratio_check_by_image_size($image);
    
    	if($orientation == 'portrait') {
    		$size['width'] = 200;
    		$size['height'] = 300;
    	} else {
    		$size['width'] = 300;
    		$size['height'] = 200;
    	}
    
    	$size['crop'] = 0;
    	return $size;
    }

    Best regards,
    Ismael

    #980836

    Hi,

    UPDATE: The natural size of a portrait image is now set to 200x300px but it’s being resized with css. If you want the images to display its actual dimension. Add this css code…

    #top .thumbnail_container img {
        min-width: 200px;
        margin-right: auto;
        margin-left: auto;
    }

    Best regards,
    Ismael

    #981160

    Hi Ismael

    now we’re talking !
    Thank you so much. Your code does exactly what I was hoping for !
    Thank you also for not only adding the code but also letting me know it.

    Would you mind clarifying (not nagging – just out of interest and for future reference):

    if($attachment[1] > $attachment[2]) //landscape
    {
    //only consider it landscape if its 1.7 times wider than high
    if($attachment[1] > $attachment[2]) $img_size = ‘landscape’;
    }

    Where did you set a factor 1.7?
    In my (very basic) understanding the rule seems to be “($attachment[1] > $attachment[2]) and ($attachment[2] > $attachment[1])” – no factor..
    What am I missing?

    Thanks
    Bruno

    #981544

    Hi,

    Thanks for the update.

    The condition is a bit different from the original. It’s from the masonry element’s orientation/ratio function where the “auto_ratio” parameter is set to 1.7 by default. I just forgot to remove or update the comment. You can ignore that one. :)

    Best regards,
    Ismael

    #981601

    Hi Ismael

    Thanks for the clarification.
    Mission accomplished – you can close this ticket.

    Thanks for your efforts!

    Best regards,
    Bruno

    #981852

    Hi,

    Awesome! Glad we could help!

    Please take a moment to review our theme and show your support https://themeforest.net/downloads
    Don’t forget to bookmark Enfold Documentation for future reference.

    Thank you for using Enfold :)

    Best regards,
    Ismael

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘Thumbnail size problem after updates’ is closed to new replies.