Page 1 of 2

Webp for pictures in description

Posted: Sun Jan 02, 2022 4:48 am
by soulliving
Hello!
Webp pictures is working everywhere else on the site, but I can`t find a module or thread on how to get it to work with insterted images (uploaded to server) in product description. We use up to 20 images sometimes and would be nice to get them in webp format too.
Any experience with this?

Running Opencart 3.0.3.8 with Journal 3 theme (yes I know the feelings about the theme).

Image.php in ocartdata is this:

Code: Select all

<?php
class ModelToolImage extends Model {
	public function resize($filename, $width, $height, $type = '') {
		if (!is_file(DIR_IMAGE . $filename) || substr(str_replace('\\', '/', realpath(DIR_IMAGE . $filename)), 0, strlen(DIR_IMAGE)) != str_replace('\\', '/', DIR_IMAGE)) {
			return;
		}

		$extension = pathinfo($filename, PATHINFO_EXTENSION);

		$image_old = $filename;
		$image_new = 'cache/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . $type . '.' . $extension;

		if (!is_file(DIR_IMAGE . $image_new) || (filemtime(DIR_IMAGE . $image_old) > filemtime(DIR_IMAGE . $image_new))) {
			list($width_orig, $height_orig, $image_type) = getimagesize(DIR_IMAGE . $image_old);
				 
			if (!in_array($image_type, array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF))) { 
				return DIR_IMAGE . $image_old;
			}
						
			$path = '';

			$directories = explode('/', dirname($image_new));

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

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

			if ($width_orig != $width || $height_orig != $height) {
				$image = new Image(DIR_IMAGE . $image_old);
				$image->resize($width, $height, $type);
				$image->save(DIR_IMAGE . $image_new);

                if (defined('JOURNAL3_ACTIVE')) {
                    if ($this->journal3->settings->get('performanceCompressImagesStatus')) {
                        \Journal3\Utils\Img::optimise(DIR_IMAGE . $image_new);
                    }
                }
            
			} else {
				copy(DIR_IMAGE . $image_old, DIR_IMAGE . $image_new);

                if (defined('JOURNAL3_ACTIVE')) {
                    if ($this->journal3->settings->get('performanceCompressImagesStatus')) {
                        \Journal3\Utils\Img::optimise(DIR_IMAGE . $image_new);
                    }
                }
            
			}
		}
		

                if (defined('JOURNAL3_ACTIVE')) {
                    if ($this->journal3->settings->get('performanceCompressImagesStatus')) {
                        $image_new = \Journal3\Utils\Img::cwebp($image_new);
                    }
                }
            
		$image_new = str_replace(' ', '%20', $image_new);  // fix bug when attach image on email (gmail.com). it is automatic changing space " " to +
		

                if (defined('JOURNAL3_STATIC_URL')) {
                    return JOURNAL3_STATIC_URL . 'image/' . $image_new;
                }
            
		if ($this->request->server['HTTPS']) {
			return $this->config->get('config_ssl') . 'image/' . $image_new;
		} else {
			return $this->config->get('config_url') . 'image/' . $image_new;
		}
	}
}
Image.php in /catalog/model/tool/ is

Code: Select all

<?php
class ModelToolImage extends Model {
	public function resize($filename, $width, $height) {
		if (!is_file(DIR_IMAGE . $filename) || substr(str_replace('\\', '/', realpath(DIR_IMAGE . $filename)), 0, strlen(DIR_IMAGE)) != str_replace('\\', '/', DIR_IMAGE)) {
			return;
		}

		$extension = pathinfo($filename, PATHINFO_EXTENSION);

		$image_old = $filename;
		$image_new = 'cache/' . utf8_substr($filename, 0, utf8_strrpos($filename, '.')) . '-' . (int)$width . 'x' . (int)$height . '.' . $extension;

		if (!is_file(DIR_IMAGE . $image_new) || (filemtime(DIR_IMAGE . $image_old) > filemtime(DIR_IMAGE . $image_new))) {
			list($width_orig, $height_orig, $image_type) = getimagesize(DIR_IMAGE . $image_old);
				 
			if (!in_array($image_type, array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF))) { 
				return DIR_IMAGE . $image_old;
			}
						
			$path = '';

			$directories = explode('/', dirname($image_new));

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

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

			if ($width_orig != $width || $height_orig != $height) {
				$image = new Image(DIR_IMAGE . $image_old);
				$image->resize($width, $height);
				$image->save(DIR_IMAGE . $image_new);
			} else {
				copy(DIR_IMAGE . $image_old, DIR_IMAGE . $image_new);
			}
		}
		
		$image_new = str_replace(' ', '%20', $image_new);  // fix bug when attach image on email (gmail.com). it is automatic changing space " " to +
		
		if ($this->request->server['HTTPS']) {
			return $this->config->get('config_ssl') . 'image/' . $image_new;
		} else {
			return $this->config->get('config_url') . 'image/' . $image_new;
		}
	}
}
Hope there is someone that has fixed something like this before :)

Re: Webp for pictures in description

Posted: Sun Jan 02, 2022 8:27 pm
by JNeuhoff
Since you use the Journal3 framework (including for example \Journal3\Utils\Img) you really would have to get in touch with the Journal3 support on this.

Or use a standard compliant web theme.

As regards product description: In a standard OpenCart framework, it would require some modifications in the admin backend for the image file manager (admin/controller/common/filemanager.php).

Re: Webp for pictures in description

Posted: Mon Jan 03, 2022 4:54 am
by soulliving
JNeuhoff wrote:
Sun Jan 02, 2022 8:27 pm
Since you use the Journal3 framework (including for example \Journal3\Utils\Img) you really would have to get in touch with the Journal3 support on this.

Or use a standard compliant web theme.

As regards product description: In a standard OpenCart framework, it would require some modifications in the admin backend for the image file manager (admin/controller/common/filemanager.php).
All other pictures are done by Journal framework and that`s all working fine with webp.
Product description seems to be left out and is as I see it OpenCart core feature - I`m not looking for freebies, just wondering if there is a solution to this issue because after hours of searching I can`t find anyone that has come across this or touched this topic regarding media in product description.

Re: Webp for pictures in description

Posted: Mon Jan 03, 2022 5:10 am
by by mona
webp is not core opencart, besides we are not affiliated with opencart so it makes very little difference, we are not obliged to assist.

webp can work in descriptions with or without your theme, I just did that a few weeks back, so I can confirm it is possible. I will try to add something to the marketplace if it is an essential feature for you.

Re: Webp for pictures in description

Posted: Mon Jan 03, 2022 6:17 am
by soulliving
Ah I see that I posted this in extention support, what I`m looking for is not support or any fix, it`s not a problem or issue but more a request if someone has done a webp setup for images in product description and if there are any modules or experience with it at all?
Webp is getting more and more essential and that`s why I`m looking in to finding solutions, especially after late November update by Google.
So it`s more curiosity and a silent hope someone has looked in to this before ;D

My background is online strategy where I have several clients, so far the only solution I`ve found that might work is NitroPack.

Re: Webp for pictures in description

Posted: Mon Jan 03, 2022 8:03 am
by straightlight
soulliving wrote:
Mon Jan 03, 2022 6:17 am
Ah I see that I posted this in extention support, what I`m looking for is not support or any fix, it`s not a problem or issue but more a request if someone has done a webp setup for images in product description and if there are any modules or experience with it at all?
Webp is getting more and more essential and that`s why I`m looking in to finding solutions, especially after late November update by Google.
So it`s more curiosity and a silent hope someone has looked in to this before ;D

My background is online strategy where I have several clients, so far the only solution I`ve found that might work is NitroPack.
I believe webp extensions have already been added on the master branch.

Re: Webp for pictures in description

Posted: Mon Jan 03, 2022 9:05 am
by soulliving
straightlight wrote:
Mon Jan 03, 2022 8:03 am
I believe webp extensions have already been added on the master branch.
That`s the thing, I`ve tried some of the modules that`s most recently updated and doesn`t seem like it, I might just contact one of the known developers and see if it might be an extention issue.

Thanks for help so far! :)

Re: Webp for pictures in description

Posted: Mon Jan 03, 2022 7:28 pm
by JNeuhoff
Webp is getting more and more essential
Wrong, it's just another wheel re-invented scenario here. While it can reduce the image size a bit, compared to e.g. JPG, there are better areas to improve site performance, such as lazy image loading strategies, caching, not using huge hi-res images on simple web pages in the first place etc.

Reminds me a bit about the notion that you can't live without JSON-LD and all the other fancy meta tags. How on earth have search engines found relevant details such as images in all those years in the past?

Re: Webp for pictures in description

Posted: Mon Jan 03, 2022 10:39 pm
by soulliving
JNeuhoff wrote:
Mon Jan 03, 2022 7:28 pm
Wrong, it's just another wheel re-invented scenario here. While it can reduce the image size a bit, compared to e.g. JPG, there are better areas to improve site performance, such as lazy image loading strategies, caching, not using huge hi-res images on simple web pages in the first place etc.

Reminds me a bit about the notion that you can't live without JSON-LD and all the other fancy meta tags. How on earth have search engines found relevant details such as images in all those years in the past?
Wrong and right at the same time, I`m not saying it`s a good thing, but Google is Google and they are market-leading so they tend to set the standards, the update in late November has been a tough on for many.
As and markering consultant I see how much more webp is important for pagespeed and on-site speed in addition with good lazy load, cache, CDN and so on - Clients that have implemented webp have seen an improvement in sitespeed and overall SEO ranking.
I`ve done most of the improvements I can on our site for now and this was just the last thing that impacted score quite some and why I`m looking in to it.

For me it`s all about having the edge over our competitors :)

Re: Webp for pictures in description

Posted: Mon Jan 03, 2022 10:54 pm
by OSWorX
soulliving wrote:
Mon Jan 03, 2022 10:39 pm
.. Google is Google and they are market-leading so they tend to set the standards ..
Makes me always loud laughing when reading such.
Not Google is "making the standards", it's the "users" following many useless "guidelines.
And "marketing agencies" will post them as "standards" to make more profit.

Imagine a world, nobody use Google.
How could life and living be easy.

Re: Webp for pictures in description

Posted: Tue Jan 04, 2022 8:43 pm
by paulfeakins
OSWorX wrote:
Mon Jan 03, 2022 10:54 pm
Not Google is "making the standards"
WebP is made from

OSWorX wrote:
Mon Jan 03, 2022 10:54 pm
Imagine a world, nobody use Google.
Their search was incredible but they are starting to go a bit too woke for my liking.

Re: Webp for pictures in description

Posted: Tue Jan 04, 2022 9:20 pm
by OSWorX
paulfeakins wrote:
Tue Jan 04, 2022 8:43 pm
OSWorX wrote:
Mon Jan 03, 2022 10:54 pm
Not Google is "making the standards"
WebP is made from
Sorry Paul, but that company can make "suggestions" the W3C Consortium may follow - or not.
That would be the same as if your company will say "OpenCart 4 will use React in Furture" .. Daniel can follow - or not.

Re: Webp for pictures in description

Posted: Wed Jan 05, 2022 12:01 am
by mikeinterserv
OSWorX wrote:
Tue Jan 04, 2022 9:20 pm
W3C Consortium may follow - or not.
Google now OWN W3C
80 X more than any other input now.
Isn't TBL standing down because of it or something, anyway a LOT of complaints about it.

Re: Webp for pictures in description

Posted: Wed Jan 05, 2022 12:07 am
by mikeinterserv
paulfeakins wrote:
Tue Jan 04, 2022 8:43 pm
Their search was incredible but they are starting to go a bit too woke for my liking.
Yes it started getting quite good.
Then in 2008 it went FULL on COMMERCIAL big business and POLITICALY driven results.
In 2016 FULL ON CENSORSHIP and commercially, politically driven results.
ADWORDS are the biggest scam of all and people STILL use it.

Google has truly become EVIL, not just rubbish or controversial truly EVIL.

Re: Webp for pictures in description

Posted: Wed Jan 05, 2022 2:50 am
by OSWorX
Curious about the result: viewtopic.php?f=10&t=226837

Re: Webp for pictures in description

Posted: Wed Jan 05, 2022 5:46 am
by soulliving
OSWorX wrote:
Mon Jan 03, 2022 10:54 pm
soulliving wrote:
Mon Jan 03, 2022 10:39 pm
.. Google is Google and they are market-leading so they tend to set the standards ..
Makes me always loud laughing when reading such.
Not Google is "making the standards", it's the "users" following many useless "guidelines.
And "marketing agencies" will post them as "standards" to make more profit.

Imagine a world, nobody use Google.
How could life and living be easy.
Sure they`re evil, really don`t like the way they go about and I agree.
But then please tell me how my clients should get their customers, what should I do with my webshop if not trying to rank well on Google (or any other search engine)? - Sadly Google has 70% marketshare world wide, Bing 13.3% and Baidu 12.25%
Social media is just as evil when it comes to moneymaking, data and standards - maybe even more evil than Google.

Give me an option then I`ll seriously look in to it.

Back to topic, decided to continue with NitroPack for now, seems to be working well and have to much other work to focus on for now.

Re: Webp for pictures in description

Posted: Wed Jan 05, 2022 8:39 am
by mikeinterserv
soulliving wrote:
Wed Jan 05, 2022 5:46 am


Sure they`re evil, really don`t like the way they go about and I agree.
But then please tell me how my clients should get their customers, what should I do with my webshop if not trying to rank well on Google (or any other search engine)? - Sadly Google has 70% marketshare world wide, Bing 13.3% and Baidu 12.25%
Social media is just as evil when it comes to moneymaking, data and standards - maybe even more evil than Google.

Give me an option then I`ll seriously look in to it.

Back to topic, decided to continue with NitroPack for now, seems to be working well and have to much other work to focus on for now.
Like a lot of things in life - It is what it is - just do your best :-)
Yes googles market share of search requires you to consider that for your clients.

Re: Webp for pictures in description

Posted: Wed Jan 05, 2022 12:59 pm
by by mona

Re: Webp for pictures in description

Posted: Wed Jan 05, 2022 7:09 pm
by soulliving
by mona wrote:
Wed Jan 05, 2022 12:59 pm
WebP module for all store images.
https://www.opencart.com/index.php?rout ... n_id=43173

Image
Awesome!
Quick question, I have to upload through the uploader (admin), I mostly upload pictures through FTP.
At the moment the current webp setup I have creates webp versions of the pictures (product picture etc) in the cache folder - guess it`s a code they implemented in one of the image.php (not a developer so do not know where it`s done exactly).

This extention would be perfect if it would make them on the "fly" when cache is created.

Re: Webp for pictures in description

Posted: Wed Jan 05, 2022 7:21 pm
by webdesires
You need to be careful with WebP, not all browsers support it and worse still there is some quirky behaviour with some older (not too old) iphones from my experience.

You should look into having ModPageSpeed installed on your server like we have on our hosting plans, it will automagically serve webp versions of all assets on browsers that support webp for you, automatically.
Not only that but does various other optimizations for you making your site faster.