Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

**(KINDA) SOLVED** How do I get products to resize properly and fit in zoom window? 
 
John R
Sr. Member
 
Total Posts:  90
Joined:  2008-08-21
 

I’ve searched this extensively, and all I have found so far are ways to make resizing proportional in on the list / grid pages (DirectResize).

The problem I am having is that many of my photos are much taller than wide, and the resizer is apparently basing the calculation on the width. The end result is just the top 25% or so of my product showing in the zoom window when you view the product. How do I get it to resize proportionally so you can in fact see the full, zoomed-out product?

Sample attached. Thanks in advance!!

EDIT: Scroll to big mess of code below to see pseudo-fix

Image Attachments
bottle.JPG
 
Magento Community Magento Community
Magento Community
Magento Community
 
John R
Sr. Member
 
Total Posts:  90
Joined:  2008-08-21
 

Cmon folks .. this has to be an extremely common problem. Any insight?

 
Magento Community Magento Community
Magento Community
Magento Community
 
RTellez06
Jr. Member
 
Total Posts:  30
Joined:  2008-08-25
 

Theres a resize program in Magento Connect

 
Magento Community Magento Community
Magento Community
Magento Community
 
John R
Sr. Member
 
Total Posts:  90
Joined:  2008-08-21
 
RTellez06 - 25 September 2008 09:24 PM

Theres a resize program in Magento Connect

Which does not solve this problem

 
Magento Community Magento Community
Magento Community
Magento Community
 
harry12bar
Sr. Member
 
Avatar
Total Posts:  168
Joined:  2008-01-07
 

Hi, I know it can be annoying but just simple match height with width until a script arrives!

 
Magento Community Magento Community
Magento Community
Magento Community
 
John R
Sr. Member
 
Total Posts:  90
Joined:  2008-08-21
 
harry12bar - 26 September 2008 09:21 AM

Hi, I know it can be annoying but just simple match height with width until a script arrives!

As in take every image into Photoshop and resize the canvas to a square? That’s absurd! We are using GD2 ... this is not difficult functionality. How can the core team let something this trivial exist in 1.1.6?

DirectResize wants to work .. I can get it to resize the image properly, but it won’t zoom after.

 
Magento Community Magento Community
Magento Community
Magento Community
 
harry12bar
Sr. Member
 
Avatar
Total Posts:  168
Joined:  2008-01-07
 

Believe me, I sympathize but this is a very very new script. Its insanely complicated (keeps those hackers at bay) and is developing slowly but surely. Now I agree this should have been dealt with earlier but there are a few bigger bugs that are being dealt with. Just be patient. Deep breath and put the images in. If you have any idea what some of us, from the old days went through, you’d consider yourself lucky its image resizing thats driving round the bend.

People are looking at it.  Just get on with the rest of the site wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
harry12bar
Sr. Member
 
Avatar
Total Posts:  168
Joined:  2008-01-07
 

Maybe try another route using CSS: came across this example online:

#img.source-image {
    width100%;
    
positionabsolute;
    
top0;
    
left0;

This has not been modified for Magento (Yet) but worth experimenting with.

 
Magento Community Magento Community
Magento Community
Magento Community
 
John R
Sr. Member
 
Total Posts:  90
Joined:  2008-08-21
 

Well .. amazingly I solved this with 15 characters of code and no Connect extensions ..

In media.phtml, change:

<img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>

to

<img id="image" src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(1000); ?>" alt="<?php echo $this->htmlEscape($_product->getName()) ?>"/>

All you have to do is add ->resize(1000) and it works perfectly. You can change this value based on how large your images are.

HOWEVER ... if you use low resolution images and high resolution images, the low res will get distorted, because they are being forcefully sized up. I attempted to build a flag into the resize() function to check for the size before resizing, but for some reason $this->_getModel()->getWidth returns null. I also tried to set the value in ->resize(XXX) to the width of the actual image, but that didn’t work either.

At least this is a partial solution until I figure out how to get it to check for current dimensions.

 
Magento Community Magento Community
Magento Community
Magento Community
 
John R
Sr. Member
 
Total Posts:  90
Joined:  2008-08-21
 

After a bit more research .........

There is code somewhere that adds an inline style call to the product <img> tag, which dictates width: 265, so I haven’t found a good way to avoid small images from filling the box. However, I have found a way to maintain proper proportions and resize to a square without making an image larger.

media.phtml:

UNDER THIS:

<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>

ADD THIS:

<?
$_maxImageWidth 
1000// Can be changed to what you want the max resize to be
$_maxImageHeight 1000// Can be changed to what you want the max resize to be
$dimensions getimagesize($this->helper('catalog/image')->init($_product'image'));
if (
$dimensions[0] $_maxImageWidth || $dimensions[1] $_maxImageWidth{ $dimensions[0] $_maxImageWidth$dimensions[1] $_maxImageHeight}
if ($dimensions[0] >= $dimensions[1]{$resize $dimensions[0] ',' $dimensions[1];}
else {$resize $dimensions[1];}

CHANGE YOUR RESIZE CALL TO:

resize($resize);

ONLY If you want to use the AJAX switcher for the thumbnails, you need to also make these changes:

UNDER THIS:

<?php foreach ($this->getGalleryImages() as $_image): ?>

ADD THIS:

<?
$dimensions 
getimagesize($this->helper('catalog/image')->init($this->getProduct(), 'image'$_image->getFile()));
if (
$dimensions[0] $_maxImageWidth || $dimensions[1] $_maxImageHeight{ $dimensions[0] $_maxImageWidth$dimensions[1] $_maxImageHeight}
if ($dimensions[0] >= $dimensions[1]{ $resize $dimensions[0] ',' $dimensions[1] }
else { $resize $dimensions[1]}
?>

AND THEN CHANGE YOUR <a> CALL INSIDE THE <li> TO:

<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($resize); ?>" title="<?php echo $_product->getName();?>" onclick="$('image').src = this.href; return false;">
     <
img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(70, 70); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
 </
a>
 
Magento Community Magento Community
Magento Community
Magento Community
 
joesixpack
Member
 
Total Posts:  35
Joined:  2008-06-23
 

See: http://www.magentocommerce.com/boards/viewthread/13185/

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top