Magento – Magento resize different size images to unique size. Read description.

image-uploadproductproduct-attributeproduct-imagesproduct-list

I am having a catalog with different sized images. Some will be 200×300 some will be 300×150. But All i want to do is to resize all the image to one size which makes me to show in my home page listing.

I am trying the normal magento resize to crop tp 160×210 as follows,

   <img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->constrainOnly(false)->keepAspectRatio(true)->keepFrame(false)->resize(160, 210); ?>" alt="<?php echo $this->htmlEscape($this->getImageLabel($_product, 'small_image')) ?>" />

But its cropping images in different size, The images are in random height and widths 160×135, 160×156, 159×210, 150×210

Detailed answers are highly appreciated.

Best Answer

Either set keepFrame to true, so it's always exact 160x210, or set keepAspectRatio to false.

Now it is making sure both width and height won't exceed the values you feed it. But since you don't want a frame, and want to keep your aspect ratio, it has to change both width and height in the same ratio.

<?php 
echo $this->helper('catalog/image')->init($_product, 'small_image')
    ->constrainOnly(false)
    ->keepAspectRatio(true)
    ->keepFrame(true)
    ->resize(160, 210);
?>

Edit: For cropping you need to use Varien_Image. Unfortunately the Mage_Catalog_Helper_Image doesn't offer a method to return the Varien_Image class. So you need to make a custom module to make it possible to crop.

See https://stackoverflow.com/questions/9492770/magento-crop-image for an example.

Basically it says you need to make your own helper and extend Mage_Catalog_Helper_Image, so you can use $this->_getModel()->getImageProcessor()->crop()

Related Solutions

Magento 2 – Add ‘Read More’ Link in Short Description on Product Page

You have to just overrider attribute.phtml file from module-catalog core module.

Copy file inside your theme,

app/design/frontend/Vendor/luma/Magento_Catalog/templates/product/view/attribute.phtml

<?php
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

/**
 * Product view template
 *
 * @see \Magento\Catalog\Block\Product\View\Description
 */
?>
<?php
$_helper = $this->helper('Magento\Catalog\Helper\Output');
$_product = $block->getProduct();
$_call = $block->getAtCall();
$_code = $block->getAtCode();
$_className = $block->getCssClass();
$_attributeLabel = $block->getAtLabel();
$_attributeType = $block->getAtType();
$_attributeAddAttribute = $block->getAddAttribute();

if ($_attributeLabel && $_attributeLabel == 'default') {
    $_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
}
if ($_attributeType && $_attributeType == 'text') {
    $_attributeValue = ($_helper->productAttribute($_product, $_product->$_call(), $_code)) ? $_product->getAttributeText($_code) : '';
} else {
    $_attributeValue = $_helper->productAttribute($_product, $_product->$_call(), $_code);
}
?>



<?php if ($_attributeValue): ?>
    <?php if($_code === 'short_description') { ?>
        <div class="value more" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?> >
        <?php  if ($_product->getData('short_description')) {
            $string = strip_tags($_product->getData('description'));

            if (strlen($string) > 50) {
                // truncate string
                $stringCut = substr($string, 0, 50);
                $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="javascript:void(0);" class="readmore">Read More</a>';
            }
            echo $string;
            ?>
        <?php
        }else {?>
            <?php /* @escapeNotVerified */ echo $_attributeValue; 
            }
        ?>
        </div>

        <div class="less" style="display:none">
            <?php echo $_attributeValue; ?>
            <a href="javascript:void(0);" class="readless">Read Less</a>
        </div>
        <script type="text/javascript">
            console.log('test');
            require(["jquery"],function($){
                $('.readmore').on("click",function(){
                    $('.less').show();
                    $('.more').hide();
                });
                $('.readless').on("click",function(){
                    $('.less').hide();
                    $('.more').show();
                });
            });
        </script>
    <?php } else { ?>
        <div class="product attribute <?php /* @escapeNotVerified */ echo $_className?>">
            <?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php /* @escapeNotVerified */ echo $_attributeLabel?></strong><?php endif; ?>
            <div class="value" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?>><?php /* @escapeNotVerified */ echo $_attributeValue; ?></div>
        </div>
    <?php } ?>
<?php endif; ?>

Magento 1.9 – Can Magento Resize Images on the Backend?

Magento resizes images to the given size and saves them to a cache folder - if set in template.

media/catalog/product/cache/1/small_image/{X}x{Y}/hash/m/y/my-large-image.jpg

Please check your templates where your extra large images are display like YOUR_THEME/template/catalog/product/list.phtml

<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(170, 160); ?>

If there is no ->resize(X, Y) images are cached in full size - what may cause your heavy page load.

is there a Magento plugin that will shrink images to a specified resolution

If you want to have it configurable from layout/config ..

replace

->resize(X, Y)

with

->resize($this->getImageWidth(), $this->getImageHeight());

And set image size from layout ... (example layout hande)

app/design/THEME/PACKAGE/layout/catalog.xml or local.xml

<catalog_category_default translate="label">
    ...
    <reference name="content">
        <block type="catalog/category_view" name="category.products" template="catalog/category/view.phtml">
            <block type="catalog/product_list" name="product_list" template="catalog/product/list.phtml">
                ...
                <!-- added lines -->
                <action method="setImageWidth"><px>140</px></action>
                <action method="setImageHeight"><px>140</px></action>
            </block>
        </block>
    </reference>
</catalog_category_default>

Or ... if you want to make it editable from config ...

...
<action method="setImageHeight"><px helper="[module]/[helper]/getConfigImageWidth" /></action>
...

... and add a helper to

app/code/POOL/My/Module/Helper/Data.php

class My_Module_Helper_Data extends Mage_Core_Helper_Abstract
{
    public function getConfigImageHeigth()
    {
        return Mage::getStoreConfig('path/to/image_heigth');
    }

    public function getConfigImageWidth()
    {
        return Mage::getStoreConfig('path/to/image_width');
    }
}

Best Answer

Related Solutions

Magento 2 – Add ‘Read More’ Link in Short Description on Product Page

Magento 1.9 – Can Magento Resize Images on the Backend?

Related Topic