Post by cmxsevenfoldxmc » Sat Sep 03, 2016 4:25 am

I'm trying to avoid the resizing (or rather, the addition of white spaces) of the larger images that appear on the main section of the product page.

The reason for this is because I need to show a live preview of a picture frame on the border of the image, and although I already have a working picture frame live preview extension I developed, it does not look good when displaying the picture frame over white space the way opencart renders automatically.

For example:

Product #1 ( 500px width x 300px height ) - meant to be shown as a landscape shot of the beach, with a frame around it.
Product #2 ( 300px width x 500px height ) - meant to be shown as a portrait of a person from top to bottom, with a frame around it.

All the cropping extensions cut into the artwork being sold on the store, which is not what my client wants to display when showing customers the final product.

Would there happen to be an extension like this or some way around this situation?


Posts

Joined
Wed Jul 20, 2016 4:25 am

Post by IP_CAM » Sat Sep 03, 2016 12:46 pm

Unaware of understanding in full, I just want to show you, how easy it is, to present the LARGE Product images, at least, as Original, as they come, unshrinked, and not taken from the image/cache/... section, but directly from the image-main Directory, and displayed exactly in the size, as they where uploaded. And this can be done in all OC Versions.
---
See here, how it looks:
http://www.gratis-anzeiger.com/shop/ind ... ct_id=1100
---
I use this Mod for my OC v.1.5.6.5:
Pop Up Full Size
http://www.opencart.com/index.php?route ... n_id=21042
---
but this one probably does the same, in OC-2:
Automatic Image Popup Sizer
http://www.opencart.com/index.php?route ... n_id=20777
---
Just figured...
Ernie
---
Image

Please do NOT send me Personal Mails, they will no longer be replied to.
---
My Github OC Site: https://github.com/IP-CAM
2'800+ FREE OC Extensions on the World's largest Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by pprmkr » Sat Sep 03, 2016 2:24 pm

cmxsevenfoldxmc wrote:
Product #1 ( 500px width x 300px height ) - meant to be shown as a landscape shot of the beach, with a frame around it.
Product #2 ( 300px width x 500px height ) - meant to be shown as a portrait of a person from top to bottom, with a frame around it.

All the cropping extensions cut into the artwork being sold on the store, which is not what my client wants to display when showing customers the final product.

Would there happen to be an extension like this or some way around this situation?
Way around is editing system/library/image.php.

Create an array with settings and add to function 'resize':
Find:

Code: Select all

$scale = 1;
Add after:

Code: Select all

		$image_border['border'] = 10;
		$image_border['r'] = 10;
		$image_border['g'] = 10;
		$image_border['b'] = 10;
Reset width and height:
Find:
OC 2.0.3

Code: Select all

$new_height = (int)($this->info['height'] * $scale);
OC 2.1.* - 2.3.*

Code: Select all

$new_height = (int)($this->height * $scale);

Add after:

Code: Select all

		$width = ($new_width + $image_border['border']);
		$height = ($new_height + $image_border['border']);
Find:

Code: Select all

255, 255, 255
2 times
Replace by:

Code: Select all

$image_border['r'], $image_border['g'], $image_border['b']
Now you can:
- set a border arround the resized image, 0 for none.
- set color of border / background ( r,g,b )

User avatar
Active Member

Posts

Joined
Sat Jan 08, 2011 11:05 pm
Location - Netherlands

Post by cmxsevenfoldxmc » Wed Sep 07, 2016 12:12 am

Thank you both kindly for the responses.

Unfortunately, I have yet to find the solution :(

Another way of putting it: I do not want a fixed "square" size for the main product image. I would like for the width to be fixed, but for the height to change according to the picture's original dimensions.


Posts

Joined
Wed Jul 20, 2016 4:25 am

Post by IP_CAM » Wed Sep 07, 2016 7:58 am

Honestly, I don't see a problem, just check here, how it should look, by default, height values are just MAX-Values, but not enforced, if width-values set would thereby be exeeded, by OC-Default.
http://www.gratis-anzeiger.com/shop/ind ... path=20_26

Ernie

Please do NOT send me Personal Mails, they will no longer be replied to.
---
My Github OC Site: https://github.com/IP-CAM
2'800+ FREE OC Extensions on the World's largest Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by cmxsevenfoldxmc » Fri Sep 09, 2016 12:19 am

IP_CAM wrote:Honestly, I don't see a problem, just check here, how it should look, by default, height values are just MAX-Values, but not enforced, if width-values set would thereby be exeeded, by OC-Default.
http://www.gratis-anzeiger.com/shop/ind ... path=20_26

Ernie
Ernie,

This seems to do the trick fairly well when the pop up image appears. It's almost what I need!

However, is there a way to implement the same thing to the picture *before* it is clicked on for the pop-up to appear?

My picture frame preview extension works on the picture that appears directly on the page, not when the picture is clicked for the pop-up larger image to appear.

Thank you kindly for your help thus far! I am close to the goal :D


Posts

Joined
Wed Jul 20, 2016 4:25 am

Post by IP_CAM » Fri Sep 09, 2016 5:08 am

ok, all I can offer, is this one, it has been created originally by famous MaxD, for OC v.1.5.x,
and I just made it work in OC-2.2.0.0! It removes surplus white space on Thumbs, where such exists.

THE ONLY CHANGE, you have to make, is in the SYSTEM/LIBRARY/IMAGE.PHP File,
where you have to DISABLE LINE 119, i.E., by quoting it with two // in front of the line:
---
this:
imagedestroy($image_old);
has to look like this:
// imagedestroy($image_old);
---
since it needed to be added into the VqMod, and by calling it twice, and after the new images are created, re-ramed, Variable-wise, it logically presents a (depending on thumbs created) range of top Page error messages. :(
---
Then, install this VqMod below, clean out all your IMAGE CACHE Sections, your VqCache Sections, your
OcMod Cache Sections, and your Browser Cache, before you try to see some results.

If this is about, what you're looking for... ;)
But the upmost important Factor would be, to manually PRE-size the original Images, to be seen best, before uploading them. And make sure,that they will NOT have to be re-shrinked (from the CACHE saved format!) by the RESPONSIVE auto-match-routine again, BUT match their DEFAULT ADMIN SET Thumb-Size Values, at least in full size Page View.
---
Also, in the IMAGE.PHP File, mentioned above. the 90-Percent Value could be changed back to 100 Percent again, in order to keep the images 'OC-uncompressed' as well.
public function save($file, $quality = 90) {
---
Good Luck, that's all I can do for you! ;)
Ernie
---
Product Thumb Image white space fix for OpenCart v.2.2 (for Tests only!)
white_image_excess_fix.xml

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<modification>
<id><![CDATA[Fixes white excess for non-proportional image resize]]></id>
<version><![CDATA[OC v.2.2.0.0]]></version>
<vqmver><![CDATA[2.5.1]]></vqmver>
<author><![CDATA[MaxD - IP_CAM]]></author>

<file name="system/library/image.php">
<operation error="log">
<search position="replace"><![CDATA[$this->image = imagecreatetruecolor($width, $height);]]></search>
<add><![CDATA[
		$this->image = imagecreatetruecolor($new_width, $new_height);
]]></add>
</operation>

<operation error="log">
<search position="replace"><![CDATA[imagecopyresampled($this->image, $image_old, $xpos, $ypos, 0, 0, $new_width, $new_height, $this->width, $this->height);]]></search>
<add><![CDATA[
	imagecopyresampled($this->image, $image_old, 0, 0, 0, 0, $new_width, $new_height, $this->width, $this->height);
	imagedestroy($image_old);
				
	$this->width  = $new_width;
	$this->height = $new_height;
]]></add>
</operation>
</file>

</modification>

Please do NOT send me Personal Mails, they will no longer be replied to.
---
My Github OC Site: https://github.com/IP-CAM
2'800+ FREE OC Extensions on the World's largest Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by fido-x » Fri Sep 09, 2016 2:22 pm

This is not an issue of "white space" around the image. By "image aspect", the OP is referring to the "orientation" (portrait or landscape) and retaining this through the image resizing that is done by OpenCart.

In catalog/controller/product/product.php, at lines 284 to 294, you will find the following block of code:

Code: Select all

if ($product_info['image']) {
	$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_width'), $this->config->get($this->config->get('config_theme') . '_image_popup_height'));
} else {
	$data['popup'] = '';
}

if ($product_info['image']) {
	$data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_thumb_width'), $this->config->get($this->config->get('config_theme') . '_image_thumb_height'));
} else {
	$data['thumb'] = '';
}
If you replace that code with the following:

Code: Select all

if ($product_info['image']) {
	$imagesize = getimagesize(DIR_IMAGE . $product_info['image']);

	if ($imagesize[0] > $imagesize[1]) {
		$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_width'), $this->config->get($this->config->get('config_theme') . '_image_popup_height'));
	} else {
		$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_height'), $this->config->get($this->config->get('config_theme') . '_image_popup_width'));
	}
} else {
	$data['popup'] = '';
}

if ($product_info['image']) {
	$imagesize = getimagesize(DIR_IMAGE . $product_info['image']);

	if ($imagesize[0] > $imagesize[1]) {
		$data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_thumb_width'), $this->config->get($this->config->get('config_theme') . '_image_thumb_height'));
	} else {
		$data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_thumb_height'), $this->config->get($this->config->get('config_theme') . '_image_thumb_width'));
	}
} else {
	$data['thumb'] = '';
}
the "aspect" or "orientation" of the original image will be retained when resizing the main product image thumbnail and popup.

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by cmxsevenfoldxmc » Sat Sep 10, 2016 4:10 am

fido-x wrote:This is not an issue of "white space" around the image. By "image aspect", the OP is referring to the "orientation" (portrait or landscape) and retaining this through the image resizing that is done by OpenCart.

In catalog/controller/product/product.php, at lines 284 to 294, you will find the following block of code:

Code: Select all

if ($product_info['image']) {
	$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_width'), $this->config->get($this->config->get('config_theme') . '_image_popup_height'));
} else {
	$data['popup'] = '';
}

if ($product_info['image']) {
	$data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_thumb_width'), $this->config->get($this->config->get('config_theme') . '_image_thumb_height'));
} else {
	$data['thumb'] = '';
}
If you replace that code with the following:

Code: Select all

if ($product_info['image']) {
	$imagesize = getimagesize(DIR_IMAGE . $product_info['image']);

	if ($imagesize[0] > $imagesize[1]) {
		$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_width'), $this->config->get($this->config->get('config_theme') . '_image_popup_height'));
	} else {
		$data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_popup_height'), $this->config->get($this->config->get('config_theme') . '_image_popup_width'));
	}
} else {
	$data['popup'] = '';
}

if ($product_info['image']) {
	$imagesize = getimagesize(DIR_IMAGE . $product_info['image']);

	if ($imagesize[0] > $imagesize[1]) {
		$data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_thumb_width'), $this->config->get($this->config->get('config_theme') . '_image_thumb_height'));
	} else {
		$data['thumb'] = $this->model_tool_image->resize($product_info['image'], $this->config->get($this->config->get('config_theme') . '_image_thumb_height'), $this->config->get($this->config->get('config_theme') . '_image_thumb_width'));
	}
} else {
	$data['thumb'] = '';
}
the "aspect" or "orientation" of the original image will be retained when resizing the main product image thumbnail and popup.
I believe you understood my point very well.

Unfortunately, upon applying this code change, I still can't manage to avoid the white spaces, even after clearing the cache.

I have attached some examples of the things I'm trying to achieve.

Attachments

Screen Shot 2016-09-09 at 4.01.52 PM.png

Upon adding the frame, there is white space around it, which shows an unwanted result for how the frame will look on this picture (the desired result is for the frame to be right at the edge of the whole picture) - Screen Shot 2016-09-09 at 4.01.52 PM.png (522.59 KiB) Viewed 3230 times

Screen Shot 2016-09-09 at 4.01.41 PM.png

Here's a portrait version of a picture that is not within those 700px x 700px preset dimensions from the theme settings. - Screen Shot 2016-09-09 at 4.01.41 PM.png (501.35 KiB) Viewed 3230 times

Screen Shot 2016-09-09 at 4.02.15 PM.png

A proper frame wrap, although it is based on the exact dimensions (700px x 700px) set on the theme dimensions for the main product thumbnail - Screen Shot 2016-09-09 at 4.02.15 PM.png (548.86 KiB) Viewed 3230 times



Posts

Joined
Wed Jul 20, 2016 4:25 am

Post by fido-x » Sat Sep 10, 2016 9:59 am

Judging by the captions you've added to the images you provided, you've set your popup size to 700 x 700. I assume you've also got your thumb size at something like 228 x 228. That is the root cause of the white space. The dimensions you've chosen are "square". With "square" dimensions, you will always get white space, unless the original image is also "square".

Set your popup size to something more appropriate to the "shape" of the image, e.g. set the popup size to 800 x600 and the thumb to 228 x 171. This will provide an aspect "ratio" of 4:3. The aspect ratio (width:height) will be retained in the resizing. The code snippet I provided will swap these around for portrait images.

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by cmxsevenfoldxmc » Mon Sep 12, 2016 10:14 pm

fido-x wrote:Judging by the captions you've added to the images you provided, you've set your popup size to 700 x 700. I assume you've also got your thumb size at something like 228 x 228. That is the root cause of the white space. The dimensions you've chosen are "square". With "square" dimensions, you will always get white space, unless the original image is also "square".

Set your popup size to something more appropriate to the "shape" of the image, e.g. set the popup size to 800 x600 and the thumb to 228 x 171. This will provide an aspect "ratio" of 4:3. The aspect ratio (width:height) will be retained in the resizing. The code snippet I provided will swap these around for portrait images.
I see what you mean.

Unfortunately, the problem with that is the variety of pictures this website contains that will vary in size. Some are a perfect square (700 x 700), some are portrait (400 x 800), and some are landscape (800 x 400).

The limitation of one resolution for all pictures results in an incorrect display of most pictures.


Posts

Joined
Wed Jul 20, 2016 4:25 am

Post by fido-x » Wed Sep 14, 2016 2:25 pm

Instead of the code I provided before, try the following replacement:

Code: Select all

if ($product_info['image']) {
	$imagesize = getimagesize(DIR_IMAGE . $product_info['image']);

	if ($imagesize[0] > $imagesize[1]) {
		$percent = $this->config->get($this->config->get('config_theme') . '_image_popup_width') / $imagesize[0];

		$popup_width = $percent * $imagesize[0];
		$popup_height = $percent * $imagesize[1];
	} else {
		$percent = $this->config->get($this->config->get('config_theme') . '_image_popup_height') / $imagesize[1];

		$popup_width = $percent * $imagesize[0];
		$popup_height = $percent * $imagesize[1];
	}

	$data['popup'] = $this->model_tool_image->resize($product_info['image'], $popup_width, $popup_height);
} else {
	$data['popup'] = '';
}

if ($product_info['image']) {
	$imagesize = getimagesize(DIR_IMAGE . $product_info['image']);

	if ($imagesize[0] > $imagesize[1]) {
		$percent = $this->config->get($this->config->get('config_theme') . '_image_thumb_width') / $imagesize[0];

		$thumb_width = $percent * $imagesize[0];
		$thumb_height = $percent * $imagesize[1];
	} else {
		$percent = $this->config->get($this->config->get('config_theme') . '_image_thumb_height') / $imagesize[1];

		$thumb_width = $percent * $imagesize[0];
		$thumb_height = $percent * $imagesize[1];
	}

	$data['thumb'] = $this->model_tool_image->resize($product_info['image'], $thumb_width, $thumb_height);
} else {
	$data['thumb'] = '';
}
This will work out the percentage reduction based on the popup and thumbnail dimensions set in the admin, using those values as "maximums". As a result, popup and thumbnail sizes should be defined as a square..

If the image is a landscape image, it will work out the reduction percentage based on the popup/thumbnail width divided by the actual image width. If the image is a portrait or square image, the heights will be used.

The new popup/thumbnail widths and heights are then used for resizing the image.

Alternatively, you could reset the product controller (catalog/controller/product/product.php) back to its original state and use the attached ocmod.xml file instead.
Install through the extension installer, or place in your store's "system" folder. Then, refresh your modifications.

This will also make the same changes to the additional product images.

Image
Modules for OpenCart 2.3.0.2
Homepage Module [Free - since OpenCart 0.7.7]
Multistore Extensions
Store Manager Multi-Vendor/Multi-Store management tool

If you're not living on the edge ... you're taking up too much space!


User avatar
Expert Member

Posts

Joined
Sat Jun 28, 2008 1:09 am
Location - Tasmania, Australia

Post by cmxsevenfoldxmc » Sat Sep 17, 2016 12:26 am

Fixo-X,

My friend, you are a life saver.

The fix you prepped and shared with me was exactly what I needed, and it is working wonderfully.

You do not understand how helpful your persistent solution-finding ways have been.

I now have what I need to make my picture framing extension work along with your mod.

I hope you have a wonderful weekend, bud.


Posts

Joined
Wed Jul 20, 2016 4:25 am

Post by Congerman » Sun Oct 08, 2017 10:02 pm

Great modification, Thank you. It works great for standard product images.
I sell prints and am using "Customer Order Product Upload" which is set to replace the product image with one that the customer uploads. Your mod works on the original product image but does not seem to work on the one / ones that a customer uploads. Is there a fix for this please?

Newbie

Posts

Joined
Thu May 08, 2014 10:05 pm

Post by Congerman » Fri Oct 13, 2017 6:29 am

Don't worry. found a work around

Newbie

Posts

Joined
Thu May 08, 2014 10:05 pm

Post by IP_CAM » Fri Oct 13, 2017 6:58 am

Don't worry. found a work around

well, why not telling others about it too ?!
Ernie

Please do NOT send me Personal Mails, they will no longer be replied to.
---
My Github OC Site: https://github.com/IP-CAM
2'800+ FREE OC Extensions on the World's largest Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

Joined
Tue Mar 04, 2014 1:37 am
Location - Switzerland

Post by Congerman » Sat Oct 14, 2017 10:54 pm

I did not post it as it is not that good. Just had to make the lightbox background white with 0.8 opacity so the annoying square that the image displays in is a bit less obvious. Would be so much better if this mod would work on customer uploaded images though.

Newbie

Posts

Joined
Thu May 08, 2014 10:05 pm
Who is online

Users browsing this forum: No registered users and 58 guests