Configurable Swatches – Maintain Correct Image Proportions in Magento 1.9

magento-1.9swatches

The images created for the configurable swatches are stretched to fit the square div and image proportions are ignored. Images that are rectangle shaped will end up being distorted.

This is what the image should look like (taken from the thumbs view in magento 1.8.1.0):

enter image description here

This is what it looks like for the actual swatch:

enter image description here

[Moderator edit: adding relevant comment to body]

There is a template located at catalog\product\view\type\options\configurable\swatches.phtml and the code responsible for the swatch images is as follows:

 <img src="<?php echo $_swatchUrl; ?>" alt="<?php echo $_option->label; ?>" width="<?php echo $_swatchInnerWidth ?>" height="<?php echo $_swatchInnerHeight ?>" />

Changing this will have no effect on the image proportions however.

Best Answer

We ran into this and perhaps someone has a better solution, but we extended the configurable swatches productimage.php helper with our own module. Perhaps Magento intended everyone to create manual swatches for every product. That tis time consuming and we have products that does not work well for. They uses the Varien Image model which allowed them access to caching, but does not have the convenient default settings of the MAGE catalog/image model. The nice part is those functions are available.

If you don't know how to create a module would suggest making square images. "Do Not Edit The Core Files" Extend Them!

We extended the 

protected function _resizeSwatchImage($filename, $tag, $width, $height)
{

below

$processor = new Varien_Image($sourceFilePath);

we added

$processor->backgroundColor(array(255, 255, 255)); 
// Set background color to white
$processor->constrainOnly(TRUE); 
//Constrain to proportions
$processor->keepAspectRatio(TRUE); 
//keep existing aspect ratio
$processor->keepFrame(TRUE);
//Kinda what it says
Related Topic