Image thumbnails

First of all, sorry if this is confusing, I'm finding it very hard to describe what I want!...

I've set image thumbnails to be 250x250. However, some images being uploaded are not square. This creates many thumbnails in different sizes. This is a problem because on product pages the div for displaying the main image is 250x250, and the image aligns to the top instead of the middle. I've tried to fix this with #hikashop_main_image {vertical-align:middle !important;} but it has no effect (incidently, is there a way of getting this to work?)

So, I have created jpgs which are 250x250 and have the product image in the centre with white space around. These images are in the thumbnail_250x250 folder.

I'd like to use the images in this thumbnail_250x250 folder every time, instead of images which are not square using different sizes, e.g. thumbnail_157x250, thumbnail_221x250, thumbnail_195x250 etc etc.

Is there a way to set the images to only use the thumbnails in the thumbnail_250x250 folder?

Thanks,

Phil

Hi Nicolas, I had tried that but it didn't work too well since a lot of the full product images are quite wide and large.

Is there a way to stop the product image from having its width and height set in the html? That way, I could change the resized images in the uploaded thumbnail folders to 250px by 250px. I've tried doing this now but it skews it since the html declares the image should be height="157" width="250" (or whatever the height turns out to be).

e.g.

<img width="250" height="157" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle;" id="hikashop_main_image" alt="image desc" src="/media/com_hikashop/upload/thumbnail_157x250/example-image.jpg">

is how the image is displayed on the product show page. Is it possible to remove the height adn width declarations?

Hi Nicolas, got this working with:

.hikashop_main_image_div img {height : 250px !important;}

Thanks for pointing me int he right direction

Phil

This doesn't work for product variants. When a variant is being viewed on the product page the image get's the variant numbers added on the css class/id such as "hikashop_main_image_div_60_11_13".

Any suggestions on how to get round this?

Thanks,

Phil

Just had a closer look and realised that it works with the class "hikashop_product_main_image_thumb".

All works fine now, thanks for your time.

Phil