Post by tjonnyc » Wed Nov 09, 2016 5:11 am

OpenCart's image caching sucks. All of my product images, category images, banners, sliders - EVERYTHING comes out in TERRIBLE quality. On top of that, the cached versions of the images are actually LARGER than the originals. So, a bigger file size AND a loss of quality.

How can I completely DISABLE the OpenCart cache, and serve images DIRECTLY from their /image/ locations, not from /image/cache?

Using OC 2.0.3.1.

Any advice would be appreciated!

Active Member

Posts

Joined
Tue Dec 21, 2010 5:05 am

Post by IP_CAM » Wed Nov 09, 2016 7:09 am

strictly technically, if you understand a little about Coding and VqMod Functions,
check here, how such can be done:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<modification>
<id>Fullsize Product Image Popup</id>
<version><![CDATA[OS v.1.5.6.5]]></version>
<vqmver><![CDATA[2.4.1]]></vqmver>
<author>hotvb - IP_CAM</author>

       <file name="catalog/controller/product/product.php">
            <operation error="log">
                <search position="replace">
                   <![CDATA[$this->data['popup'] = $this->model_tool_image->resize($product_info['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height'));]]>
                </search>
                <add>
                   <![CDATA[    $this->data['popup'] = 'image/' . $product_info['image'];]]>
                </add>
            </operation>
       </file>
	<file name="catalog/controller/product/product.php">
            <operation error="log">
                <search position="replace">
                   <![CDATA['popup' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),]]>
                </search>
                <add>
                   <![CDATA[    'popup' => 'image/' . $result['image'],]]>
                </add>
            </operation>
       </file>
	   </modification>
Good Luck ;)
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

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

Post by exit15 » Tue May 09, 2017 9:55 pm

Is this a way to disable all product image caching or just the pop-ups? With 100k products and 3-5 additional images its just too much to have 400-600 thousand images on the server. if there is a simple was to let cc deal with the size, it will be great.

New member

Posts

Joined
Sun Mar 03, 2013 2:05 am


Post by IP_CAM » Wed May 10, 2017 2:21 am

well, I wanted to find out, and after checking here:
---
http://stackoverflow.com/questions/4049 ... ing-system
https://recalll.co/app/?q=php%20-%20Dis ... 20OpenCart
---
I found this Code, seemengly working in (some) OC v.2:

Code: Select all

public function resize($filename, $width, $height) {
    if ($this->request->server['HTTPS']) {
        return $this->config->get('config_ssl') . 'image/' . $filename;
    } else {
        return $this->config->get('config_url') . 'image/' . $filename;
    }
}
---
Then, I used PARTS of this code, to make it work in my OC v.1.5.6.5:

Code: Select all

return $this->config->get('config_ssl') . 'image/' . $filename;
    } else {
    return $this->config->get('config_url') . 'image/' . $filename;
 }
By modifying my 1.5.6.5 model/tool/image.php Bottom Code:

Code: Select all

if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
    return $this->config->get('config_ssl') . 'image/' . $new_image;
    } else {
    return $this->config->get('config_url') . 'image/' . $new_image;
    }	
    }
}
?>
to look like this:

Code: Select all

if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
    return $this->config->get('config_ssl') . 'image/' . $filename;
    } else {
    return $this->config->get('config_url') . 'image/' . $filename;
    }	
    }
}
?>
I now have all the Images, as they have been uploaded, and not 'handled' - changed - modified'
by any OC routine. The only Problem was, that in the Front Side Product Listings Page, it did NOT
RESIZE the images, because in my Theme, resizing is done by defining the CSS Column Value,
it 'declares' so the image width, and for Grid View, this is declared, but not for (full width) List View. So, I added a
MAX-WIDTH Style Value to the product-listing template, as shown on the image below, to set such
image displays to 200px width max.Value.
----
One big disadvantage of such Doings would be the massive Drop of Percentage Points on Page-Load Results,
as shown below, so, one has to decide, what's of more importance, to either please Google and Co, or then, please
the Customers, expecting nice and shiny Pics! :D
---
But to answer your Question, after getting your system to work, you could remove ALL the CACHED images again,
they are probably not beeing unsed anymore. And if they still are, you will find out, and have to fix such 'linkings' as well.
Or then, also remove the Routine, to CACHE them in the first place. But this is another matter, and I don't plan to risk my
99er Shop Category Page Speed Score Result anyway..., it's too much, after working so long and hard, to get it there! :D

Good Luck ! ;)
Ernie
PS: I use some image cropping too, and a lot of multi-time used/cached pics as well,
that's why not all the thumbs have the same height, and some white space and some not!
---
Image

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

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

Post by bonkopencart » Wed May 10, 2017 12:08 pm

it really complete answer from IP_CAM.
anyway, nice and shiny but heavy to load pics doesn't please customer/visitor either..

tjonnyc may try:
- original image not too small, but optimize it with image optimizer software at least to removing its meta data.
- set a smaller dimension on opencart theme setting..
- manually replace images in cache folder with better optimized image with the same dimension and file name.
... hope you know what i mean.. :P

New member

Posts

Joined
Fri Mar 24, 2017 1:53 pm

Post by exit15 » Wed May 10, 2017 11:44 pm

Thanks IP_CAM, first I should let you know that my version is 2.0.3.1 with the Journal theme. All my original images are optimized and so I don't get any size reduction benefits from the caching mechanism. With 100,000 products, all I get is a giant storage monster.

So I tried replacing the function in /httpdocs/catalog/model/tool/image.php at the top, and then the top and bottom as you suggested, but still when I call a product page, all the images come from the cache directory. I am posting my image.php hoping that you can post it back with the proper changes. This will be helpful, and I can try loading the page with and without cache and and check to see if there is a difference. (by the way no closing of <?php is in the original code)

Code: Select all

<?php
class ModelToolImage extends Model {
	public function resize($filename, $width, $height) {
		if (!is_file(DIR_IMAGE . $filename)) {
			return;
		}

		$extension = pathinfo($filename, PATHINFO_EXTENSION);

		$old_image = $filename;
		$new_image = 'cache/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . $extension;

		if (!is_file(DIR_IMAGE . $new_image) || (filectime(DIR_IMAGE . $old_image) > filectime(DIR_IMAGE . $new_image))) {
			$path = '';

			$directories = explode('/', dirname(str_replace('../', '', $new_image)));

			foreach ($directories as $directory) {
				$path = $path . '/' . $directory;

				if (!is_dir(DIR_IMAGE . $path)) {
					@mkdir(DIR_IMAGE . $path, 0777);
				}
			}

			list($width_orig, $height_orig) = getimagesize(DIR_IMAGE . $old_image);

			if ($width_orig != $width || $height_orig != $height) {
				$image = new Image(DIR_IMAGE . $old_image);
				$image->resize($width, $height);
				$image->save(DIR_IMAGE . $new_image);
			} else {
				copy(DIR_IMAGE . $old_image, DIR_IMAGE . $new_image);
			}
		}

		if ($this->request->server['HTTPS']) {
			return $this->config->get('config_ssl') . 'image/' . $new_image;
		} else {
			return $this->config->get('config_url') . 'image/' . $new_image;
		}
	}
}

New member

Posts

Joined
Sun Mar 03, 2013 2:05 am


Post by IP_CAM » Thu May 11, 2017 2:25 am

well, that looks still the same:

Code: Select all

if ($this->request->server['HTTPS']) {
			return $this->config->get('config_ssl') . 'image/' . $new_image;
		} else {
			return $this->config->get('config_url') . 'image/' . $new_image;
		}
	}
}
so, I assume, it would take $filename; instead of $new_image;, to make it work.
STILL, the BEST way, to link images, is by 'cookiefree sub/remote/domain-linking' them anyway, and
this would no longer use config->get('config_url') + 'config_ssl' ! So, a few 'things' could be changed,
either based on OcMod/VqMod, at least for tests, or then (re-)placed into the Source.
I show my VqMod, i use for this, further below, and most 'routines' should work up to v.2.2, as I recall,
exept possibly for the last function, changing code in multiple Subs. It also add's image size Values,
missing since OC v.0.1 ! :D

---
But I use no OC v.2, and up to OC v.1.5.6.5, it still uses the ?>, I just wanted to make sure, that
other fellow 1.5.6.x users don't have to figure out first, where to place it, just in case...! ;)
That's, why I mentioned it at least twice...

Other than that, Journal has it's own ways, to handle OC, the only way to find out a little more,
would be, to make some Tests on the real Site, and so get some View onto Page Source.
Just to give you some Ideas, likely overlooked... ;)
---
The only thing, the MOD requires, are two configuration lines in both config.php Files,
like below, in this Case and Writing, working as 'cookiefree external domain' image links!

Code: Select all

// HTTP
define('HTTP_SERVER', 'http://www.bigmax.ch/shop/');
define('HTTP_IMAGE', 'http://bigmax.ch/shop/image/');
// HTTPS
define('HTTPS_SERVER', 'http://www.bigmax.ch/shop/');
define('HTTPS_IMAGE', 'http://bigmax.ch/shop/image/');
To test this, all <add> section image-variables could be changed from:
$new_image
to:
$filename
to possibly so get the Master File instead of the cached one... :laugh:
---
restore_http_image_plus_size.vqmod.xml

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<modification>
<id><![CDATA[HTTP_IMAGE + HTTPS_IMAGE Links and Sizes]]></id>
<version><![CDATA[OpenShop 1.75]]></version>
<vqmver><![CDATA[2.4.1]]></vqmver>
<author><![CDATA[Ernie - IP_CAM]]></author>

<file name="catalog/model/tool/image.php">
<operation error="skip">
	<search position="replace"><![CDATA[return $this->config->get('config_ssl') . 'image/' . $new_image;]]></search>
	<add><![CDATA[return HTTPS_IMAGE . $new_image . '" width="' . $width . '" height="' . $height;]]></add>
</operation>            
    
<operation error="skip">
	<search position="replace"><![CDATA[return $this->config->get('config_url') . 'image/' . $new_image;]]></search>
	<add><![CDATA[return HTTP_IMAGE . $new_image . '" width="' . $width . '" height="' . $height;]]></add>
</operation>                  
</file>

<file name="admin/model/tool/image.php">
<operation error="skip">
	<search position="replace"><![CDATA[return HTTPS_CATALOG . 'image/' . $new_image;]]></search>
	<add><![CDATA[return HTTPS_IMAGE . $new_image . '" width="' . $width . '" height="' . $height;]]></add>
</operation>            
    
<operation error="skip">
	<search position="replace"><![CDATA[return HTTP_CATALOG . 'image/' . $new_image;]]></search>
	<add><![CDATA[return HTTP_IMAGE . $new_image . '" width="' . $width . '" height="' . $height;]]></add>
</operation>                  
</file>

<file name="catalog/controller/payment/skrill.php,catalog/controller/total/voucher.php,catalog/model/checkout/order.php,catalog/model/openbay/ebay_product.phpcatalog/model/tool/image.php" error="skip">
<operation error="skip">
	<search position="replace"><![CDATA[$this->config->get('config_url') . 'image/']]></search>
	<add><![CDATA[HTTP_IMAGE]]></add>
</operation>
    
<operation error="skip">
	<search position="replace"><![CDATA[$this->config->get('config_ssl') . 'image/']]></search>
	<add><![CDATA[HTTPS_IMAGE]]></add>
</operation>
</file>
</modification>
I also assume, that you already use something like this, to make and regularely keep
your DB work, as it could:
http://www.ipc.li/os/opencart-turbo-master.zip
unfortunately, due to emotional feelings, that Genius left OC, and never came back... :'(
Good Luck ! ;)
Ernie

Image

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

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

Post by exit15 » Thu May 11, 2017 5:53 am

Ernie,
Thank you for your help, but it did not work at all. I wish you can focus your answer on bypassing the creation of any product images and simply use the original image. I tested your site and its really fast, nice job!!. I'll tackle speed that later.
What I did: updated the config.php file, uploaded the xml, and modified image.php -- strange, no error on the site with any of these changes, but also the images still come from the cache which tells me that we are barking at the wrong tree.

New member

Posts

Joined
Sun Mar 03, 2013 2:05 am


Post by IP_CAM » Thu May 11, 2017 6:58 am

Did you ever clear out your Modification and VqCache sections, after changing anyting ?
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

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

Post by gokaydemir86 » Tue Jan 09, 2018 6:23 am

Hi. I have 100K+ products too. My question is maybe a bit stupid but strange :) All of my product images are on "../image/urun_resimler/" And I edited the image dimension from store->image settings and from my theme(journal2) as well. So all I have on the "/image/cache/urun_resimler/" will be five type of dimensions like that:
product_name-43x64
product_name-64x87
product_name-130x193
product_name-260x385
product_name-550x770
So, I made my own resize script exactly as the same as opencart's Image class and resize function. Then, I thought to delete all of original images and use only cached images. But oops, there is no product images neither backend nor frontend. When I upload one of the original images to the "../image/urun_resimler/" directory, then its images come to visible at everywhere.
Now the question is, Why the original image is needed if there is already a cached version of that image? What to do for use only cached versions without uploading original versions?
Thank you for your suggestions..
I use oc 2.0.3.1

About me: https://gokaydemir.com
E-mail me: info@gokaydemir.com
Whatsapp me (recommended ;) ) : https://api.whatsapp.com/send/?phone=90 ... p_absent=0


User avatar
New member

Posts

Joined
Tue Jul 18, 2017 8:08 am

Post by IP_CAM » Tue Jan 09, 2018 6:54 am

Well, images are cached, to always fit the Admin-set values, and so display in the best
possible quality, but also with an acceptable data-volume. Otherwise, some would expect
a Category Page to load within seconds, equiped with 20pc. 2-MByte images, but such would
be more like a Download attempt, and slow down a system to a massive extend. But you could
create your own images, in each size, set by the Admin Setup, and then upload them into their
Directory accordingly.

If I want to optimize Images fast, I use the Google Pageload Check, to check i.E. my Manufacturer
Pages, to check all Pages, set to display ALL Listings, then, Googie shrinks hundreds of images
at once, and I can upload them all to the image/cache/demo/... (1.5.6.x) Section, to get perfect Ratings on this.

Otherways, you'll have to rewrite most all OC Image Handling Functions.
And Journal has/uses it's own Caching Routines and Functions, but this is unfamiliar to me, and
I have no idea, if images are part of this.
Good Luck! ;)
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

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

Post by gokaydemir86 » Tue Jan 09, 2018 7:08 am

Thank you for your quick reply. However I could not understand clearly how to deal with my problem. Do you suggest to resize my original images and then upload them into "image/urun_resimler" directory? If so, what about the images when clicked for the larger images on the product page? (in my case, this is 550x770) You mean that I have to upload all of my - not cached - original images? These are more than 7GB :(

About me: https://gokaydemir.com
E-mail me: info@gokaydemir.com
Whatsapp me (recommended ;) ) : https://api.whatsapp.com/send/?phone=90 ... p_absent=0


User avatar
New member

Posts

Joined
Tue Jul 18, 2017 8:08 am

Post by thekrotek » Tue Jan 09, 2018 7:11 am

For large number of images the easiest way is to upload originals and run a script, which uses OpenCart image resizing tools. It will create all necessary thumbnails and name them correspondingly. Requires some coding skills though and can't be done any other way. I mean, easy way.

Professional OpenCart extensions, support and custom work.
Contact me via email or Skype by support@thekrotek.com


User avatar
Expert Member

Posts

Joined
Sun Jul 03, 2016 12:24 am


Post by gokaydemir86 » Tue Jan 09, 2018 7:23 am

Thank you for your reply, thekrotek. I have no problem with creating thumbs. I made a script and compared images with generated by oc and me. So there is no difference between them. However, when I upload these generated images to "../image/cache", and then delete original images from "../image/" then there is no any images shown on backend and frontend. I dont understand why? OK.. OC needs to original images to resize them, but I give them to OC :):) So why oc still check for the original images?

About me: https://gokaydemir.com
E-mail me: info@gokaydemir.com
Whatsapp me (recommended ;) ) : https://api.whatsapp.com/send/?phone=90 ... p_absent=0


User avatar
New member

Posts

Joined
Tue Jul 18, 2017 8:08 am

Post by IP_CAM » Tue Jan 09, 2018 9:19 am

Well, you should leave the originals , as they are, but only re-upload
cached images, after they have been worked over. And as long as
they exist, they will stay, and not be overwritten by the Originals again.
But if originals don't exist anymore, the cached images will be no longer
'valid' too, I assume at least.
Ernie

My Github OC Site: https://github.com/IP-CAM
5'200 + FREE OC Extensions, on the World's largest private Github OC Repository Archive Site.


User avatar
Legendary Member

Posts

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

Post by gokaydemir86 » Tue Jan 09, 2018 9:33 am

Hi, I certainly don't want to leave original images :(:( I guess I have to disable cache system or to disable to check originals. Here is the model file : image.php from front-end :

Code: Select all

public function resize($filename, $width, $height, $type = '') {
		if (!is_file(DIR_IMAGE . $filename)) {
			return;
		}

		$extension = pathinfo($filename, PATHINFO_EXTENSION);

		$old_image = $filename;
		$new_image = 'cache/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . $extension;

		if (!is_file(DIR_IMAGE . $new_image) || (filectime(DIR_IMAGE . $old_image) > filectime(DIR_IMAGE . $new_image))) {
			$path = '';

			$directories = explode('/', dirname(str_replace('../', '', $new_image)));

			foreach ($directories as $directory) {
				$path = $path . '/' . $directory;

				if (!is_dir(DIR_IMAGE . $path)) {
					@mkdir(DIR_IMAGE . $path, 0777);
				}
			}

			list($width_orig, $height_orig) = getimagesize(DIR_IMAGE . $old_image);

			if ($width_orig != $width || $height_orig != $height) {
				$image = new Image(DIR_IMAGE . $old_image);
				$image->resize($width, $height, $type);
				$image->save(DIR_IMAGE . $new_image);
			} else {
				copy(DIR_IMAGE . $old_image, DIR_IMAGE . $new_image);
			}
		}
I changed it like that:

Code: Select all

public function resize($filename, $width, $height, $type = '') {
		/* if (!is_file(DIR_IMAGE . $filename)) {
			return;
		} */

		$extension = pathinfo($filename, PATHINFO_EXTENSION);

		$old_image = $filename;
		$new_image = 'cache/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . $width . 'x' . $height . '.' . $extension;
/* 
		if (!is_file(DIR_IMAGE . $new_image) || (filectime(DIR_IMAGE . $old_image) > filectime(DIR_IMAGE . $new_image))) {
			$path = '';

			$directories = explode('/', dirname(str_replace('../', '', $new_image)));

			foreach ($directories as $directory) {
				$path = $path . '/' . $directory;

				if (!is_dir(DIR_IMAGE . $path)) {
					@mkdir(DIR_IMAGE . $path, 0777);
				}
			}

			list($width_orig, $height_orig) = getimagesize(DIR_IMAGE . $old_image);

			if ($width_orig != $width || $height_orig != $height) {
				$image = new Image(DIR_IMAGE . $old_image);
				$image->resize($width, $height, $type);
				$image->save(DIR_IMAGE . $new_image);
			} else {
				copy(DIR_IMAGE . $old_image, DIR_IMAGE . $new_image);
			}
		}
 */
I guess this will work.

About me: https://gokaydemir.com
E-mail me: info@gokaydemir.com
Whatsapp me (recommended ;) ) : https://api.whatsapp.com/send/?phone=90 ... p_absent=0


User avatar
New member

Posts

Joined
Tue Jul 18, 2017 8:08 am
Who is online

Users browsing this forum: No registered users and 102 guests