Magento – New products on home page has blurry images after upgrading to Magento ver. 1.9.2.0

ce-1.9.2.0image

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 275×275 (actually, it says it is 274.844×275). So it seems the image is being resized to 135×135, then scaled up to 275×275 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?

Best Answer

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.

Related Solutions

Magento – Magento ver 1.8 – Unable to upload images

@Ali, please check the following thinks before upload the image csv.

You have to be sure that all your fields are filled in Excel or Open Office Calc
Save the file as CSV.
Open the file with a text editor.
Go to File and after that - Save As. Your filename should end with “.csv
Under Save as type select All files.
Under Encoding you just have to select UTF-8 and save the file - Save the file.

And also can you see the following tips url http://www.file2cart.com/blog/6297-five-most-common-magento-image-import-problems

Magento 2 – Resize and Crop Images Without Stretching

Managed to put together a working solution for now by overriding the magento 2 product image class

Create a new module with the standard module.xml, registration.php, composer.json as needed.

Crete etc/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
  <preference for="Magento\Catalog\Model\Product\Image" type="Vendor\Imagecrop\Model\Product\Image" />
</config>

Create Model/Product/Image.php

<?php

namespace Vendor\Imagecrop\Model\Product;

class Image extends \Magento\Catalog\Model\Product\Image
{

  /**
   * @see \Magento\Framework\Image\Adapter\AbstractAdapter
   * @return $this
   */
  public function resize()
  {
    if (is_null($this->getWidth()) && is_null($this->getHeight())) {
      return $this;
    }
    // if given both dimensions crop to take up max of both dimensions
    if(!is_null($this->getWidth()) && !is_null($this->getHeight())){
      $new_width = $this->_width;
      $new_height = $this->_height;

      $this->getImageProcessor();

      $orig_width = $this->_processor->getOriginalWidth();
      $orig_height = $this->_processor->getOriginalHeight();

      $new_ratio = $new_width / $new_height;

      $orig_ratio = $orig_width / $orig_height;

      // if original has wider dimensions than new dimensions
      if($orig_ratio > $new_ratio){
        $temp_width = round($orig_ratio * $new_height);

        $tmp_constrain = $this->_constrainOnly;
        $this->setConstrainOnly(false);
        $this->getImageProcessor()->resize($temp_width, $new_height);
        $this->setConstrainOnly($tmp_constrain);

        $crop_amount = floor(($temp_width - $new_width) / 2);
        $crop_remainder = ($temp_width - $new_width) % 2;

        $this->_processor->crop(0, $crop_amount + $crop_remainder, $crop_amount, 0);


      // if original has taller dimensions than new dimensions
      } else {
        $temp_height = round((1 / $orig_ratio) * $new_width);

        $tmp_constrain = $this->_constrainOnly;
        $this->setConstrainOnly(false);
        $this->getImageProcessor()->resize($new_width, $temp_height);
        $this->setConstrainOnly($tmp_constrain);

        $crop_amount = floor(($temp_height - $new_height) / 2);
        $crop_remainder = ($temp_height - $new_height) % 2;

        $this->_processor->crop($crop_amount + $crop_remainder, 0, 0, $crop_amount);

      }

    } else {
      $this->getImageProcessor()->resize($this->_width, $this->_height);
    }
    return $this;
  }


}

This should change default behavious so when you have frame, aspect ratio set to false and constrain all set to true instead of resizing to the given size by stretching it will resize the shortest dimension and crop off the ends.

Still testing this code so use at own risk.

Best Answer

Related Solutions

Magento – Magento ver 1.8 – Unable to upload images

Magento 2 – Resize and Crop Images Without Stretching

Related Topic