Specifying image dimensions (width and height) will help to speed up your website. Now I will write about how to add the width and height attributes in image <img> tag for opencart, and I'm using opencart version 2.0 for this tutorial.
Add Image Dimension Function in System
First step it will add image dimension function in system file, and it will add the function code to 'startup.php' in system folder. so open the startup.php file and add following code in the bottom of file:
function imgSize($output) {
preg_match('/-[0-9]*x[0-9]*\.(gif|jpg|png|jpeg)/i', $output, $result);
$imgsize = explode('x',$result[0]);
echo 'width="'.abs(intval($imgsize[0])).'" height="'.abs(intval($imgsize[1])).'"';
}
Call the Image Dimensions Function and Add it to All Image Products
To add image dimension to all image products, it will be easier if using vqmod, but before I write it using vqmod, I will write one example how to call the Image Dimension Function to the image product, for example we're going to add the dimension to the image products in featured module. here is the steps:
- open featured.tpl file in "catalog/view/theme/YOUR_THEME/template/module/" folder, and find this code:
src="<?php echo $product['thumb']; ?>"
replace with this :
src="<?php echo $product['thumb']; ?>" <?php echo imgSize($product['thumb']); ?>
and here is the result before and after changing the code above:
before:
after:
Working with vqmod
First, add the Image dimension function to system files, create new xml vqmod file and add this code:
<file name="system/startup.php">
<operation>
<search position="bottom"/>
<add><![CDATA[
function imgSize($output) {
preg_match('/-[0-9]*x[0-9]*\.(gif|jpg|png|jpeg)/i', $output, $result);
$imgsize = explode('x',$result[0]);
echo 'width="'.abs(intval($imgsize[0])).'" height="'.abs(intval($imgsize[1])).'"';
}]]></add>
</operation>
</file>
Then, let's start adding the dimensions to all image products in modules. add this code below to xml vqmod file:
<file name="catalog/view/theme/*/template/module/*.tpl">
<operation error="skip">
<search error="skip" position="replace"><![CDATA[src="<?php echo $product['thumb']; ?>"]]></search>
<add><![CDATA[src="<?php echo $product['thumb']; ?>" <?php echo imgSize($product['thumb']); ?> ]]></add>
</operation>
<operation error="skip">
<search position="replace"><![CDATA[src="<?php echo $banner['image']; ?>"]]></search>
<add><![CDATA[src="<?php echo $banner['image']; ?>" <?php echo imgSize($banner['image']); ?> ]]></add>
</operation>
</file>
the code above should affected to all modules files that has image product thumbnails, and also to all modules which is using banner images such as slideshow, banner and carousel modules.
Then now we will add the dimensions to all tpl files in "catalog/view/theme/YOUR_THEME/template/product/" folder, and it will affected to, category, search, manufacturer, special and product pages.
add this code below to the xml vqmod file:
<file name="catalog/view/theme/*/template/product/*.tpl">
<operation error="skip">
<search error="skip" position="replace"><![CDATA[src="<?php echo $product['thumb']; ?>"]]></search>
<add><![CDATA[src="<?php echo $product['thumb']; ?>" <?php echo imgSize($product['thumb']); ?> ]]></add>
</operation>
</file>
<file name="catalog/view/theme/*/template/product/product.tpl">
<operation error="skip">
<search position="replace"><![CDATA[src="<?php echo $thumb; ?>"]]></search>
<add><![CDATA[src="<?php echo $thumb; ?>" <?php echo imgSize($thumb); ?> ]]></add>
</operation>
<operation error="skip">
<search position="replace"><![CDATA[src="<?php echo $image['thumb']; ?>"]]></search>
<add><![CDATA[src="<?php echo $image['thumb']; ?>" <?php echo imgSize($image['thumb']); ?> ]]></add>
</operation>
</file>
That's it! now all the image products and also the banner image will have width and height attributes.
You can also download the result file here:
Posted by
