Magento Forum

   
Page 1 of 4
Image Resize Function Scale to Original Dimensions? 
 
dan_w
Sr. Member
 
Total Posts:  290
Joined:  2008-01-04
 

I’m just wondering if anyone has gotten the image resize function to scale to the original dimensions of the image? The image resizer works great if the length, width of the original image is in proportion, however, if one is noticeably longer or taller than the other, the resulting resized image looks distorted. Yes, I know I can batch them through photoshop to square off the canvas size, but I’m really not looking forward to doing that for 15,000 photos. I’m hoping someone has achieved this???
Any thoughts appreciated.

Dan

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tweakmag
Guru
 
Avatar
Total Posts:  307
Joined:  2007-08-31
London, UK
 

Hi dan,
We made some code changes awhile ago to fix this - with the new way images are being processed we need to look at this again.
I am away this weekend - however will look at fixing this (if it hasn’t already been done) when i get back.
Cheers
Adam

 
Magento Community Magento Community
Magento Community
Magento Community
 
Spek
Sr. Member
 
Total Posts:  77
Joined:  2007-11-28
 

I didn’t check how the images were resized in magento, but I was having the same problem on another site and found a solution. The size I enter for “createthumb” in the code below is an upper limit, so it’s resized according to the original dimensions and will never “punch” out the box. The $attr inside the image tag will make sure every image has the right width/height tags since every picture will now slightly vary from the 82x82, yet will never be more than 82px wide or high.

I haven’t tried porting this solution to magento, nor is it my code. This is just here as a possible guide. In my experience it has worked very well.

<img src="/82x82/thumbnail.jpg" $attr />

$original "/products/" $row['brandTitle'"/" $row['itemPicture'];
$thumb "/products/" $row['brandTitle'"/82x82/" $row['itemPicture'];
            if (
file_exists($thumb)) {
            
list($width$height$type$attr) = getimagesize("$thumb");
            
else {
                createthumb
($orig,$thumb,82,82);
                list(
$width$height$type$attr) = getimagesize("$thumb");
            
}

/*
    Function createthumb($name,$filename,$new_w,$new_h)
    creates a resized image
    variables:
    $name        Original filename
    $filename    Filename of the resized image
    $new_w        width of resized image
    $new_h        height of resized image
*/    
function createthumb($name,$filename,$new_w,$new_h)
{
    $system
=explode(".",$name);
    if (
preg_match("/jpg|jpeg/",$system[1])){$src_img=@imagecreatefromjpeg($name);}
    
if (preg_match("/png/",$system[1])){$src_img=@imagecreatefrompng($name);}
    $old_x
=@imageSX($src_img);
    
$old_y=@imageSY($src_img);
    if (
$old_x $old_y
    
{
        $thumb_w
=$new_w;
        
$thumb_h=$old_y*($new_h/$old_x);
    
}
    
if ($old_x $old_y
    
{
        $thumb_w
=$old_x*($new_w/$old_y);
        
$thumb_h=$new_h;
    
}
    
if ($old_x == $old_y
    
{
        $thumb_w
=$new_w;
        
$thumb_h=$new_h;
    
}
    $dst_img
=@ImageCreateTrueColor($thumb_w,$thumb_h);
    @
imagecopyresampled($dst_img,$src_img,0,0,0,0,$thumb_w,$thumb_h,$old_x,$old_y); 
    if (
preg_match("/png/",$system[1]))
    
{
        imagepng
($dst_img,$filename); 
    
else {
        imagejpeg
($dst_img,$filename); 
    
}
    
@imagedestroy($dst_img); 
    @
imagedestroy($src_img); 
}

 
Magento Community Magento Community
Magento Community
Magento Community
 
flowstack
Sr. Member
 
Avatar
Total Posts:  159
Joined:  2008-01-30
London, United Kingdom
 

This method gets the secondary (thumbnail) images to appear correctly:

1. Open default/template/catalog/product/view/media.phtml.
2. On line 54 find the delete the ‘width’ and ‘height’ attributes in the <img> tag.
3. On the same line (54), find:

$_image->getFile())->resize(6868)

Simply replace one of these numbers with 0 and the image will auto scale. For example:

$_image->getFile())->resize(680)

will give you images 68 pixels wide, but the height will vary according to the original image ratio.

Hope that helps.

Ed

 
Magento Community Magento Community
Magento Community
Magento Community
 
jfbonham
Jr. Member
 
Total Posts:  27
Joined:  2008-01-08
 

Thanks, I was wondering about this and followed the advice. Works great.

I don’t get why Magento have added width and height attributes to the img tags. In web projects I normally avoid adding dimensions to images. If the image isn’t exactly the right size the distortion can be horrid. I wonder if there is any good reason why Magento did it on the default theme?

 
Magento Community Magento Community
Magento Community
Magento Community
 
jfbonham
Jr. Member
 
Total Posts:  27
Joined:  2008-01-08
 

By the way I changed all of these with the method above to scale to a fixed width - all good…

catalog/product/list.phtml - catalog product listings (seperate ones for grid and list view - I made my list view images bigger as there’s more space)
checkout/cart/sidebar.phtml - mini cart in the sidebar
product/view/media.phtml - product page sizes, including the thumbnails as mentioned above

Now looking to replace the zoom thing with a lightbox. All good fun.

 
Magento Community Magento Community
Magento Community
Magento Community
 
flowstack
Sr. Member
 
Avatar
Total Posts:  159
Joined:  2008-01-30
London, United Kingdom
 

This might be one reason for including width and height tags:
http://www.dailyblogtips.com/speed-up-your-site-use-the-height-and-width-tags/

I hear you with lightbox. Think I shall add it too, as I’m not entirely convinced by the zoom.

The only things I don’t like about lightbox are the inability to save images (customers might want to do this), and the fact that you can’t do anything else once it is opened. For example, a customer may want to open two images at once in order to compare them.

I don’t think there is an ideal solution. Lightbox does have the ‘wow’ factor though so it’s horses for courses.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Spek
Sr. Member
 
Total Posts:  77
Joined:  2007-11-28
 

Yes width and height attributes within image tags should be set to speed up page rendering, especially when you have lots of pictures (like a product list) this will make a difference speedwise.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Mageho
Sr. Member
 
Avatar
Total Posts:  291
Joined:  2008-03-24
France, Paris
 

In order to resolve image proportion, replace this old method with this new :
in lib/Varien/Image/Adapter/Gd2.php :

public function resize($dstWidth=null$dstHeight=null)
    
{
        
if( !isset($dstWidth) && !isset($dstHeight) ) {
            
throw new Exception("Invalid image dimensions.");
        
}

        
if( !isset($dstWidth) ) {
            $width2height 
$this->_imageSrcWidth $this->_imageSrcHeight;
            
$dstWidth round($dstHeight $width2height);
        
elseif( !isset($dstHeight) ) {
            $height2width 
$this->_imageSrcHeight $this->_imageSrcWidth;
            
$dstHeight round($dstWidth $height2width);
        
}

/*
        if( $this->keepProportion() ) {
            if ($this->_imageSrcWidth / $this->_imageSrcHeight >= $dstWidth / $dstHeight) {
                $width = $dstWidth;
                $xOffset = 0;

                $height = round(($width / $this->_imageSrcWidth) * $this->_imageSrcHeight);
                $yOffset = round(($dstHeight - $height) / 2);
            } else {
                $height = $dstHeight;
                $yOffset = 0;

                $width = round(($height / $this->_imageSrcHeight) * $this->_imageSrcWidth);
                $xOffset = round(($dstWidth - $width) / 2);
            }
        } else {
            $xOffset = 0;
            $yOffset = 0;
            $width = $dstWidth;
            $height = $dstHeight;
        }
*/

        
if ($this->_imageSrcWidth $this->_imageSrcHeight >= $dstWidth $dstHeight{
          $width 
$dstWidth;
          
$height round($this->_imageSrcHeight $width $this->_imageSrcWidth);
          
          
$yOffset round(($dstHeight $height) / 2);
          
$xOffset 0;
        
else {
          $height 
$dstHeight;
          
$width round($this->_imageSrcWidth $height $this->_imageSrcHeight);
        
          
$yOffset 0;
          
$xOffset round(($dstWidth $width) / 2);
        
}

        $imageNewHandler 
imagecreatetruecolor($dstWidth$dstHeight);
        
        if( !
$this->keepProportion() ) {
          $bgcolour 
imagecolorallocate($imageNewHandler255255255); // white background
          
imagefill($imageNewHandler00$bgcolour);

          
$width round($this->_imageSrcWidth $height $this->_imageSrcHeight);

          if (
$width $dstWidth{
            $xOffset 
floor(($dstWidth $width) / 2);
          
}
        }

        
if ($this->_fileType == IMAGETYPE_PNG{
            $this
->_saveAlpha($imageNewHandler);
        
}

        imagecopyresampled
($imageNewHandler$this->_imageHandler$xOffset$yOffset00$width$height$this->_imageSrcWidth$this->_imageSrcHeight);

        
$this->_imageHandler $imageNewHandler;

        
$this->refreshImageDimensions();
    
}
Respect orginal dimensions and constraint width or height.
Hard for me to translate properly in english (shame on me) but you will understand after some test.

Cheers,
Ilan

 
Magento Community Magento Community
Magento Community
Magento Community
 
dan_w
Sr. Member
 
Total Posts:  290
Joined:  2008-01-04
 

IIan,
I don’t care if you’re speaking alien, your code works beautifully. I thank you and my boss thanks you.

Cheers,
Dan

 
Magento Community Magento Community
Magento Community
Magento Community
 
iDave
Member
 
Total Posts:  33
Joined:  2008-03-10
 

Could someone post the modified file here, something went wrong here..

 
Magento Community Magento Community
Magento Community
Magento Community
 
laurent
Member
 
Total Posts:  75
Joined:  2007-08-31
Paris, France
 
ryu007 - 07 April 2008 11:04 AM

In order to resolve image proportion, replace this old method with this new :
in lib/Varien/Image/Adapter/Gd2.php :

Thanks, works perfectly.

The new file is attached.

---
Laurent

File Attachments
Gd2.php  (File Size: 14KB - Downloads: 1278)
 
Magento Community Magento Community
Magento Community
Magento Community
 
PCGamesPlus
Sr. Member
 
Avatar
Total Posts:  166
Joined:  2008-01-03
Sacramento, CA
 

I used the file for fixing the image proportioning problem. Now I was wondering if there is a way for the ZOOM to use the Height of the picture rather than the Width? Because without the filler I was adding to square up the pictures for proper display I have to move the image up or down in the ZOOM window to see all of it. Thanks.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mr_dimsum
Member
 
Avatar
Total Posts:  35
Joined:  2008-01-28
 
4Alarm Games - 17 April 2008 03:45 PM

I used the file for fixing the image proportioning problem. Now I was wondering if there is a way for the ZOOM to use the Height of the picture rather than the Width? Because without the filler I was adding to square up the pictures for proper display I have to move the image up or down in the ZOOM window to see all of it. Thanks.

Better yet, why not make it ZOOM taking account both the height and the width so that it is centered.

Another issue I have found is that, when you have an image that has a larger width than height, Magento does not scale upwards so that the image encompasses the entire box. While that’s fine, what it should do is, to the least, auto-center itself rather than being dropped downwards as if there was gravity on the thing!

No biggy really, as my store is small enough to manage cropping the important pictures myself. But for larger stores, I can imagine this posing as an issue in the future.

 
Magento Community Magento Community
Magento Community
Magento Community
 
mike222
Member
 
Total Posts:  41
Joined:  2008-04-07
Austria
 

For the ZOOM issue:

edit js/varien/product.js.

instead of

this.floorZoom = 1;

insert

if (this.imageDim.width < this.imageDim.height) {
this.floorZoom = this.imageDim.width / this.imageDim.height;
} else {
this.floorZoom = 1;
}

It is not centered though - that must be done in the function zoom() - but portrait images will be scaled correctly.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Andrew Smith
Jr. Member
 
Avatar
Total Posts:  22
Joined:  2008-02-19
Cape Town, South Africa
 

I’m wondering if it’s a good idea to modify the lib/Varien/Image/Adapter/Gd2.php script directly? If you start tweaking the core code, your changes will get lost the next time you upgrade, or else you’ll have to have a good memory and redo and re-test the changes after every upgrade.

Is there a guide somewhere on how to safely modify Magento code without affecting the core? In the same way you can create your own custom themes from a design point of view. I know you can write modules, but these are add-ons rather than hook-ins. I haven’t read much on how to customise the underlying code, or even how to make contributions back to the core code (seeing as this is an open source system after all). Any ideas on what to read first?

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
    Back to top
Page 1 of 4