Programatically resize and crop images

Question

There's a javascript plugin called PictureFill.js:

https://github.com/scottjehl/picturefill

I wondered if anyone has ever used this on a Magento site and whether I could get some tips on how to implement this.

If not, can anyone tell me of an alternative so I'm able to use server side code to size and crop images?

Thanks in advance for any help.

Answer 1

Here's an example how product image is handled in product media.phtml block:

$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';

This example resizes image to 256 x 256 resolution (hence only single 256). There're other options as well which determine how the image is cropped, how the aspect ratio is handled, which background color to use and so on.

Answer 2

There's a guide for using polyfill.js (or picturefill) with magento here

After downloading picturefill.min.js, put it in one of your magento folders, for example skin/frontend/yourtheme/default/js

Add an entry to your app/design/frontend/yourtheme/default/layout/local.xml file.

In the section

<layout>
<default>
    <reference name="root">
        <reference name="head"> 

Add

<action method="addItem"><type>skin_js</type><name>js/picturefill.min.js</name></action>

Then if you want to update your product list pages, edit app/design/frontend/yourtheme/default/template/catalog/product/list.phtml. Find the img id tags (will appear twice, once in list and grid views)

<img id="product-collection-image-<?php echo $_product->getId(); ?>"
srcset="<?php echo $this->helper('catalog/image')
->init($_product,'small_image')->keepFrame(FALSE)
->resize($_imgSize); ?> 1x,
<?php echo $this->helper('catalog/image')
->init($_product,'image')
->keepFrame(FALSE)
->resize(2*$_imgSize); ?> 2x"

The product detail page requires some other changes. You can also use this magento picture-fill reference theme for this task.