Page 1 of 4

[MOD] Auto-Include width/height tags for images

Posted: Wed Sep 15, 2010 11:18 pm
by Qphoria
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);
	                }
	            }
	        }
	        //
      

Re: [MOD] Auto-Include width/height tags for images

Posted: Wed Sep 15, 2010 11:51 pm
by Moggin
It works! Thanks Q!

Re: [MOD] Auto-Include width/height tags for images

Posted: Thu Sep 16, 2010 12:02 am
by Qphoria
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

Re: [MOD] Auto-Include width/height tags for images

Posted: Sat Aug 13, 2011 10:18 pm
by rph
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.

Re: [MOD] Auto-Include width/height tags for images

Posted: Sun Aug 14, 2011 12:48 am
by webpie it.
Thanks rph works perfectly in 1.5x!

Nice one

Re: [MOD] Auto-Include width/height tags for images

Posted: Thu Aug 16, 2012 9:35 pm
by mrjave
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

Re: [MOD] Auto-Include width/height tags for images

Posted: Sun Aug 26, 2012 10:12 am
by mrjave
good day all,

any advice on the above?

kind regards,
Jave

Re: [MOD] Auto-Include width/height tags for images

Posted: Wed Aug 29, 2012 3:50 pm
by mrjave
hi Rph,

any advice?

regards,
Jave

Re: [MOD] Auto-Include width/height tags for images

Posted: Wed Aug 29, 2012 11:42 pm
by Qphoria
I've updated my code in the first post to work properly now. Works in both 1.4.x and 1.5.x

Re: [MOD] Auto-Include width/height tags for images

Posted: Thu Aug 30, 2012 10:16 am
by mrjave
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

Re: [MOD] Auto-Include width/height tags for images

Posted: Sat Sep 01, 2012 3:05 am
by seoadsem
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

Re: [MOD] Auto-Include width/height tags for images

Posted: Fri Oct 19, 2012 7:56 am
by kombi
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') {

Re: [MOD] Auto-Include width/height tags for images

Posted: Mon Jan 07, 2013 9:37 am
by lee420
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?

Re: [MOD] Auto-Include width/height tags for images

Posted: Sun Jan 13, 2013 2:53 pm
by sans
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 31838 times


Re: [MOD] Auto-Include width/height tags for images

Posted: Tue Mar 19, 2013 6:50 am
by vapestore
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!

Re: [MOD] Auto-Include width/height tags for images

Posted: Wed Mar 20, 2013 9:35 pm
by ftrippie
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!

Re: [MOD] Auto-Include width/height tags for images

Posted: Thu Mar 21, 2013 3:08 am
by ForgetfulGuru
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:

Re: [MOD] Auto-Include width/height tags for images

Posted: Thu Mar 21, 2013 3:49 am
by ForgetfulGuru
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.

Re: [MOD] Auto-Include width/height tags for images

Posted: Tue Mar 26, 2013 5:14 pm
by vapestore
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;
		}	

Re: [MOD] Auto-Include width/height tags for images

Posted: Thu Apr 04, 2013 7:50 pm
by storm-cloud
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?