0

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.

2 Answers 2

2

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.

1
  • Thanks for the reply, Can you point me to any more detailed information on the web that I could use to set this up?
    – user9786
    Jul 2, 2014 at 11:39
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.