Post by Qphoria » Wed Sep 15, 2010 11:18 pm

According to Google Page Speed tips. One tip is for web pages to include the width/height tags in the rendered html.
http://code.google.com/speed/page-speed ... Dimensions

So I did some playing with regex on the output code and it seems to be working.
This code will automatically generate the image size tags and insert them into every img tag in your page to comply with the Google Page Speed image tips automatically.

Not sure of the overall performance hit but it works. YMMV:

1. EDIT: system/library/response.php
2. FIND:

Code: Select all

if ($this->level) {
3. BEFORE, ADD:

Code: Select all

//Q: Add width/height tags to all images for Google Page Speed tip:
	        //http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
	        preg_match_all('/<img[^>]+>/i', $this->output, $result);

	        $img = array();
	        foreach($result[0] as $img_tag) {
	            preg_match_all('/(width|height|src)=("[^"]*")/i',$img_tag, $img[$img_tag]);
	        }

	        foreach ($img as $k => $info) {
	            if (count($info) == 3 && $info[1][0] == 'src') {
					//if (curl_init(str_replace('"', '', $info[2][0]))) {
					$imgfile = str_replace('"', '', $info[2][0]);
					$imgfile = str_replace(HTTP_SERVER, DIR_IMAGE . '../', $imgfile);
					$imgfile = str_replace(HTTPS_SERVER, DIR_IMAGE . '../', $imgfile);
	                if (file_exists($imgfile)) {
	                    $image_info = getImageSize(str_replace('"', '', $imgfile));
	                    $k = trim($k, '/>');
	                    $k = trim($k, '>');
	                    $this->output = str_replace($k, ($k . ' ' . $image_info[3]), $this->output);
	                }
	            }
	        }
	        //
      

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by Moggin » Wed Sep 15, 2010 11:51 pm

It works! Thanks Q!

Active Member

Posts

Joined
Wed May 05, 2010 4:56 am

Post by Qphoria » Thu Sep 16, 2010 12:02 am

JAY6390 wrote:Looks good although I'm pretty sure this can all be done with one preg_replace_callback instead of using loops
Probably :) I'm really noob with regex tho so this is a great accomplishment for me :)

I added one more update to the code above to do a file_exists check on the path. It was causing an error with the captcha image on the product page. This should fix it

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by rph » Sat Aug 13, 2011 10:18 pm

Modifying the individual controllers and templates is the best method to implement width/height tags. For those who are lazy and don't mind some sloppy code they can just replace:

catalog/model/tool/image.php

Code: Select all

		if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
			return HTTPS_IMAGE . $new_image;
		} else {
			return HTTP_IMAGE . $new_image;
		}
with

Code: Select all

		if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
			return HTTPS_IMAGE . $new_image . '" width="' . $width . '" height="' . $height;
		} else {
			return HTTP_IMAGE . $new_image . '" width="' . $width . '" height="' . $height;
		}
and that will automatically add it everywhere an image is generated. This won't work for any images which aren't resized.

Edit: Attached vQmod script for use in OpenCart 1.4.9.x through 1.5.5.1.

Attachments

Last edited by rph on Sat Apr 06, 2013 3:11 am, edited 4 times in total.
Reason: Attached vQmod script

-Ryan


rph
Expert Member

Posts

Joined
Fri Jan 08, 2010 5:05 am
Location - Lincoln, Nebraska

Post by webpie it. » Sun Aug 14, 2011 12:48 am

Thanks rph works perfectly in 1.5x!

Nice one

Regards

Chris


Active Member

Posts

Joined
Mon Jan 31, 2011 7:28 pm

Post by mrjave » Thu Aug 16, 2012 9:35 pm

rph wrote:I agree that really is the best method to implement width/height tags. For those who are lazy and don't mind some sloppy code they can just replace:

catalog/model/tool/image.php

Code: Select all

		if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
			return HTTPS_IMAGE . $new_image;
		} else {
			return HTTP_IMAGE . $new_image;
		}
with

Code: Select all

		if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
			return HTTPS_IMAGE . $new_image . '" width="' . $width . '" height="' . $height;
		} else {
			return HTTP_IMAGE . $new_image . '" width="' . $width . '" height="' . $height;
		}
and that will automatically add it everywhere an image is generated.
good day Rph,

your coding is working.
however, for additional pictures, if you were to clicked on it, that picture will not load inside the product main image frame and will instead go to, for eg. http://mydomain.com/image/cache/data/myimage.png and showing the pop up picture only.

any fix for this?

kind regards,
Jave

Active Member

Posts

Joined
Wed Jun 13, 2012 4:22 pm

Post by mrjave » Sun Aug 26, 2012 10:12 am

good day all,

any advice on the above?

kind regards,
Jave

Active Member

Posts

Joined
Wed Jun 13, 2012 4:22 pm

Post by mrjave » Wed Aug 29, 2012 3:50 pm

hi Rph,

any advice?

regards,
Jave

Active Member

Posts

Joined
Wed Jun 13, 2012 4:22 pm

Post by Qphoria » Wed Aug 29, 2012 11:42 pm

I've updated my code in the first post to work properly now. Works in both 1.4.x and 1.5.x

Image
Donate!|OpenCart Basics|GeoZones
Image


User avatar
Administrator

Posts

Joined
Tue Jul 22, 2008 3:02 am

Post by mrjave » Thu Aug 30, 2012 10:16 am

Qphoria wrote:I've updated my code in the first post to work properly now. Works in both 1.4.x and 1.5.x
Thanks Qphoria.

kind regards,
Jave

Active Member

Posts

Joined
Wed Jun 13, 2012 4:22 pm

Post by seoadsem » Sat Sep 01, 2012 3:05 am

Qphoria wrote:I've updated my code in the first post to work properly now. Works in both 1.4.x and 1.5.x
I am using 1.5.4.1 and the code is working, but seeing in the error log this error:
Undefined offset: 0 in vqmod/vqcache/vq2-system_library_response.php on line 67

Newbie

Posts

Joined
Mon Aug 27, 2012 1:50 am

Post by kombi » Fri Oct 19, 2012 7:56 am

Thanks for the code... I am also getting errors in the error logs it looks like this line of code... Wish I know more to troubleshoot and sugestions?

if (count($info) == 3 && $info[1][0] == 'src') {

New member

Posts

Joined
Thu Sep 06, 2012 5:03 am

Post by lee420 » Mon Jan 07, 2013 9:37 am

Hi Q,

I put your mod in my response file and the cart in the header shows errors like
*') + $('#cart-box-total').load('index.php?route=module/cart&remove=783' + ' #cart > *') + $('#cart-box-list').load('index.php?route=module/cart&remove=783' + ' #cart > *');" />
next to each product in cart.

Any Ideas?

Newbie

Posts

Joined
Tue Apr 10, 2012 7:35 am

Post by sans » Sun Jan 13, 2013 2:53 pm

lee420 wrote:Hi Q,

I put your mod in my response file and the cart in the header shows errors like
*') + $('#cart-box-total').load('index.php?route=module/cart&remove=783' + ' #cart > *') + $('#cart-box-list').load('index.php?route=module/cart&remove=783' + ' #cart > *');" />
next to each product in cart.

Any Ideas?
yes i get error too. below is my screen shoot
header-cart.png

header-cart.png (70.72 KiB) Viewed 21146 times


kaos jersey, jersey bola, baju bola, baju bola terbaru, baju bola murah


Active Member

Posts

Joined
Tue Dec 07, 2010 9:18 am

Post by vapestore » Tue Mar 19, 2013 6:50 am

Has anyone tested the code from the first post on OC 1.5.5.1? The one from mrjave made a big mess in my cart and had to replace the whole store's directory!

Image
Africa's largest selection of herbal vaporizers. Be wise, Vaporize!


New member

Posts

Joined
Tue Mar 05, 2013 1:29 pm

Post by ftrippie » Wed Mar 20, 2013 9:35 pm

Hi,

The first posted code from Qphoria seems to work well, but I get the same strange characters in the cart as lee420 and sans.

the resulting code with the change:
<img height="12" 12"="" onclick="(getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') ? location = 'index.php?route=checkout/cart&remove=3362' : $('#cart').load('index.php?route=module/cart&remove=3362' + ' #cart width=" title="Eliminar" alt="Eliminar" src="catalog/view/theme/sellya/image/remove-small.png">
*');" /

without the change:
<img onclick="(getURLVar('route') == 'checkout/cart' || getURLVar('route') == 'checkout/checkout') ? location = 'index.php?route=checkout/cart&remove=3362' : $('#cart').load('index.php?route=module/cart&remove=3362' + ' #cart > *');" title="Eliminar" alt="Eliminar" src="catalog/view/theme/sellya/image/remove-small.png">

Does anybody know how to fix this?

Cheers!

Newbie

Posts

Joined
Wed Jul 11, 2012 7:09 pm

Post by ForgetfulGuru » Thu Mar 21, 2013 3:08 am

Thanks Q it was good finding this post, I was addressing the same issue from PageSpeed.
Just to make sure I follow the instruction properly, The whole public function output() should now look like this?

Code: Select all

	
	public function output() {
		if ($this->output) {
//Q: Add width/height tags to all images for Google Page Speed tip:
//http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
           preg_match_all('/<img[^>]+>/i', $this->output, $result);
           $img = array();
           foreach($result[0] as $img_tag) {
               preg_match_all('/(width|height|src)=("[^"]*")/i',$img_tag, $img[$img_tag]);
           }
           foreach ($img as $k => $info) {
               if (count($info) == 3 && $info[1][0] == 'src') {
               //if (curl_init(str_replace('"', '', $info[2][0]))) {
               $imgfile = str_replace('"', '', $info[2][0]);
               $imgfile = str_replace(HTTP_SERVER, DIR_IMAGE . '../', $imgfile);
               $imgfile = str_replace(HTTPS_SERVER, DIR_IMAGE . '../', $imgfile);
                   if (file_exists($imgfile)) {
                       $image_info = getImageSize(str_replace('"', '', $imgfile));
                       $k = trim($k, '/>');
                       $k = trim($k, '>');
                       $this->output = str_replace($k, ($k . ' ' . $image_info[3]), $this->output);
                   }
               }
           }
//     
			if ($this->level) {
				$ouput = $this->compress($this->output, $this->level);
			} else {
				$ouput = $this->output;
			}	
				
			if (!headers_sent()) {
				foreach ($this->headers as $header) {
					header($header, true);
				}
			}
			
			echo $ouput;
		}
	}
}

That is one hell of a lot easier than going through manually adding W x H to ever img. :laugh: :crazy:

Life is for the taking. It's everything else you need to pay for.
Anne Makes Lovely Candles


User avatar
New member

Posts

Joined
Sun Jul 22, 2012 11:12 pm
Location - Left hand corner as you enter the room, better feng shui.

Post by ForgetfulGuru » Thu Mar 21, 2013 3:49 am

ftrippie wrote:Hi,
The first posted code from Qphoria seems to work well, but I get the same strange characters in the cart as lee420 and sans.
Does anybody know how to fix this?
Cheers!
I am basically asking the same question, though not in the OC Cart page they seam to be clean of any extra characters.
I am getting them in an add-on module called 'Mini Shopping Cart' right next to the remove icon

Take this is a connected issue. With the 'Mini Shopping Cart' add-on it's displaying the last few characters from the image tag
*');" /> not picking up on the dynamic remove function. Think it's seeing this #dynamicminicart > as the closing of the image tag.

Code: Select all

<img src="catalog/view/theme/mobileshoppe/image/remove-small.png" width="13" height="18" alt="<?php echo $button_remove; ?>" title="<?php echo $button_remove; ?>" onClick="$('#dynamicminicart').load('index.php?route=module/minicart&remove=<?php echo $product['key']; ?> #dynamicminicart > *');" />
Manually adding width="13" height="18" attribute your code sees only the height="18" attribute and still places the width at the wrong point.

Hope these observation help in eliminating the issue with this running perfectly.

Life is for the taking. It's everything else you need to pay for.
Anne Makes Lovely Candles


User avatar
New member

Posts

Joined
Sun Jul 22, 2012 11:12 pm
Location - Left hand corner as you enter the room, better feng shui.

Post by vapestore » Tue Mar 26, 2013 5:14 pm

Hey all, I've used mrjave method and it works. I didn't replace the entire code since mine included config_ssl and config_url.
My code now looks as follow, I have no errors and the image sizes are automatically added.

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 . '" width="' . $width . '" height="' . $height;
		} else {
			return $this->config->get('config_url') . 'image/' . $new_image . '" width="' . $width . '" height="' . $height;
		}	

Image
Africa's largest selection of herbal vaporizers. Be wise, Vaporize!


New member

Posts

Joined
Tue Mar 05, 2013 1:29 pm

Post by storm-cloud » Thu Apr 04, 2013 7:50 pm

I was also just looking into this.

Previously I remedied this through adding in the required dimensions within the stylesheet. This obviously meant that all the speed benefits were gained as the browser did not have to redraw the page once the page was loaded to accommodate for images.

However, PageSpeed still seems to prefer the width and height attributes.

Tried Q's method and I am also getting the same undefined offset error mentioned above. I then tried rph's method which seems to work well. Ryan, could you clarify why this method would be considered sloppy code? Is it bad practice to call these attributes within a model/tool file?

Also, I have noticed that there a few images in which the width and height attributes are not applied. For example, the store logo, the stars (rating) image, captcha etc. Besides editing the raw template files, would there be another way to achieve this?

Active Member

Posts

Joined
Wed Feb 22, 2012 8:07 am
Who is online

Users browsing this forum: No registered users and 3 guests