Product Thumbnail to Fit Image Orientation « Support Forum | Kriesi.at

Support Forum » Abundance

Product Thumbnail to Fit Image Orientation

13 posts from 3 voices

Started 9 months ago by joemalf
Latest reply from Devin
This topic is closed
This topic is resolved

Tags:

joemalf
Member
Hey All,

I am looking for a way to display product thumbnails in their respective image orientations (portrait, landscape). An example of such a shop can be seen at art.com > orientation shop example

My shop is of a similar experience, as I am selling artist prints. It is therefore necessary to showcase the imagery in its entirety as direct as possible on the front-end.
Unchecking the 'hard crop' option on Woocommerce > Settings > Pages has not done anything (even after regenerating the thumbnails). My site's shop can be seen here > right here

Some images will be landspace, others portrait. The product images uploaded will be of a 3:2 proportion - The minimum dimension being 200px, the maximum being 300px (ie; landscape = 300x200 , portrait = 200x300).

I have looked at all other forums regarding a topic of this sort and have found that the thumbnail code within 'abundance/woocommerce-config/woocommerce-mod.css' is the most appropriate and I have found it most responsive to product image changes. All other files have not responded.

I am thinking it can be solved with some sort of responsive or conditional css code made with parameters to catch dimensions and suit the outcome accordingly. However, I have yet to come across anything satisfying, accurate, or functional.

Let me know if you need any other information or links.

Thank you in advance.
Posted 9 months ago #
Nick
Moderator

Hi Joe,

There are a few places where the constraints for images are defined besides the WooCommerce, so first lets take a look at them. In Wordpress, Settings>Media, (not the theme but Wordpress itself) there should be a check-box there 'Crop thumbnail to exact dimensions (normally thumbnails are proportional)' which is a second hard-crop directive.

The page below discovered css fixes that seems to work for majority of WooCommerce plugin users. The problem seems to be that some work for some, and others work for others. See if this helps, because judging from the reactions, it does.

http://www.thedesignguys.co.uk/woocommerce-image-blurring-problem

Please let us know how you are getting along,

Thanks,

Nick

Posted 9 months ago #
joemalf
Member

Hey Nick/Crew,

I went through the link you mentioned and followed the instructions. I went into the Wordpress Media Settings as well and turned off 'hard crop'. This did a pretty good job after I re-uploaded the images. I made a few other customizations to the code and have attempted further ones.

There are only two things left which I am sure are minor corrections, but tough for me to figure out. Here's what is left:

- I would like to fit the product thumbnail containers to the product images contained within them. Also, the height of the landspace product image container is larger.
Example

- I am finding that the lanscape product image is not accommodated width-wise on the product page layout. Perhaps there is a max/min value that would do it?
Example

Again, if there is more information required, let me know. I feel like I'm just over-looking a set of values and may have to deal with values on the product page coding.

Thank you again.

Posted 9 months ago #
Nick
Moderator
Hi Joe,

There's probably a better way to do this, but for the life of me I can't think of one. I can tell you a quick work around and you can decide whether it suits you, because visually the experience seems to be identical.

What we basically going to do, is rip the class thumbnail_container from the div and place it in front of the classes on the images. This way no matter what the size of the thumbnail, is , the hover effect will know the constraints even if each thumbnail has unique dimensions.

So lets open config.php in woocommerce-config directory, and look on line 343 or so for : echo "<div class="thumbnail_container">;

now please look at the code below, that is how that small block should look.
```
//echo "<div class='thumbnail_container'>";
	echo "<div class='thumbnail_container_inner'>";
		echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' );
		echo $link;
		echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";

		echo "</div>";
	//echo "</div>";
```
Please let us know how it worked out.

Thanks,

Nick
Posted 9 months ago #
joemalf
Member

Hey Nick,

I love that code. I think it's doing something really good. It cleaned up a lot on the hover and I really appreciate the static 'show details' button. Now I feel there is an image constraint issue left. It seems like the prior code you supplied is accommodating varying product image dimensions, it just may now call for some sort of height-max? They do exist in my Woocommerce and Wordpress settings, but don't seem to be affecting these.

What do you think?

Example [1]

Example [2]

Example [3]

Again, thank you so much.

Posted 9 months ago #
Nick
Moderator
Hi Joe,

Glad you like the fix. I hope I understood your question, if not the fault is mine:

You can put in the max height, but would have to remove the min height, since in the 3 pages you show, the max height would be lower than the min height. which is essentially useless since it always equals the actual height. Need to remove all the min-heights, and add a consistent max height to have all the images of identical height. (below is example of 500px).
```
.attachment-shop_catalog.thumbnail_container.wp-post-image {max-height:500px;}
```
If you have on the same page one image on 20px x 400px and a second image of 400px x 20px , it will be not easy to make them both fit perfectly side by side, without making one or both of the images lose quality.

Thanks,

Nick
Posted 9 months ago #
joemalf
Member
I got it all product images to fit on the shop catalog and related product sections. The process is documented below:

1. All instances of “width:100%;height:auto;” for images in woocommerce-config > woocommerce-mod.css were removed.
http://www.thedesignguys.co.uk/woocommerce-image-blurring-problem

2. The below codes was placed into woocommerce-config > config.php
```
//echo "<div class='thumbnail_container'>";
	echo "<div class='thumbnail_container_inner'>";
		echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' );
		echo $link;
		echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";

		echo "</div>";
	//echo "</div>";
}
```
3. Image parameters were placed into woocommerce-config > woocommerce-mod.css via this code. (this instance was for images with a 300px max-width)

.attachment-shop_catalog.thumbnail_container.wp-post-image {max-width:300px; height:auto; max-height:300px; width:auto;}

4. Image parameters for related products/upsells were placed into the same document, woocommerce-config > woocommerce-mod.css
```
.related ul.products li.product img, .upsells.products ul.products li.product img, .related ul li.product img, .upsells.products ul li.product img{ height:100%; height:150px;  width:auto; max-width:600px;
}
```
Posted 9 months ago #
joemalf
Member

Thank you for all the help. With a little back and forth on the code I was able to get it to react correctly.

Would it be possible to modify the echo "<div class="thumbnail_container">; code that you supplied early to take it off of the related products?

Example

And modify column widths to fill empty space/left-align products. So far, influencing the number of columns cuts off the product images.

Example

Posted 9 months ago #

Nick
Moderator

Hi Joe,

Mistake was mine. Please try this. substitute this line (from above)

echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' );

to look like

if ( function_exists( 'is_product' )  &&  is_product() ) {
		echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog' );
	} else {
		echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' );
	}

jQuery would be nicer, I am just worried in some browsers it may flicker for a split second and this will do the trick.

Let me know how it works out,

Thanks,

Nick

Posted 9 months ago #

joemalf
Member

Sorry about that Nick - I got my definitions mixed up.

I meant to ask about keeping the thumbnail_container but allow it to link to the product page when clicked. Would this be doable?

Thanks for looking out!

Posted 9 months ago #

Nick
Moderator

Please try this , replace the entire block you pasted above with the one below

//echo "<div class='thumbnail_container'>";
	echo "<div class='thumbnail_container_inner'>";
		echo "<a class='porfolinki' href='".get_permalink($post->ID)."'>".get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' )."</a>";
		//echo get_the_post_thumbnail( get_the_ID(), 'shop_catalog thumbnail_container' );
		echo $link;
		echo "<a class='button show_details_button $extraClass' href='".get_permalink($post->ID)."'>".__('Show Details','avia_framework')."</a>";
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";

		echo "</div>";
//	echo "</div>";

Thanks,

NIck

Posted 9 months ago #

joemalf
Member

That did it, Nick! Thank you for all the help, brother! The site's looking good and functioning real well.

*Resolved*

All the Best,

Joe

Posted 9 months ago #
Devin
Moderator

Glad Nick was able to help you solve that!

Regards,

Devin

Posted 9 months ago #