2

I upload my pictures at 864px by 864px. They look great on the product page (I also like that they no longer open a new window when clicked).

However, the first thing my customers see are the blurry new products images on the home page.

Using Chrome Inspect Element on the image, it appears to be resizing the image to 135, because I see these attributes: width="135" height="135"

However, chrome shows the image itself is 275x275 (actually, it says it is 274.844x275). So it seems the image is being resized to 135x135, then scaled up to 275x275 when displayed, thus making the image unnecessarily pixelated (blurry).

I've looked for the resize command that may be causing this, and found a potential culprit around line 50 in: app/design/frontend/default/my_theme/template/catalog/product/list.phtml

<a href="<?php echo $_product->getProductUrl() ?>" title="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" 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->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" /></a>

However, changing the width and height attributes to 275 and changing the resize(135) to resize(275) has no visible effect on the image.

Does anybody here know how to fix this problem?

Improve this question
3
  • "However, changing the width and height attributes to 275 and changing the resize(135) to resize(275) has no visible effect on the image." if you know the size attributes for view, you can use the same for resize() also..
    – Manikandan Arunachalam
    Aug 11, 2015 at 14:05
  • As I said, I already tried that. If you meant something else, please clarify.
    – SirGeekALot
    Aug 12, 2015 at 14:59
  • I figured it out. My solution is in the answers below (I cannot upvote my own answer, and I don't think it is appropriate to shove my answer into the question).
    – SirGeekALot
    Oct 19, 2015 at 4:05

2 Answers 2

Reset to default
4

I figured it out. I turned on template path hints to see exactly which file was being used to render the new products widget on the home page. It showed this path:

/app/design/frontend/base/default/template/catalog/product/new.phtml

The code to get the image was hard-coded to resize to 135!:

<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>

I know I should not edit this file directly, so I copied it into the following path (for the rwd theme, which is what I am using):

app/design/frontend/rwd/default/template/catalog/product/new.phtml

And then replaced that code with this code:

<?php $_imgSize=300; ?>
<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($_imgSize) ?>" width="<?php echo $_imgSize ?>" height="<?php echo $_imgSize ?>" alt="<?php echo $this->escapeHtml($_product->getName()) ?>" /></a>

Hopefully, this will help other people, too. It had me stumped for quite a while.

Improve this answer
0

Please be sure your product render from "catalog/product/list.phtml"? Also you need to check any CSS is effecting on it or not any width and height fix?

Improve this answer

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.