Hi,

What is the original size of the product images that you are using? Try to set the Thumbnail width value to 705 to display the “masonry” thumbnail, which has a maximum dimension of 705x705px.

You can find the list of available thumbnails or image sizes in the functions.php file around line 211.

$avia_config['imgSize']['widget'] 			 	= array('width'=>36,  'height'=>36);						// small preview pics eg sidebar news
$avia_config['imgSize']['square'] 		 	    = array('width'=>180, 'height'=>180);		                 // small image for blogs
$avia_config['imgSize']['featured'] 		 	= array('width'=>1500, 'height'=>430 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['featured_large'] 		= array('width'=>1500, 'height'=>630 );						// images for fullsize pages and fullsize slider
$avia_config['imgSize']['extra_large'] 		 	= array('width'=>1500, 'height'=>1500 , 'crop' => false);	// images for fullscrren slider
$avia_config['imgSize']['portfolio'] 		 	= array('width'=>495, 'height'=>400 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['portfolio_small'] 		= array('width'=>260, 'height'=>185 );						// images for portfolio 4 columns
$avia_config['imgSize']['gallery'] 		 		= array('width'=>845, 'height'=>684 );						// images for portfolio entries (2,3 column)
$avia_config['imgSize']['magazine'] 		 	= array('width'=>710, 'height'=>375 );						// images for magazines
$avia_config['imgSize']['masonry'] 		 		= array('width'=>705, 'height'=>705 , 'crop' => false);		// images for fullscreen masonry
$avia_config['imgSize']['entry_with_sidebar'] 	= array('width'=>845, 'height'=>321);		            	// big images for blog and page entries
$avia_config['imgSize']['entry_without_sidebar']= array('width'=>1210, 'height'=>423 );						// images for fullsize pages and fullsize slider

As you can see, the $avia_config[‘imgSize’][‘masonry’] or the masonry thumbnail is set to have a maximum width of 705px and height of 705px.

Best regards,
Ismael

Hi,

Thank you for the update.

You may need to adjust the size further to display a larger image. Please note that the catalogue images will not exactly display in the specified size. It will only display a thumbnail or image size that is closest to the specified width value. Unfortunately, there is no registered thumbnail with the size 512x512px.

Best regards,
Ismael

Hey luiseheine,

Thank you for the inquiry.

You can actually select a specific thumbnail or image size in Blog Posts element. Set the Styling > Appearance > Preview Image Size settings to the second option, then select a thumbnail from the next dropdown. Let us know if that helps.

Best regards,
Ismael

Hi Marco,

You can adjust the size of the catalogue images in the Customize > Woocommerce > Product Images panel. Look for the Thumbnail width field and adjust its value. Default image width is set to 300px.

Best regards,
Ismael

Hey marcusss,
Thank you for your patience and the links, when I look at your category image above description example and compare it to the direct 512×512 image file the quality looks the same,
but when I compare the 512×512 to the original there does seem to be a difference.
I also see that your images in your media library are jpg but are webp on the frontend, perhaps this is related to your EWWW Image Optimizer plugin or perhaps some quality is lost when WordPress generates thumbnails from webp?
Try disabling your image plugin and upload a new different image to test with, in a good quality jpg format and check again.

Best regards,
Mike

Hey eduardodelat,

Thank you for the inquiry.

The theme automatically generates different thumbnails or sizes for each image, which is why there are multiple versions of the image in your server. These thumbnails are used on different areas or elements in the site instead of loading the original image, which could improve the loading speed.

We do not recommend removing or disabling those thumbnails but it is possible. Please check this thread for more info.

// https://kriesi.at/support/topic/media-upload-and-enfolds-thumbnail-sizes/#post-1271808

Best regards,
Ismael

Hey,

Thanks for contacting us!

Please use this plugin – https://wordpress.org/plugins/simple-image-sizes/ and increase the image size of “widget” which is 36x36px by default. Please do not forget to regenerate thumbnails after changing them.

Best regards,
Yigit

Hey orianos,

Thank you for the inquiry.

You have to modify or override the woocommerce/templates/content-widget-product.php file and define a custom thumbnail for the get_image function in this code around line 32.

<?php echo $product->get_image(); // PHPCS:Ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?>

Please check this documentation for more info on how to override a Woocommerce template file.

// https://woocommerce.com/document/template-structure/

Best regards,
Ismael

Hi,
Thanks for the login, it seems like the Regenerate Thumbnails was not working correctly, because when I used the Regenerate Thumbnails option in the Simple Image Sizes plugin the thumbnails were resized. Then I noticed that while the image sizes were correct they were show at full width on the blog page, so I added this css to your child theme stylesheet:

#top.blog .big-preview.single-big {
	max-height: 580px;
	max-width: 845px;
	margin: auto;
}

now the featured images on your blog page /news/ are showing correctly.
Please clear your browser cache and check.

Best regards,
Mike

Hey condonpb,
Thanks for the FTP access, but I couldn’t login to WP with the admin login, nonetheless I tested your function on my demo site and regenerated my thumbnails and it worked correctly

add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );
function enfold_customization_modify_thumb_size( $size ) {
$size['entry_with_sidebar'] = array('width'=>845, 'height'=>580);
$size['portfolio'] = array('width'=>845, 'height'=>580);
return $size;
}

Perhaps this code near the top of your child theme functions.php is causing a conflict:
$avia_config[ 'imgSize' ][ 'featured' ] = array( 'width' => 1500, 'height' => 555 ); // images for fullsize pages and fullsize slider
try removing this and adding it to your enfold_customization_modify_thumb_size function like this:

add_filter( 'avf_modify_thumb_size', 'enfold_customization_modify_thumb_size', 10, 1 );
function enfold_customization_modify_thumb_size( $size ) {
$size['entry_with_sidebar'] = array('width'=>845, 'height'=>580);
$size['portfolio'] = array('width'=>845, 'height'=>580);
$size['featured'] = array( 'width' => 1500, 'height' => 555 );
return $size;
}

and regenerated your thumbnails again, and check.

Best regards,
Mike

Hi,

Regarding the old thread, the user actually doubled the size of every thumbnails in the theme because he wanted the images to look sharper on retina screens. You don’t really need to do that because the default thumbnails are large enough to cover retina displays.

Best regards,
Ismael

Hi,

I see. Sorry about that. I missed the “on mobile” part in the topic title. We are not yet sure why it resizes like that but it might be due to the srcset attribute which allows the browser to serve a different thumbnail or a different version of the original image based on the current screen size. The served thumbnail might have a different aspect ratio compare to the original image. You can prevent this behavior by temporarily disabling the Responsive Images option in the Enfold > Performance > Responsive Images And Lazy Loading option.

Best regards,
Ismael

Hi,

Thank you for the update.

Some of the images are actually smaller than the designated thumbnail, so they were not resized the same as the larger ones. The images should have the same aspect ratio and they should be of the same size.

You can use this css code to adjust the style of the post title.

.avia-content-slider .slide-entry-title {
    font-size: 0.9em;
    line-height: 1.4em;
    margin: 0;
    font-weight: 400;
}

Best regards,
Ismael