Istnieją dwa sposoby aby zmienić lub usunąć kolor białego tła, które wypełnia obszar obok zdjęcia produktu.
W pierwszym, aby zmienić kolor tła edytujemy plik app/code/core/Mage/Catalog/Model/Product/Image.php. Odnajdujemy linie (ok. 45 linia):
protected $_backgroundColor = array(255, 255, 255);
i zamieniamy ósemkowy kolor biały na jakikolwiek inny (w zależności od stylu szablony lub własnego widzi mi się) np. na czarny:
protected $_backgroundColor = array(000, 000, 000);
Jeśli chcemy usunąć tło konieczna jest zmiana w dwóch liniach kodu. Odnajdujemy linie (linia ok. 41 oraz 43):
protected $_keepFrame = true; protected $_constrainOnly = false;
i zamieniamy je na:
protected $_keepFrame = false; protected $_constrainOnly = true;
keepFrame(bool $flag) – obraz przyjmie rozmiary z funkcji resize(szerokość, wysokość), domyślna wartość true, stosujemy przed samą funkcją resize.
constrainOnly(bool $flag) – obraz nie będzie większy niż był, domyślna wartość false, stosujemy przed samą funkcją resize.
Funkcja resize w plikach frontend’u powinna wyglądać w ten sposób: ->resize(135,135). Dla zdjęć nie podajemy atrybutów width oraz height:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($_product->getName()) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135,135) ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"></a>
Rozwiązanie dobre, ale nieoptymalne. Dlaczego? Po pierwsze, edytujemy plik w Core Mageno i powinniśmy utworzyć jego kopię w app/code/local/Mage/Catalog/Model/Product/. Po drugie, rozwiązanie zostanie zastosowane dla wszystkich zdjęć produktów na wszystkich stronach i podstronach danego projektu, co w większości przypadków nie jest konieczne.
Stosując drugi sposób w ogóle nie ingerujemy w pliki Core Magento.
Dla przykładu, chcemy zmienić białe tło na czarne tylko dla widoku listy/siatki. Edytujemy plik app/design/frontend/base/default/template/catalog/product/list.phtml. Odnajdujemy linie (ok. 50 lina):
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"></a>
i zamieniamy ją na:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->backgroundColor(array(000,000,000))->resize(135); ?>" width="135" height="135" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>"></a>
Zmiana polega na dodaniu przed funkcję resize() kodu:
->backgroundColor(array(000,000,000))
Aby usunąć tło, konieczne jest dodanie w plikach frontend’u przed funkcję resize() kodu:
->constrainOnly(TRUE)->keepFrame(FALSE)
Funkcja resize w plikach powinna wyglądać w ten sposób: ->resize(135,135). Dla zdjęć nie podajemy atrybutów width oraz height:
<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(TRUE)->keepFrame(FALSE)->resize(170, 170); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>"></a>
Podając atrybuty width oraz height zdjęcie zostanie automatycznie doskalowane do podanych ich wartości.
Rozwiązanie testowane i działa na wersjach Magento: 1.3.x, 1.4.x oraz 1.5.x.