magento icon
11th
Aug 11

Magento – Resizing Category Images PHP

Posted Thursday 11th August 2011
Automatically resize category images in Magento E-Commerce.

Note: This was done for Magento v1.4.2.0.

Whenever a client uploads an image they tend to be massive with little care taken into consideration on the image size or the file size. When a client wanted category images to show up on their shops category pages I noticed that Magento put no effort into resizing them whatsoever and outputted them “as is”. As the images were too big simply be scaled with HTML or CSS I used the following, courtesy of user contributions in the Magento Forums.

Under /app/code/core/Mage/Catalog/Model/Category.php you need to add the following resize function inside the Mage_Catalog_Model_Category class. Add this to the bottom of the file above the last closing bracket:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
public function getResizedImage($width, $height = null, $quality = 100) {
	if (!$this->getImage())
		return false;
 
        $imageUrl = Mage::getBaseDir('media').DS."catalog".DS."category".DS.$this->getImage();
        if (!is_file( $imageUrl ))
		return false;
 
	$imageResized = Mage::getBaseDir('media').DS."catalog".DS."product".DS."cache".DS."cat_resized".DS.$this->getImage();
        if (!file_exists($imageResized) && file_exists($imageUrl) || file_exists($imageUrl) && filemtime($imageUrl) > filemtime($imageResized)):
		$imageObj = new Varien_Image($imageUrl);
		$imageObj->constrainOnly(true);
		$imageObj->keepAspectRatio(true);
		$imageObj->keepFrame(false);
		$imageObj->quality($quality);
		$imageObj->resize($width, $height);
		$imageObj->save($imageResized);
	endif;
 
	if(file_exists($imageResized)){
		return Mage::getBaseUrl('media' )."/catalog/product/cache/cat_resized/".$this->getImage();
	}
	else{
		return $this->getImageUrl();
        }
}

Now the method can be used to resize category images from template files. For example I edited the category view /app/design/frontend/base/default/template/catalog/category/view.phtml to resize category images to 180×180 pixels. Change this:

1
2
3
4
5
6
7
8
9
<?php
    $_helper    = $this->helper('catalog/output');
    $_category  = $this->getCurrentCategory();
    $_imgHtml   = '';
    if ($_imgUrl = $_category->getImageUrl()) {
        $_imgHtml = '<p class="category-image"><img src="'.$_imgUrl.'" alt="'.$this->htmlEscape($_category->getName()).'" title="'.$this->htmlEscape($_category->getName()).'" /></p>';
        $_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, 'image');
    }
?>

to this:

1
2
3
4
5
6
7
8
9
10
<?php
    $_helper    = $this->helper('catalog/output');
    $_category  = $this->getCurrentCategory();
    $_imgHtml   = '';
    if ($_imgUrl = $_category->getImageUrl()) {
        //$_imgHtml = '<p class="category-image"><img src="'.$_imgUrl.'" alt="'.$this->htmlEscape($_category->getName()).'" title="'.$this->htmlEscape($_category->getName()).'" /></p>';
        $_imgHtml = '<p class="category-image"><img src="'.$_category->getResizedImage( '180', '180').'" alt="'.$this->htmlEscape($_category->getName()).'" title="'.$this->htmlEscape($_category->getName()).'" /></p>';
        $_imgHtml = $_helper->categoryAttribute($_category, $_imgHtml, 'image');
    }
?>

Like all core changes/hacks, these changes will be lost should you update Magento.

Bookmark or share this page:

SociBook del.icio.us Digg Facebook Google Yahoo Buzz StumbleUpon

MSN Contact: contact [at] danielgibbs.net



1 Comment

  1. atwix 6 April 2012 11:03 am

    Thanks for the article, it’s very useful. We have an article on the similar topic posted here http://www.atwix.com/magento/how-to-resize-images/ you’re welcome to check it out and leave your feedback.

TrackBack URL

Leave a comment