Image resizing then Thumbnail create using crop

Hi There,

I have a question with the way that the thumbnail creation happens.
When i upload an image that has a different height / width, the thumbnail gets created as a smaller thumbnail image keeping the aspect ratio, but then you get white spaces as it doesn't fill the whole space of the container set.

I also dont want to set it to stretch the images in css.
Is there a way, that when the thumbnail gets created, it automatically crops the image?

So if i upload an image of 400 x 500px for a product, and the thumbnail size is set to 100 x 100px, that hikashop should rather create the thumbnail by

• Copying the image to the thumbnail folder
• reducing the image size to 100 x 125px
• then crop the top and bottom of the image off to make the image 100 x 100px

Then at least all the thumbnails on the site will look a lot better taking up the each image container and the option to click the image and see the full, uncropped, image open up will be available.

See the image below.




Is this at all possible by editing some code, or is this a functionality that possibly might be considered for a future version?
(if possible, any code editing would be better for now)

Thanks in advance for your help.

Regards

Ok, so ive helped myself by using css to size the stretch image to either 100% height or 100% width depending and still preserve the aspect ratio and then hide the extra sides or top and bottom of the image that are out of the borders of the container and then centralised it horizontally. The only thing i couldnt do with css is centralise it vertically.
Just incase anyone wants to achieve the same thing you can pm me, or post back here.

It works ok like this but it would still be better if hikashop itself could crop the images perfectly.
So still would like to know an answer to the original post if you get a chance.

Thanks

I am intersted, how didi you do that?

Is cropping image function being implemented?

Also, can I set a product main image width 100% meanwhile other images have thumbnail size?

At the moment only way to have this is to no set thumbnail size in backend parameters, or set it to 0, then add CSS code:

.hikashop_product_main_image_subdiv img {
width: 100% !important;
}

Anyway in product list page, etc, no thumbnails are displayed.

Any solution?

Hi,

The image cropping is not being implemented.
Actually the best solution is to use a third software like Xnview to manage the images of a folder, there is cropping options.
And then upload the images via FTP in the folder "media/com_hikashop/upload/thumbnail_00x00" where "00" is the size set in the thumbnail parameter.

The product main image size can be set in Configuration > Main > Images.
Thumbnail and product image size are two different parameters, so you can set a size for the thumbnails and set a size for the main product image and don't use css properties.

Eventually what I did (which was the easiest for my customers too) was find a desktop app on the internet called BimpLite.

It lets you set up cropping, image sharpening, resizing, renaming, converting formats etc.
You can then also set up ftp profiles.
Once you have done that you save all the settings to a file and send it to the client with the app. they install, import all the settings and off they go.
Everything automated.

I set up 2 different configs with all the settings and then created an ftp account for them which gives them access to JUST that hikashop image folder and the thumbnail folder.
1 config was for resizing all the images to a max resolution of 800x600 and upload to the main hikashop image folder and then I created another profile which resized the images and cropped them to thumbnail size and uploaded to the thumbnail folder.

It works really well, albeit a bit slow as its uploading 1 file at a time (and has to open ftp connection for each file)

Hope this helps.

Xavier wrote: The product main image size can be set in Configuration > Main > Images.

Hi Xavier, thanks for reply.

Anyway I would set the main image width at 100% and actually that's not possible 'cause I just can set it in px.
Would you consider a % width and height in future releases?

Best solution would also be a 100% width and height with cropping image (so it's not deformed and everything will look well proportioned into a square.

Thanks in advice.

At this moment it's not on our todo list to allow to set the width/height in %, because to resize the images we need px.
In this case, if we set "%" it will resize the image depending on it's original size.

Ex:
Image_A:
- Original size: 500*500
- 50% resized: 250*250

Image_B:
- Original size: 800*800
- 50% resized: 400*400

So it's not really coherent. Generally we want that all the images have the same size.

Then for the display on the product page or somewhere else, it's the css properties that need to be used.