shop page – mix of landscape and portrait images

[techtherapy]

My site has a mix of landscape and portrait product images. I notice that another Atelier user has their shop category pages set up to work perfectly with this – e.g. http://norinori.greatsimple.com/en/product-category/clothing/

I would like to get my shop page looking similar in terms of the image layout – i.e everything nicely aligned, with spaces between the images

I’ve played around with various settings, enabling Multi Masonry, changing number of columns etc, but I’m not clear on how to go about it. Please can you give me some guidance as to how to achieve this? Note that I also use multi-masonry on the home page.

[David Martin – Support]

Once Multi Masonry is enabled, you need to set an individual image size for each product to change the image size.

Edit the product and locate the setting Meta Options => Masonry Thumbnail.

Thanks.

[techtherapy]

thanks, I will play around with this. However changing the number of”Product Display Columns” doesn’t seem to do anything. Or perhaps there is something I am missing?

[Rui Guerreiro – SUPPORT]

It won’t do any effect in Multi masonry mode. Give it a try by selecting the masonry size for each image.

-Rui

[techtherapy]

This reply has been marked as private.

[David Martin – Support]

You can change that within: Theme Options => WooCommerce Options => Shop Options => Product Display Columns.

Thanks.

[techtherapy]

thanks David. I’ve tried this and it has no effect – Rui seems to confirm this in his message above. Could you take a look?

[David Martin – Support]

This is not possible with multi masonry as you have some images set to use the smaller thumbnail size.

You would need to look to increase the masonry thumbnail size on those smaller images:

[techtherapy]

thanks, we’re getting closer. To try to get this to work, in content-product.php I made the following changes:

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

However it’s still not producing the desired effect – with these settings I now get 2 columns, and the Standard and Tall images seem to be too wide, preventing a third column from displaying.

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

This could be complex as I am not sure of what customisations they have done.

1) Theme Options => WooCommerce Options => Shop Options: Multi Masonry + Gutters + Gallery Display.

2) Shop Images (Edited within each product Meta) are only Standard and Tall.

3) Inside content-product.php Standard and Tall are both set to col-sm-4.

The dimensions for each respectively are:

$thumb_width = 400;
$thumb_height = 320;

$thumb_width = 400;
$thumb_height = 670;

4) Navigate to: WooCommerce > Settings > Products > Display. You need to change your images settings, I’d suggest removing the hard crop and making the Catalog Images at least 1000px in width. Once complete, you need to rebuild your images using this plugin: https://wordpress.org/plugins/regenerate-thumbnails/.

5) Lastly, in Theme Options => Custom CSS, add this:

.woocommerce ul.products.row {
    margin: 0 -15px!important;
}

[techtherapy]

thanks David. I now have everything set as you’ve suggested in those 5 steps, but it is still not giving me the three columns. As the page loads, the images are briefly in 3 columns, then revert to 2 when the page is fully loaded. Any other ideas?

[techtherapy]

Just to add – the issue seems to be related to the images appearing at 450px wide, despite the width in content-product.php being set to 400px. Whereas on the other website, they are appearing at 400px, and hence there is space for the 3 columns.

[David Martin – Support]

Please open /wp-content/themes/atelier/woocommerce/loop/loop-start.php

Locate this:

<?php if ( $product_multi_masonry ) { ?>
<div class="clearfix product col-sm-3 grid-sizer"></div>
<?php } ?>

…and change to this:

<?php if ( $product_multi_masonry ) { ?>
<div class="clearfix product col-sm-4 grid-sizer"></div>
<?php } ?>

This file can be copied to your child theme.

[techtherapy]

thanks. Made that change but no difference.

[David Martin – Support]

hmm, that should have done it – for me that was working on my dev version.

– Please add your FTP details and I will help you out.

Cheers.