[Skip to main content](#vessel-content) # Image resizing then Thumbnail create using crop ## - **[Arathol](/forum/user/3260-arathol "View Arathol's Profile")** - [![Arathol's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3260-arathol "View Arathol's Profile") Topic Author - [ Offline](/forum/user/3260-arathol) Less More - Posts: 37 - Thank you received: 1 - - 14 years 8 months ago [\#40954](#40954) by [Arathol](/forum/user/3260-arathol "View Arathol's Profile") *[Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#40954 "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")* was created by *[Arathol](/forum/user/3260-arathol "View Arathol's Profile")* 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. [ ![thumbnailCreation.png](/forum/attachment/2919) ](/forum/attachment/2919 "...ilCreation.png") 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 - [ ![thumbnailCreation.png](/forum/attachment/2919) ](/forum/attachment/2919 "...ilCreation.png") [ ](/forum/attachment/2919?download=1 "...ilCreation.png") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Arathol](/forum/user/3260-arathol "View Arathol's Profile")** - [![Arathol's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3260-arathol "View Arathol's Profile") Topic Author - [ Offline](/forum/user/3260-arathol) Less More - Posts: 37 - Thank you received: 1 - - 14 years 8 months ago [\#40979](#40979) by [Arathol](/forum/user/3260-arathol "View Arathol's Profile") Replied by *[Arathol](/forum/user/3260-arathol "View Arathol's Profile")* on topic *[Re: Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#40979 "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 Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[nicolas](/forum/user/63-nicolas "View nicolas's Profile")** - [![nicolas's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar63.png)](/forum/user/63-nicolas "View nicolas's Profile") - [ Away](/forum/user/63-nicolas) Less More - Posts: 86302 - Thank you received: 14273 - - 14 years 8 months ago [\#40985](#40985) by [nicolas](/forum/user/63-nicolas "View nicolas's Profile") Replied by *[nicolas](/forum/user/63-nicolas "View nicolas's Profile")* on topic *[Re: Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#40985 "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")* Hi, The code where the thumbnails are generated is in the file administrator/components/com_hikashop/helper/image.php The crop would have to be added in the function _resizeImage. That could indeed be an interesting feature to add as an option in the future. If you happen to do it, don't hesitate to share it. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[teubernet](/forum/user/28697-teubernet "View teubernet's Profile")** - [![teubernet's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/28697-teubernet "View teubernet's Profile") - [ Offline](/forum/user/28697-teubernet) Less More - Posts: 9 - Thank you received: 0 - - 12 years 11 months ago - 12 years 11 months ago [\#130404](#130404) by [teubernet](/forum/user/28697-teubernet "View teubernet's Profile") Replied by *[teubernet](/forum/user/28697-teubernet "View teubernet's Profile")* on topic *[Re: Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#130404 "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")* I am intersted, how didi you do that? Last edit: 12 years 11 months ago by [teubernet](/forum/user/28697-teubernet "View teubernet's Profile"). Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[deltafidesign](/forum/user/4846-deltafidesign "View deltafidesign's Profile")** - [![deltafidesign's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4846.png)](/forum/user/4846-deltafidesign "View deltafidesign's Profile") - [ Offline](/forum/user/4846-deltafidesign) Less More - Posts: 272 - Thank you received: 13 - - 12 years 10 months ago [\#135848](#135848) by [deltafidesign](/forum/user/4846-deltafidesign "View deltafidesign's Profile") Replied by *[deltafidesign](/forum/user/4846-deltafidesign "View deltafidesign's Profile")* on topic *[Re: Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#135848 "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")* 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? Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 12 years 10 months ago [\#135890](#135890) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Re: Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#135890 "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")* 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. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Arathol](/forum/user/3260-arathol "View Arathol's Profile")** - [![Arathol's Avatar](https://www.hikashop.com/media/kunena/core/svg/person.svg)](/forum/user/3260-arathol "View Arathol's Profile") Topic Author - [ Offline](/forum/user/3260-arathol) Less More - Posts: 37 - Thank you received: 1 - - 12 years 10 months ago [\#135899](#135899) by [Arathol](/forum/user/3260-arathol "View Arathol's Profile") Replied by *[Arathol](/forum/user/3260-arathol "View Arathol's Profile")* on topic *[Re: Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#135899 "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")* 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. The following user(s) said Thank You: [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[deltafidesign](/forum/user/4846-deltafidesign "View deltafidesign's Profile")** - [![deltafidesign's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4846.png)](/forum/user/4846-deltafidesign "View deltafidesign's Profile") - [ Offline](/forum/user/4846-deltafidesign) Less More - Posts: 272 - Thank you received: 13 - - 12 years 10 months ago [\#135913](#135913) by [deltafidesign](/forum/user/4846-deltafidesign "View deltafidesign's Profile") Replied by *[deltafidesign](/forum/user/4846-deltafidesign "View deltafidesign's Profile")* on topic *[Re: Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#135913 "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")* > 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. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. - **[Xavier](/forum/user/4105-xavier "View Xavier's Profile")** - [![Xavier's Avatar](https://www.hikashop.com/media/kunena/avatars/resized/size144/users/avatar4105.png)](/forum/user/4105-xavier "View Xavier's Profile") - [ Offline](/forum/user/4105-xavier) Less More - Posts: 13201 - Thank you received: 2322 - - - - [](http://www.kidiweb.fr) - 12 years 10 months ago [\#135920](#135920) by [Xavier](/forum/user/4105-xavier "View Xavier's Profile") Replied by *[Xavier](/forum/user/4105-xavier "View Xavier's Profile")* on topic *[Re: Image resizing then Thumbnail create using crop](/forum/4-how-to/40954-image-resizing-then-thumbnail-create-using-crop#135920 "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")* 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. Please [Log in](/login?return=aHR0cHM6Ly93d3cuaGlrYXNob3AuY29tL2ZvcnVtLzQtaG93LXRvLzQwOTU0LWltYWdlLXJlc2l6aW5nLXRoZW4tdGh1bWJuYWlsLWNyZWF0ZS11c2luZy1jcm9wP3RtcGw9bWFya2Rvd24=) or [Create an account](/component/users/registration?Itemid=101) to join the conversation. Board Categories HikaShop- Install & Update- Product & Category Display- Content Creation- Sales and Orders- - Orders management- - Reports & Statistics- Customers- Checkout- Payment Methods- Shipping Methods- Import & Export (CSV, XLS…)- Specific Features- - Affilation- - Taxes- - Wishlist- - Vote- - Carousel & Slider- - Mass Actions- - Filters & Search- - Discount & Coupon- - Feature Request- Integrations- Showcase- General Talk about HikaShop- Development- - HikaShop 3.0 Beta- Translation- Commercial Jobs HikaShop Components- HikaMarket- - Market: Feature requests- - Market: How to?- - Market: Bug Report- HikaSerial- - General talk about HikaSerial- - Serial: Bug Report- - Serial: How to?- - Support en Français de HikaSerial (French Support)- - HikaSubscription- HikaAuction- - Auction: Feature requests- - Auction: How to?- - Auction: Bug report Hikashop around the world- Support en Français (French Support)- Russian- - FAQ. Курс выживания с Hikashop. Частые вопросы и о- - Расширения Hikashop- - Наши сайты на Hikashop- 日本語版サポート(Japanese Support)- Thai- German Archives- Bug Report- How to? [](/forum/topics/feed/mode-topics?format=feed&type=rss) Time to create page: 0.119 seconds [Powered by](/forum/credits) [Kunena Forum](https://www.kunena.org) [](#top)