[Resolved] I need to be able to limit height of the product image

[Author]

Posts

[alexandreL-2]

I am trying to:
Limit the height of the product image as I can do in the normal toolset image.

Second thing, the product image should be seem as a product image by the other plugins, I have a very good plugin to create a list of favorites but it doesn't work because it should detect the product image a put a heart over it as you can see here: hidden link
I had to create this list with another plugin until I can find and alternative.

Link to a page where the issue can be seen:
hidden link

I expected to see: all the images of the products should have the same size as I did in the end of the page in the related products, I had to use the normal image there, but in the top I don't want to use it because, I need the sale badge and the gallery.

[alexandreL-2]

In case I have the toolset archive active in my attempt to fix it or some of you is trying to fix my other ticket I send here the picture about the second fix I need about the product image to be detected by other plugins as a PRODUCT IMAGE. thanks

[Jamal]

Hello and thank you for contacting the Toolset support.

I am sorry but I am not sure to understand your request. Are you talking about the difference in height in this screenshot? hidden link

It is also worth to mention, that product images are generated by WooCommerce. Even if displayed using a Toolset shortcode or a Toolset Block, it is still the result generated by WooCommerce. You may need to check how WooCommerce customizes image sizes. Usually in Appearance > Customize > WooCommerce > Product Images or using custom code.
https://docs.woocommerce.com/document/image-sizes-theme-developers/

I confirm that the credentials are working. I just need an explanation of what you are trying to implement or fix. Please add screenshots or record a screencast to efficiently explain the issue.

[alexandreL-2]

First and more important is the is the height of the first image that completely destroys de layout compare this hidden link to this hidden link
The height should be fixed as i have done in the VIEW that shows the related products has you can see in the image attached, because I used the normal image I can fixed the dimensions as you can see in the second attached image.

Second the thumbnails (the ones that you pointed in your link) should have the same dimension too.

Thanks

[alexandreL-2]

I tried many times do it with woocommmerce in the menu that you suggested but it doesn't change anything, tried many values.

[Jamal]

I can see several ways of decreasing the height of the image, but I think that the best solution is to use another image for it. An image that has the best aspect ratio. For example, the image in hidden link is 1079 by 1230 pixels, while the image in hidden link is 603 by 1505 pixels

In the shop archive template, you are using a Toolset Image block, the block allows setting a custom width and height. On the product content template, you are using a "Product Image" block. Check this screenshot hidden link
The "Product Image" block does not allow setting a custom width and height, because it just asks WooCommerce for the image(or the gallery) and returns it. It does not affect it in any way. Just a simple interface for the WooCommerce Image generation process.

As you can read in WooCommerce documentation here

woocommerce_single shows the full product image, as uploaded, so is always uncropped by default. It defaults to 600px width.

The image's width is 603px, so the height will be ( 1505 x (600 / 603)) = 1497

This being said, I can suggest the following solutions:
- Using an Image block instead of a Product Image block, and setting desired width/height. But you will lose the ZoomIn feature(provided by WooCommerce).
- Changing the woocommerce_single dimensions with custom code and setting a lower height than 1505. This will make the image appear with a lower width because of its aspect ratio. The image is displayed with a lower width in the shop page or related products section as you can see in this screenshot hidden link

So, I'll let you decide what's the best solution you would like to implement. But, I still believe that changing the featured image for that product with one of the images in its custom field "Fotos". Probably the first one "garment_ss200905.jpg" as it has a good aspect ratio 1067 by 1600 pixels.

I hope this helps. Let me know if you have any questions.

[alexandreL-2]

I prefer the second proposition, because I really want to use the woocommerce gallery, so as I did in the related products, I want to set a max height, and the rest to be adjusted accordingly.

[Jamal]

Awesome. We can do that.
I tired with custom code to customize the WooCommerce generated image but it did not help, I guess that the theme overrides it.

So, I tried the CSS way, and I was able to fix the height to a maximum of 600px with the following code:

.woocommerce div.product div.images img {
    display: block;
    width: auto;
    max-height: 600px;
    box-shadow: none;
}

I added this code to the content template's CSS section. Check this screenshot hidden link

I'll let you adapt it to another value if you desire so.

[alexandreL-2]

My issue is resolved now. Thank you!