Product thumbails cropped in Masonry layout

[techtherapy]

The masonry layout seems to crop in on the thumbnails – any way to control this?

Even with the featured image edited to be in the same proportions as the thumbnail space, part of it is still cut off on the home page.

That doesn’t work very well for the type of products I’m displaying.

[Kyle – SUPPORT]

Hi

They will crop depending on what masonry size you have set in the product meta. Can you provide an example of where the product image is the same ratio as the space?

– Kyle

[techtherapy]

This reply has been marked as private.

[Kyle – SUPPORT]

For a ‘tall’ image the height should be 2x the width, your image is not the same ratio

– Kyle

[techtherapy]

It seems to me the ratios are the same. I measured the “tall” image space on the homepage. That is 411 x 659.

The product image is 672 x 1079.

As you can see in the ratio calculator, practically the same ratio.

It looks to me like the image displayed in the masonry layout is zoomed in.

 

 

Attachments:

You must be logged in to view attached files.

[Kyle – SUPPORT]

If you want to change the size of the images go to atelier/woocommerce/content-product.php and edit these values:

	if ( $sf_product_multimasonry ) {

		$masonry_thumb_size = sf_get_post_meta( get_the_ID(), 'sf_masonry_thumb_size', true );

		if ( $masonry_thumb_size == "large" ) {
		    $classes[] = 'col-sm-6 size-large';
		    $width = 'col-sm-6';
		    $thumb_width = 800;
		    $thumb_height = 650;
		} else if ( $masonry_thumb_size == "tall" ) {
		    $classes[] = 'col-sm-3 size-tall';
		    $width = 'col-sm-3';
		    $thumb_width = 400;
		    $thumb_height = 800;
		} else {
			$classes[] = 'col-sm-3 size-standard';
			$width = 'col-sm-3';
			$thumb_width = 400;
			$thumb_height = 320;
		}

– Kyle

[techtherapy]

How come the ratios in the content-product.php are so different from what gets displayed on the homepage? It’s therefore hard to know what image sizes to choose.

[Kyle – SUPPORT]

If you use 1080 x 670 that should be fine

– Kyle

[techtherapy]

Sorry, but I’m still having trouble with this. I can’t get the product images on my homepage to look good – they are either displaying too zoomed in, or have empty space at the bottom.

I think what I actually need to be able to do is to change the proportions of the masonry boxes to suit the images I am using. How can I do this?

Also, if it was possible to choose how the image was aligned inside the masonry box, that would provide some extra control. You’d then have a lot more flexibility with the layout. Revolution Slider has some nice controls for this – see attached screenshot.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

To change the actual proportions of the boxes, you would need to start by changing the bootstrap classes in the code posted by Kyle.

You will see: col-sm-6 and col-sm-3:

col-sm-6 = Six columns
col-sm-3 = Three Columns

These numbers can be changed from between 1-12 to represent a different grid size for that item, but the total width must only equal 12.

Thanks,
David.

[techtherapy]

thanks David. How is the height determined?

[Kyle – SUPPORT]

The height of the images? For masonry it’s set in the code I provided previously

– Kyle