Auto-Type OpenCart Image Resize

Written by in Tutorials on February 20, 2013  |  39 Comments

auto-type-opencart-image-resize

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 :
resize-image-based-on-height-or-width-1

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:

resize-image-based-on-height-or-width-2

vQmod file so you can use and test it:

Download3134 downloads

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.

Tags: , , ,

About the Author

The man behind OpencartNews and EchoThemes.

View all posts by

39 Comments on "Auto-Type OpenCart Image Resize"

  1. Jolene September 11, 2015 at 7:01 am · Reply

    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. :(

  2. moein July 25, 2015 at 1:35 pm · Reply

    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

  3. izhar November 15, 2014 at 6:37 am · Reply

    Its Not working on open cart version 1.5.6.please give me suggestion for it.

  4. Rodislav Moldovan June 10, 2014 at 8:15 pm · Reply

    this is the line I’m using:

    $new_height = $width * $height_orig / $width_orig ;
    $image->resize($width, $new_height, $type);

  5. sam February 3, 2014 at 8:56 am · Reply

    I am getting fatal errors!!!!!!! pls help me out

  6. Totema January 21, 2014 at 3:26 pm · Reply

    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.

    • Qahar January 26, 2014 at 9:06 am ·

      Upload all file inside “upload/” folder to your root.

  7. David November 5, 2013 at 8:45 pm · Reply

    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.

  8. sanket bhatt October 18, 2013 at 2:44 pm · Reply

    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

    • Qahar October 18, 2013 at 4:08 pm ·

      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

    • sanket bhatt October 22, 2013 at 7:04 am ·

      Hi Qahar , thanks for help the trick worked for me..

  9. Yuriy September 26, 2013 at 5:28 pm · Reply

    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!

    • Qahar October 9, 2013 at 1:03 pm ·

      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

    • Yuriy October 9, 2013 at 6:26 pm ·

      Thanks! Works perfectly now!

  10. Chris September 24, 2013 at 8:18 pm · Reply

    Funciona perfecto, GRACIAS.

  11. Rifal September 9, 2013 at 6:35 am · Reply

    Thank you sooo mucch… :)
    Because this tutorial, my problem fix…

  12. antracit July 28, 2013 at 4:53 pm · Reply

    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).

    • antracit July 28, 2013 at 4:58 pm ·

      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).*

  13. Mohamed July 9, 2013 at 12:09 am · Reply

    Woooow, Thanks for the great tutorial, that was what I exactly needed.
    Thanks.

  14. sumant jha June 26, 2013 at 11:34 am · Reply

    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="” />

  15. Rashed June 23, 2013 at 5:08 am · Reply

    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

    • Rashed June 23, 2013 at 5:11 am ·

      I use your VQmod but its not work .

  16. April May 6, 2013 at 9:21 am · Reply

    Hi, I added the file but it is still all the same as before?

    • Qahar May 6, 2013 at 11:11 am ·

      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’);

    • Satya June 17, 2013 at 1:42 pm ·

      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

    • netrar June 19, 2013 at 11:11 am ·

      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.

  17. Mahedi April 21, 2013 at 1:20 pm · Reply

    I need like this

    http://www.vivaahsurat.com/sarees/

    product thumb image crop but when open product show full image.

    • netrat April 23, 2013 at 8:30 pm ·

      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.

    • Mahedi April 29, 2013 at 7:40 am ·

      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.

  18. netrat March 20, 2013 at 8:00 pm · 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’

    • netrat March 20, 2013 at 8:08 pm ·

      Or more sample: “else { $image->resize($width, $height); }”

    • Qahar March 21, 2013 at 8:05 am ·

      Yes you right, I forgot to check for the squre image. Will test it again, thanks.

  19. netrat March 20, 2013 at 7:52 pm · Reply

    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’.

  20. João Mello March 15, 2013 at 1:32 am · Reply

    It did not work in 1.5.5.1, continues in the same way

  21. Silisav March 3, 2013 at 12:08 pm · Reply

    Looks like exactly what I needed! Will it work with Version 1.5.4? Thanks!

    • Qahar March 4, 2013 at 11:49 am ·

      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.

    • Silisav March 5, 2013 at 11:53 pm ·

      It worked! Thank you so much!

  22. Leo February 23, 2013 at 5:45 pm · Reply

    This is great. Good job.

    • JKWEBCO February 27, 2013 at 9:16 am ·

      Good Job, It Works!!!

Leave a Comment

comm comm comm