0

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>
  • can you put your code??? – Amit Bera Aug 9 '14 at 6:42
  • Open your catalog/product/view/media.phtml. Find the img tag remove the resize() method and make sure that you are calling image in not calling small_image or thumbnail. – Keyul Shah Aug 9 '14 at 7:53
  • Hi, I put my code. I think it was previously modified so that the product listing page all had perfectly square images, but it negatively affected the actual product page where the main/thumbnail image are now vertically stretched. – Ryan Aug 9 '14 at 20:56
2

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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