Magento – Verpixelte Bilder auf der Home/ Startseite beim RWD Theme

Wenn man beim RWD Theme die Standard-Home-Seite verwendet und unter CMS > Seiten > Ihre Home Seite – Reiter “Design” das XML

<reference name="content">
       <block type="catalog/product_new" name="home.catalog.product.new" alias="product_new" template="catalog/product/new.phtml" after="cms_page">
            <action method="addPriceBlockType">
                <type>bundle</type>
                <block>bundle/catalog_product_price</block>
                <template>bundle/catalog/product/price.phtml</template>
            </action>
        </block>
        <block type="reports/product_viewed" name="home.reports.product.viewed" alias="product_viewed" template="reports/home_product_viewed.phtml" after="product_new">
            <action method="addPriceBlockType">
                <type>bundle</type>
                <block>bundle/catalog_product_price</block>
                <template>bundle/catalog/product/price.phtml</template>
            </action>
        </block>
        <block type="reports/product_compared" name="home.reports.product.compared" template="reports/home_product_compared.phtml" after="product_viewed">
            <action method="addPriceBlockType">
                <type>bundle</type>
                <block>bundle/catalog_product_price</block>
                <template>bundle/catalog/product/price.phtml</template>
            </action>
        </block>
    </reference>
    <reference name="right">
        <action method="unsetChild"><alias>right.reports.product.viewed</alias></action>
        <action method="unsetChild"><alias>right.reports.product.compared</alias></action>
    </reference>

wieder aktiviert haben indem Sie die Auskommentierung

<!-- -->

entfernt haben, werden auf der Startseite jeweils die neuen (“Neue Artikel”, zuletzt angesehenen “Ihre zuletzt angesehenen Artikel”) und zuletzt verglichenen Artikel angezeigt. Sind die Produktbilder verpixelt und nicht schön anzuschauen? Dann können Sie dies ändern, indem Sie folgende Dateien anpassen (wenn nötig aus dem base Ordner kopieren und in IHRTEMPLATE einfügen):

Für “Neue Artikel”, die Datei: new.phtml im Ordner app/design/frontend/IHRTEMPLATE/default/template/catalog/product. Dort ca. Zeile 35

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_product->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(135) ?>" width="135" height="135" alt="<?php echo $this->escapeHtml($_product->getName()) ?>" /></a>

durch z.B.

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_product->getName()) ?>" class="product-image"><img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(350) ?>" width="350" height="350" alt="<?php echo $this->escapeHtml($_product->getName()) ?>" /></a>

ersetzen wobei die 350 die Pixelanzahl angeben.

Genauso gehen Sie dann z.B. für die zuletzt angesehenen Artikel vor mit der Datei home_product_viewed.phtml im Ordner /public_html/app/design/frontend/IHRTEMPLATE/default/template/reports

oder für verglichene Artikel die Datei home_product_compared.phtml im selben Ordner.

Nachtrag vom 07.02.2017

Zwischenzeitlich hat sich etwas im Design geändert und vor allem, wenn man das Widget “Neue Produkte” verwendet, gibt es für neue Produkte Unterschiede.

Für die Darstellung wie o.g. geschrieben wird weiterhin die new.phtml verwendet. Die Zeilen, die es zu ändern gilt, lauten aber nun

                <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->escapeHtml($_product->getName()) ?>" class="product-image">
                    <?php $_imgSize = 260; ?>
                    <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
                </a>

Wobei die gewünscht Größe einfach hinter der “$_imgSize” anstelle der 260 vermerkt werden kann.

Nutzt man aber das Widget, um auf einer Seite die neuen Produkte anzeigen zu lassen, unterscheidet es sich nun, um man die Produkte als Gitter / Grid oder Liste anzeigen lassen will. Für das Gitter wird nun die Datei new_grid.phtml (für Liste entsprechend die new_list.phtml) aus dem Ordner app/design/frontend/rwd/default/template/catalog/product/widget/new/content in den eigenen Template-Ordner kopiert.

Nun sind hier zwei Anpassungen zu machen, um ebenso wie oben einfach nur die gewünschte Pixelanzahl eingeben zu können. Die Macher von Magento haben zwar schon

<?php $_imgSize = 210; ?>

eingebaut, jedoch anscheinend vergessen dies auch weiter zu verwenden, da zwei Zeilen später dann dies steht

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(85) ?>" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />

Die Resize-Größe ist somit statisch auf 85px festgelegt. Dies macht keinen wirklichen Sinn und somit ersetzen wir “(85)” mit “($_imgSize)”. Anschließend sieht es dann alles in allem so aus

                    <?php $_imgSize = 350; ?>
                    <a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($_product->getName(), null, true) ?>" class="product-image">
                        <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize) ?>" alt="<?php echo $this->stripTags($_product->getName(), null, true) ?>" />
                    </a>

Und nun sieht es im Frontend auch schon schön aus. Sicherlich muss man bei der Pixelanzahl je nach eigenem Layout den optimalen Wert hinterlegen.

Genutzt in Magento Version 1.9 Kommentare? Ergänzungen? Hinweise? Gerne!

Published by Covos

Seit 2009 arbeite ich nun intensiv mit Magento. Begonnen habe ich mit der Erstellung und dem Betrieb von B2C-Shops. Ausgeweitet wurde dies durch meine Tätigkeit im Logistik-Sektor. Hieraus entstanden erste spezialisierte B2E-Systeme. Heute arbeite ich tag-täglich mit spannenden B2C-, B2B- und B2E-Projekten und berichte in diesem Blog über Herausforderungen und gebe Insider-Tipps.

Leave a Reply

Your email address will not be published. Required fields are marked *