Properly remove white image frame upon resizing photos in Magento

By: Branko Ajzele, Last updated: Aug 29, 2023 | Published: Mar 11, 2010
Properly remove white image frame upon resizing photos in Magento

Magento has pretty neat image helper you can use to output your product photos. Today one of my coworkers got frustrated with the white frame he kept getting around the resized image he tried to output in sidebar block. As s possible solution he tried resolving the issue with CSS. However, there is a better, more nicer solution to ditch the whit frame around resized images in Magento.

Here is a practical example of a code sample from default media.phtml file:

< ?php foreach ($this->getGalleryImages() as $_image): ?>
<ul>
 	<li><a title="< ?php echo $this->htmlEscape($_image->getLabel()) ?>" href="#"><img src="<?php echo $this-/>helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="< ?php echo $this->htmlEscape($_image->getLabel()) ?>" width="56" height="56" /></a></li>
</ul>
< ?php endforeach; ?>

Turning it into this will yield a “frame-free” image:

< ?php foreach ($this->getGalleryImages() as $_image): ?>
<ul>
 	<li><a title="< ?php echo $this->htmlEscape($_image->getLabel()) ?>" href="#"><img src="<?php echo $this-/>helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->keepFrame(false)->resize(56); ?>" alt="< ?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a></li>
</ul>
< ?php endforeach; ?>

As you can see, all it took was to add the keepFrame(false) method call prior to calling the resize() method.

Here are the results of before/after scenario.

Hope it helps around minor styling issues 🙂

Cheers.

Published in:
Leave a comment

You made it all the way down here so you must have enjoyed this post! You may also like:

How To Connect Google Analytics 4 To Magento 2 Bojan Mareljic
Bojan Mareljic, | 35

How To Connect Google Analytics 4 To Magento 2

Show product thumbnail in grids Petar Sambolek
Petar Sambolek, | 14

Show product thumbnail in grids

Adding product image lightbox effect using jQuery plugin (a better way) Srdjan Stojiljkovic
Srdjan Stojiljkovic, | 20

Adding product image lightbox effect using jQuery plugin (a better way)

28 comments

  2. Hi,
    I tried to change product image width and height but not working. i am using 1.9 version how can i increase the width and height please help me….

    Reply

  6. Hello Guys,

    I have used

    ->keepAspectRatio(false)->constrainOnly(false)->keepFrame(false)

    but its not working for me. I am using magento 1.7.0.2

    Does it also working with .jpg images?

    Please help me guys.

    Reply

  9. Hello,

    I’m using Magento 1.7.

    I removed the frame:

    ->keepAspectRatio(false)->constrainOnly(false)->keepFrame(false)->resize(300, 300)

    But now the image is stretched.

    Any Idea?

    Reply

  12. I use Magento Version 1.5.1.0 and this works but the thumbnails have different heights with your solution

    I used that to prevent it
    $_image->getFile())->keepAspectRatio(false)->constrainOnly(false)->keepFrame(false)->resize(50,59)

    now they are all the same size but aspect ratio is wrong. that does not hurt that much on thumbnails but
    how can I crop my images to keep the aspect ratio and have all the same size?

    I tried this but did not generate thumbnails with their settings
    http://2ammedia.co.uk/web-design/magento-adaptive-resize-resize-to-best-fit

    Reply

  15. OK, the image frame I’m referring to is actuall on the featured products block on home page. I noticed I do get them on the product details.

    Anyone?

    Reply

  17. Hi All,

    This is weird. I actually want a frame on mine and but I don’t see it. I just uploaded a product with an impage and all it shows is the product image and no line frame.

    I don’t this this as being configurable on the backend. Is there a code I need to look for on the css file? Please help.

    Reply

  18. Finaly got this working after making the changes to the media.phtml file, the border was still there. Edited the styles.css file of my tempate and set the border pixels to 0px instead of 2px and presto no image border or frame.

    Reply

  19. Hi, I am using Magento version 1.4, unfortunately this didn’t work for me 🙁 Any other suggestions?

    I did the above change in: /app/design/frontend/base/default/template/catalog/product/view/media.phtml

    Have also checked the CSS as mentioned above, but there is no padding in any of the classes. Also removed cached from magento and from browser and no change!

    Please help

    Reply

  20. I am in app/design/frontend/default/default/template/catalog/product/view/media.phtml

    and this is what i have, i dont see where i should make the change mentioned

    getProduct();
    $_helper = $this->helper(‘catalog/output’);
    ?>

    getImage() != ‘no_selection’ && $_product->getImage()): ?>

    <?php
    $_img = 'helper(‘catalog/image’)->init($_product, ‘image’).'” alt=”‘.$this->htmlEscape($this->getImageLabel()).'” title=”‘.$this->htmlEscape($this->getImageLabel()).'” />’;
    echo $_helper->productAttribute($_product, $_img, ‘image’)
    ?>

    __(‘Double click on above image to view full picture’) ?>

    <img id="zoom_out" src="getSkinUrl(‘images/slider_btn_zoom_out.gif’) ?>” alt=”__(‘Zoom Out’) ?>” class=”btn-zoom-out” />

    <img id="zoom_in" src="getSkinUrl(‘images/slider_btn_zoom_in.gif’) ?>” alt=”__(‘Zoom In’) ?>” class=”btn-zoom-in” />

    Event.observe(window, ‘load’, function() {
    product_zoom = new Product.Zoom(’image’, ‘track’, ‘handle’, ‘zoom_in’, ‘zoom_out’, ‘track_hint’);
    });

    <?php
    $_img = 'helper(‘catalog/image’)->init($_product, ‘image’)->resize(265).'” alt=”‘.$this->htmlEscape($_product->getImageLabel()).'” />’;
    echo $_helper->productAttribute($_product, $_img, ‘image’)
    ?>

    getGalleryImages()) > 0): ?>

    __(‘More Views’) ?>

    getGalleryImages() as $_image): ?>

    <a href="#" onclick="popWin(’getGalleryUrl($_image) ?>’, ‘gallery’, ‘width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes’); return false;”><img src="helper(‘catalog/image’)->init($this->getProduct(), ‘thumbnail’, $_image->getFile())->keepFrame(false)->resize(56); ?>” alt=”htmlEscape($_image->getLabel()) ?>” title=”htmlEscape($_image->getLabel()) ?>” />

    Reply

  21. Found the files but couldnt find the line that deals with the height;

    .product-view .product-img-box .more-views li { float:left; padding:1px; background-color:#ddd; margin:0 0 8px 4px ; }

    .product-view .product-img-box .more-views li { float:left; margin:0 21px 5px 0 ; }

    .product-view .product-img-box .more-views li a{ text-decoration:none !important;}

    Reply

  26. @Guilio Surrounding “a” or shall I say link tag has some CSS attached that adds additional padding to it. Remove the height from “.product-view .product-img-box .more-views li a” from styles.css on line 933 (at least this is so on default theme).

    Reply

  27. Thanks for the great tip?

    I found the file in this location: /app/design/frontend/default/default/template/catalog/product/view/media.phtml.

    Edited the file and uploaded it and refreshed my cache, but the images still have the white frame.

    Any ideas on what I can do?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.

Tell us about your project

Drop us a line. We'd love to know more about your project.