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



2 Comments

  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.

  2. Zil 26 October 2015 10:20 am

    The problem is that this custom function is overwriten upon next update. The function is great, but it should be created elsewhere to keep it after update. Any ideas where it should go?

TrackBack URL

Leave a comment