Auto-Type OpenCart Image Resize
Written by Qahar in Tutorials on February 20, 2013 | 39 Comments
OpenCart v.1.5.5 come with new option to resize images based on the width or height. With this new approach, we can avoid the white space around image. Force to zoom and crop them by set the fourth parameter of resize function; based on the image width or height.
Image resize function with new parameter type:
$this->model_tool_image->resize($filename, $width, $height, $type); // resize type options: // default = scale with whitespace // w = fill according to width // h = fill according to height
Resize Function Test
Lets test a portrait and landscape image with different resize type to make it easy comparing the result.
$this->load->model('tool/image');
// original image size: width:400px - height: 225px (landscape)
$image_1 = $this->model_tool_image->resize('data/car-1.jpg', 200, 150);
$image_2 = $this->model_tool_image->resize('data/car-1.jpg', 200, 150, 'w');
$image_3 = $this->model_tool_image->resize('data/car-1.jpg', 200, 150, 'h');
// original image size: width:400px - height: 510px (portrait)
$image_4 = $this->model_tool_image->resize('data/car-2.jpg', 200, 150);
$image_5 = $this->model_tool_image->resize('data/car-2.jpg', 200, 150, 'w');
$image_6 = $this->model_tool_image->resize('data/car-2.jpg', 200, 150, 'h');
And the result is :
Auto-Type Resize
As you see on image above, we need to choose the correct resize type to remove the white space and get a good result. So I come up with an idea how to recognise the image ratio automatically then set the correct resize type. After some research, I get a solutions bellow.
Code bellow is a modification of the catalog/model/tool/image.php
// find line 43
$image->resize($width, $height, $type);
// replace with
if ($type == 'a') {
if ($width/$height > $width_orig/$height_orig) {
$image->resize($width, $height, 'w');
} elseif ($width/$height < $width_orig/$height_orig) {
$image->resize($width, $height, 'h');
}
} else {
$image->resize($width, $height, $type);
}
To automatically recognise the best resize type for the image, use ‘a’ when you resize the image.
$this->model_tool_image->resize('data/car-1.jpg', 200, 150, 'a');
And this is the result using the auto-type image resize with some various test:
vQmod file so you can use and test it:
If you found a strange result, have a suggest or come up with a better idea, feel free to comment.
Update October 9, 2013
This tutorial is intended as concept-tutorial and not automatically remove whitespace when you install the package. I’m updating the code above to work automatically and fix some issue.
You can found it here.
39 Comments on "Auto-Type OpenCart Image Resize"
Hi,
I’m sorry but I don’t quite understand.
Where do I find the controller files (or which controller files) do I need to update this code in?
$this->model_tool_image->resize(‘data/car-1.jpg’, 200, 150, ‘a’);
Please help.
hi.
I used this vqmod it’s great and works fine. but i get error in the admin panel page.
just admin panel page, other pages are fine
Notice: Error: FUNCTION opencartasli.pyear does not exist
Error No: 1305
SELECT SUM(total) AS total FROM `oc_order` WHERE order_status_id > ’0′ AND pyear(date_added) = ’1394′ in C:\wamp\www\opencart asli\system\database\mysql.php on line 50
Its Not working on open cart version 1.5.6.please give me suggestion for it.
this is the line I’m using:
$new_height = $width * $height_orig / $width_orig ;
$image->resize($width, $new_height, $type);
I am getting fatal errors!!!!!!! pls help me out
Hello i can’t see where to upload the file in wich directory? I dont have directory upload in my opencard 1.5.5, please tell me what to do where to upload the file.
Upload all file inside “upload/” folder to your root.
I like this mod but my images resolution reduces making the new version of the image pixelate. They do look great as thumbnails. But when I go to the main item page the image is cropped and centred on a rather random area.
Also the images are all duplicated on the product page. Creates two of each.
Hello,
i am working on a site http://iim.ahmedabadwebs.com/index.php?route=common/home
i have used the above technique to scale images, however what i want is the images should not be scaled from top, as you can see the faces of models in cloths are getting cutted.
so images should be scaled from bottom side up and not from top.
can you suggest some way out for this, any help or suggestion would be of great help
Default scale is start from vertical and horizontal center.
Since you not mention your OpenCart version, I assume you use v.1.5.6
Open system\library\image.php and comment line 93
//$ypos = (int)(($height - $new_height) / 2);
It will scale from top center. You should see the model face now, but it will cut more space for the bottom of the pic
Hi Qahar , thanks for help the trick worked for me..
Hello,
Do you have to install the .xml script AND modify some OC code for this to work?
From what I gather, this script is supposed to make the product pop ups show up in the size the the image was uploaded to the server. Perhaps , I’m doing something wrong but, it doesn’t work for me as this page shows: http://lancasterorganicgrowers.com/products/grass-fed-beef/product/56-beef-ribs The popup still has the white borders.
I installed the script and cleared the cache. Not sure what else I should do…
Thanks!
This tutorial need you to change all OpenCart image resize code to: $this->model_tool_image->resize(‘data/car-1.jpg’, 200, 150, ‘a’);
I create another package to work automatically and sort some issue since I write this tutorial. You can look at https://github.com/qahar/oc-image-auto-resize
Thanks! Works perfectly now!
Funciona perfecto, GRACIAS.
Thank you sooo mucch…
Because this tutorial, my problem fix…
Hello, sorry for the bad language, could not suggest what I should do? First thing that struck me, that we are talking about version 1.5.5, I have version 1.5.4.1 whether this decision?Downloaded version 1.5.5 and replaced the two files on the server (/system/library/image.php and /catalog/model/tool/image.php), flooded xml downloaded from here, cleaned up the image cache. all remained still. What am I doing wrong? I need to image regardless of the original size of the acquired size 180х150 without the white fields. (I’m talking about images on the category pages).
First noticed it on version 1.5.5, so I did replace the files in their version of 1.5.4.1 files version 1.5.5 (files which is replaced by a specified above).*
Woooow, Thanks for the great tutorial, that was what I exactly needed.
Thanks.
fix this problem.while i use image resize method it couldnot show the images
my controller code here
$this->load->model(‘tool/image’);
foreach($all_users as $users){
$this->data['all_users'][] = array(
‘user_name’ => $users['user_name'],
‘user_address’ => $users['user_address'],
‘user_phone’ => $users['user_phone'],
‘user_email’ => $users['user_mail'],
‘user_image’ => $this->model_tool_image->resize(‘../catalog/upload/’.$users['user_image'],200,200), //here image resize code
‘delete’ => $this->url->link(‘custom/helloworld/delete’,'token=’ . $this->session->data['token'].’&user_id=’.$users['user_detail_id']),
‘edit’ => $this->url->link(‘custom/helloworld/edit’,'token=’ . $this->session->data['token'].’&user_id=’.$users['user_detail_id'])
);
template file code
<img src="” />
Dear,
Please look my website product thumb so many white space top bottom left & right, its look very ugly. do you have any solutions regarding this issue
http://wholesale.auracollectionz.com/Salwar-Kameez/Shivam-6000-Series
thanks
Rashed
I use your VQmod but its not work .
Hi, I added the file but it is still all the same as before?
It’s not automatically change image in OpenCart.
Basicly the tutorial is to show how it works.
To test the image resize you must change default OpenCart image to:
$this->model_tool_image->resize(‘data/image.jpg’, 200, 150, ‘a’);
Hi,
I copied the XML. Not working for me in OC 1.5.5.1.
You mentioned about doing “$this->model_tool_image->resize(‘data/image.jpg’, 200, 150, ‘a’)”
to test. Which file this needs to be done? Any new VQmod which i need to use.
Thnx for ur efforts
You should find “$this->model_tool_image->resize(…” method call in controller files and change it. You should clear all images in image/cache to make it work.
I need like this
http://www.vivaahsurat.com/sarees/
product thumb image crop but when open product show full image.
I’ve add for my site this to have nice centered thumbs and keep the original image ratio :
…
if ($type == ‘a’) {
if ($width/$height > $width_orig/$height_orig) {
$image->resize($width, $height, ‘w’);
} elseif ($width/$height resize($width, $height, ‘h’);
} else {
$image->resize($width, $height);
}
}
elseif ($type == ‘or’) {
if ($width_orig > $height_orig) {
$rat = $width/$width_orig;
$image->resize($width, $height_orig*$rat, ‘w’);
} elseif ($width_orig resize($width_orig*$rat, $height, ‘h’);
} else {
$image->resize($width, $height);
}
}else {
$image->resize($width, $height, $type);
}
…
I’m steel working on part of the script, that doesn’t allows smaller images to get stretched. Sorry for my bad english.
No problem,
I want to crop from left top angle. have you any code or scrip? please send me on onlineseowala [at] gmail [dot] com
please i waiting your reply.
Great work! But there is a small problem, when resizing square images automatically. They didn’t resize at all. I have solved by adding “else if($width/$height == $width_orig/$height_orig){
$image->resize($width, $height, ‘w’);” …or ‘h’
Or more sample: “else { $image->resize($width, $height); }”
Yes you right, I forgot to check for the squre image. Will test it again, thanks.
Great work! But I’ve found a small issue - square images aren’t resized correctly. They didn’t resized at all, when I set ‘a’.
It did not work in 1.5.5.1, continues in the same way
Looks like exactly what I needed! Will it work with Version 1.5.4? Thanks!
Not by default.
Backup this file at your site then copy: system\library\image.php and catalog\model\tool\image.php from 1.5.5.1 to 1.5.4 then use vQmod file above. May be it will work, I’m not test it.
It worked! Thank you so much!
This is great. Good job.
Good Job, It Works!!!