Magento

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

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

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.

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:

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

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

Hope that helps.

Ed

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?

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.

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.

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.

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

Cheers,
Ilan

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

Cheers,
Dan

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

ryu007 - 07 April 2008 12:04 PM

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

Gd2.php  (File Size: 14KB - Downloads: 297)

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.

4Alarm Games - 17 April 2008 04: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.

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.

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?