Reputation: 142
I'm trying to implement configurable swatches in custom theme. So far everything is working fine but I cant find where to change default parameters of swapped image. In catalog product list (list.phtml) I am using custom settings applied to images
<img id="product-collection-image-<?php echo $_product->getId(); ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(210,304); ?>"/>
When I swap image using configurable swatches i get correct image of the selected option but swapped image gets default parameters, so it comes with default size (210x210) and has white borders on left and right. I'd like to find out where the new image is generated to adjust it to correct size of catalog images.
[EDIT]
I included configurable swatches functionality into my custom theme. It works exactly the same as in RWD theme. So I have color swatches activated for catalog listing. When I click a color main image of product (we are in catalog listing not in product page) is swapped with the one assigned to the label. Extactly the same functionality as in RWD theme. Problem is that in my theme i use specific image size with keepAspectRatio(TRUE) and keepFrame(FALSE) options. When I click swatch, assigned to the label image is swapped in place of the original image. Which is ok. The problem is, that this swapped image is generated with default parameteres - especially keepFrame(TRUE) which is exactly what I want to disable as this is the reason the image have default size 210x210 instead of 210x304 and has white borders on left and right. But don't know where :)
[Edit 2] OK, kinda found it. It is located in app/code/core/configurableSwatches/Block/Catalog/Media/Js/Abstract.php
public function isKeepFrame()
there is a condition if getMode=='grid' they set keepFrame ==true for which I see no reason at all. Anyway setting it to false solved all my problems with images. But as I dont want to change core files is there a way I could change this settings to False for my theme only ?
Upvotes: 1
Views: 828
Reputation: 13822
I was getting the a white border around my images too when I tried to set catalog/product_image/small_width
to 400
while using Configurable Swatches.
My work around was to modify app/code/local/Mage/ConfigurableSwatches/Helper/Mediafallback.php
so that $keepFrame
would always be false.
protected function _resizeProductImage($product, $type, $keepFrame, $image = null, $placeholder = false)
{
// BEGIN EDIT
$keepFrame = false;
// END EDIT
$hasTypeData = $product->hasData($type) && $product->getData($type) != 'no_selection';
if ($image == 'no_selection') {
$image = null;
}
if ($hasTypeData || $placeholder || $image) {
$helper = Mage::helper('catalog/image')
->init($product, $type, $image)
->keepFrame(($hasTypeData || $image) ? $keepFrame : false) // don't keep frame if placeholder
;
$size = Mage::getStoreConfig(Mage_Catalog_Helper_Image::XML_NODE_PRODUCT_BASE_IMAGE_WIDTH);
if ($type == 'small_image') {
$size = Mage::getStoreConfig(Mage_Catalog_Helper_Image::XML_NODE_PRODUCT_SMALL_IMAGE_WIDTH);
}
if (is_numeric($size)) {
$helper->constrainOnly(true)->resize($size);
}
return (string)$helper;
}
return false;
}
You would think that customizing the configurableswatches/catalog/media/js.phtml
template, setting $this->getProductImageFallbacks(false)
would work, but I had no luck with that.
Now my images show up at 340px
(not 400 for some reason) but at least there's no white border.
Upvotes: 0