Magento – How to resize product page image

imageproduct

I'm having an issue with resizing product images on the product pages. Right now everything appears very vertically stretched out (however, the hover features shows the proper aspect ratio).

How can I stop the images from all being vertically stretched out from the original?

Thanks!

Here's the code I have in media.phtml. I think it was changed so that product listing pages all had nicely square images, but I'm not 100% sure.

    <?php
$_product = $this->getProduct();
$_helper = $this->helper('catalog/output');
$store = Mage::app()->getStore();
$code  = $store->getCode();
?>
<?php
$ratio_width = Mage::getStoreConfig("trego_settings/product_view/ratio_width", $code);
$ratio_height = Mage::getStoreConfig("trego_settings/product_view/ratio_height", $code);
$ratio = $ratio_height / $ratio_width;
?>
<?php if (count($this->getGalleryImages()) > 0): ?>
<ul id="etalage">
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
        <img class="etalage_thumb_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(TRUE)->resize(350); ?>">
    <img class="etalage_source_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(1000, 1000*$ratio)?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>">
</li>
<?php endforeach; ?>
</ul>
<?php else: ?>
<ul id="etalage">
<li>
    <img class="etalage_thumb_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(TRUE)->resize(350); ?>">
    <img class="etalage_source_image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(1000, 1000*$ratio)?>" alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>">
</li>
</ul>
<?php endif; ?>
<div class="etalage-control">
<a href="javascript:void(0)" class="etalage-prev">Previous</a>
<a href="javascript:void(0)" class="etalage-next">Next</a>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
    var width = jQuery('.product-view .product-img-box').width();
    var src_img_width = 800;
    var src_img_height = 1000;
    var ratio_width = <?php echo $ratio_width; ?>;
    var ratio_height = <?php echo $ratio_height; ?>;

    src_img_width = 1000 * ratio_width / ratio_height;
    var height = width * ratio_height / ratio_width;

    var zoom_enabled = true;
    if(jQuery(window).width()<480)
        zoom_enabled = false;
    jQuery('#etalage').etalage({
        thumb_image_width: width,
        thumb_image_height: height,
        source_image_width: src_img_width,
        source_image_height: src_img_height,
        zoom_area_width: width,
        zoom_area_height: height,
        zoom_enable: zoom_enabled,
        smallthumb_hide_single: false,
        autoplay: false
    });
    jQuery('.product-view .product-img-box .etalage-control a').css('bottom',((jQuery('.etalage_small_thumbs').height()-25)/2)+"px");
    if(jQuery('.etalage_small_thumbs').height() == 0)
        jQuery('.product-view .product-img-box .etalage-control a').css('bottom',((jQuery('.etalage_small_thumbs img').first().height()-25)/2)+"px");
    jQuery(window).resize(function(e){
        var width = jQuery('.product-view .product-img-box').width();
        var height = width * ratio_height / ratio_width;
        zoom_enabled = true;
        if(jQuery(window).width()<480)
            zoom_enabled = false;
        jQuery('#etalage').etalage({
            thumb_image_width: width,
            thumb_image_height: height,
            source_image_width: src_img_width,
            source_image_height: src_img_height,
            zoom_area_width: width+12,
            zoom_area_height: height+12,
            zoom_enable: zoom_enabled,
            smallthumb_hide_single: false,
            autoplay: false
        });
        jQuery('.product-view .product-img-box .etalage-control a').css('bottom',((jQuery('.etalage_small_thumbs').height()-25)/2)+"px");
    });
    jQuery('.etalage-prev').on('click', function(){
        etalage_previous();
    });

    jQuery('.etalage-next').on('click', function(){
        etalage_next();
    });
});
</script>

Best Answer

tl;dr: Magento does a decent job handling the impossibly variable world of product image sizes, proportions/dimensions, and theme requirements. I suggest to revert to stock image handling and implement light server-side customization as needed.

Magento's out-of-box implementation handles making product images fit with the design by measuring larger and smaller images than specified in the code/markup (350px in your case) and creating cached versions of these images (unoccupied "space" is filled with a solid color). The custom theme which you have is trying to handle this on its own by customizing OOB behavior and JavaScript (suboptimal approach at best IMO), and you are going to run into issues if your images or small or not uniformly proportioned (see constrainOnly(FALSE)).

Related Topic