Post by batgrl » Mon Sep 12, 2011 5:58 pm

I am looking for code that will allow me to set the WIDTH of my images and will auto configure the height.

What I want in to set books and CDs to 220px wide, but allow the books to expand the image box as needed, beyond the square height of 220px.

Example: books are 220 wide by 320 high, so the image box should expand to allow for the 320 height, but will always stay 220x220 for the cd images, as I would not want those to be 320x320 (too big).

As I am limited to only ONE choice for size of all product images, I would like to have some control beyond the square format.

I know the resizing code resides in the system/library/image.php file but I am so afraid of fouling it up. I haven't a clue.

Any ideas would be greatly appreciated. Thanks.

New member

Posts

Joined
Fri Sep 09, 2011 1:16 pm

Post by batgrl » Thu Sep 15, 2011 3:12 am

My genius friend tweaked the image resize code and it works! Yeah.

Locate the file -
system/library/image.php

Locate the function between lines 54 and 92 that deal with the resizing of the image...

Code: Select all

    public function resize($width = 0, $height = 0) {
    	if (!$this->info['width'] || !$this->info['height']) {
			return;
		}

		$xpos = 0;
		$ypos = 0;

		$scale = min($width / $this->info['width'], $height / $this->info['height']);
		
		if ($scale == 1) {
			return;
		}
		
		$new_width = (int)($this->info['width'] * $scale);
		$new_height = (int)($this->info['height'] * $scale);			
    	$xpos = (int)(($width - $new_width) / 2);
   		$ypos = (int)(($height - $new_height) / 2);
        		        
       	$image_old = $this->image;
        $this->image = imagecreatetruecolor($width, $height);
			
		if (isset($this->info['mime']) && $this->info['mime'] == 'image/png') {		
			imagealphablending($this->image, false);
			imagesavealpha($this->image, true);
			$background = imagecolorallocatealpha($this->image, 255, 255, 255, 127);
			imagecolortransparent($this->image, $background);
		} else {
			$background = imagecolorallocate($this->image, 255, 255, 255);
		}
		
		imagefilledrectangle($this->image, 0, 0, $width, $height, $background);
	
        imagecopyresampled($this->image, $image_old, $xpos, $ypos, 0, 0, $new_width, $new_height, $this->info['width'], $this->info['height']);
        imagedestroy($image_old);
           
        $this->info['width']  = $width;
        $this->info['height'] = $height;
    }


and replace it with ...

Code: Select all

    public function resize($width = 0, $height = 0) {
    	if (!$this->info['width'] || !$this->info['height']) {
			return;
		}

		$xpos = 0;
		$ypos = 0;

		//$scale = min($width / $this->info['width'], $height / $this->info['height']); //original code commented out
		$scale = $width / $this->info['width']; // New code - width set in admin panel divided by original size of uploaded image.
		
		if ($scale == 1) {
			return;
		}
		
		$new_width = (int)($this->info['width'] * $scale);
		$new_height = (int)($this->info['height'] * $scale);
		    	

//		$xpos = (int)(($width - $new_width) / 2); //original code commented out
//   	$ypos = (int)(($height - $new_height) / 2); //original code commented out
		$xpos = 0; // new code
   		$ypos = 0; // new code
        
				        
       	$image_old = $this->image;
        $this->image = imagecreatetruecolor($width, $new_height); // changed height to new_height
			
		if (isset($this->info['mime']) && $this->info['mime'] == 'image/png') {		
			imagealphablending($this->image, false);
			imagesavealpha($this->image, true);
			$background = imagecolorallocatealpha($this->image, 255, 255, 255, 127);
			imagecolortransparent($this->image, $background);
		} else {
			$background = imagecolorallocate($this->image, 1, 1, 1); // change 1, 1, 1, to 255, 255, 255 for a white background.
		}
		
		imagefilledrectangle($this->image, 0, 0, $new_width, $new_height, $background);
	
        imagecopyresampled($this->image, $image_old, $xpos, $ypos, 0, 0, $new_width, $new_height, $this->info['width'], $this->info['height']);
        imagedestroy($image_old);
           
        $this->info['width']  = $width;
        $this->info['height'] = $new_height; // changed height to new_height
    }
NOTE:
// unused original code has been left in place, but commented out, in case you ever want to switch back, and just to show what's been changed.

What will happen is this:

When you set your image sizes in the Admin panel (System > Settings > Image tab), instead of tall images getting shrunk to fit into a square box, they will automatically expand to fit the width you have set for your products.

For example: you set your product thumbnails to be 225 x 225.
Book covers will appear 225 x (the height in proportion to the width)
and cd covers will still be 225 x 225.
Also the image will align to the top of the div .box instead of floating in the center of a tall box. For this reason, set all images to square proportions.

Anyway, this is what I wanted for my own cart. Some may want to keep all the products the same size, which is what the original code does very well, but I like them to be relative to one another.

Also, thanks to 'uksitebuilder' for helping me with the image background color. That's also commented.

New member

Posts

Joined
Fri Sep 09, 2011 1:16 pm

Post by Tineke » Tue Jun 18, 2013 5:32 pm

I would like this but am using version 1.5.5.1. Does anyone have the code for this?

Newbie

Posts

Joined
Tue Jun 26, 2012 11:45 pm

Post by lowpitch » Mon Apr 28, 2014 3:00 pm

To anyone interested, here's how to do it in 1.5.6.3:

In system/library/image.php search for:

Code: Select all

	public function resize($width = 0, $height = 0, $default = '') {
		if (!$this->info['width'] || !$this->info['height']) {
			return;
		}

		$xpos = 0;
		$ypos = 0;
		$scale = 1;

		$scale_w = $width / $this->info['width'];
		$scale_h = $height / $this->info['height'];

		if ($default == 'w') {
			$scale = $scale_w;
		} elseif ($default == 'h'){
			$scale = $scale_h;
		} else {
			$scale = min($scale_w, $scale_h);
		}

		if ($scale == 1 && $scale_h == $scale_w && $this->info['mime'] != 'image/png') {
			return;
		}

		$new_width = (int)($this->info['width'] * $scale);
		$new_height = (int)($this->info['height'] * $scale);			
		$xpos = (int)(($width - $new_width) / 2);
		$ypos = (int)(($height - $new_height) / 2);

		$image_old = $this->image;
		$this->image = imagecreatetruecolor($width, $height);

		if (isset($this->info['mime']) && $this->info['mime'] == 'image/png') {		
			imagealphablending($this->image, false);
			imagesavealpha($this->image, true);
			$background = imagecolorallocatealpha($this->image, 255, 255, 255, 127);
			imagecolortransparent($this->image, $background);
		} else {
			$background = imagecolorallocate($this->image, 255, 255, 255);
		}

		imagefilledrectangle($this->image, 0, 0, $width, $height, $background);

		imagecopyresampled($this->image, $image_old, $xpos, $ypos, 0, 0, $new_width, $new_height, $this->info['width'], $this->info['height']);
		imagedestroy($image_old);

		$this->info['width']  = $width;
		$this->info['height'] = $height;
	}
Replace with:

Code: Select all

	public function resize($width = 0, $height = 0, $default = '') {
		if (!$this->info['width'] || !$this->info['height']) {
			return;
		}

		$xpos = 0;
		$ypos = 0;
		$scale = 1;

		$scale_w = $width / $this->info['width'];
		$scale_h = $height / $this->info['height'];

		$scale = $scale_w;

		if ($scale == 1 && $scale_h == $scale_w && $this->info['mime'] != 'image/png') {
			return;
		}

		$new_width = (int)($this->info['width'] * $scale);
		$new_height = (int)($this->info['height'] * $scale);			
		$xpos = 0;
		$ypos = 0;

		$image_old = $this->image;
		$this->image = imagecreatetruecolor($new_width, $new_height);

		if (isset($this->info['mime']) && $this->info['mime'] == 'image/png') {		
			imagealphablending($this->image, false);
			imagesavealpha($this->image, true);
			$background = imagecolorallocatealpha($this->image, 255, 255, 255, 127);
			imagecolortransparent($this->image, $background);
		} else {
			$background = imagecolorallocate($this->image, 255, 255, 255);
		}

		imagefilledrectangle($this->image, 0, 0, $new_width, $new_height, $background);

		imagecopyresampled($this->image, $image_old, $xpos, $ypos, 0, 0, $new_width, $new_height, $this->info['width'], $this->info['height']);
		imagedestroy($image_old);

		$this->info['width']  = $new_width;
		$this->info['height'] = $new_height;
	}
If you want your images to expand horizontally rather than vertically replace this in the new code:

Code: Select all

		$scale_w = $width / $this->info['width'];
		$scale_h = $height / $this->info['height'];

		$scale = $scale_w;
with:

Code: Select all

		$scale_w = $width / $this->info['width'];
		$scale_h = $height / $this->info['height'];

		$scale = $scale_h;

Newbie

Posts

Joined
Sat Apr 26, 2014 8:44 pm

Post by martinvarsano » Wed Feb 28, 2018 10:24 pm

Hello! Thank you for this super useful information! Sadly, does not work on Opencart 2.2.0.0
Anybody knows how to update the code?

Thanks!

Newbie

Posts

Joined
Sat Sep 17, 2016 6:53 am
Who is online

Users browsing this forum: No registered users and 3 guests