3

I'm having some troubles with product images in Magento.

I'm using Porto theme, in homepage I have a 4-featured-items grid (2x2). I want images to be 610x360px but I'm not able to do this. Instead I have images with white space.

Strange is, if I open the inspector and find the img url, open it in browser and I see that images have white border (added by Magento?). Can't figure it out.

I'm new in Magento, it is pretty urgent.

You can see the issue here: mobiroloshop.com (got same problem with all images in website)

6
  • Paste your template file code which is responsible for displaying your images
    – Nidheesh
    Nov 7, 2016 at 8:57
  • You mean theme/etc/view.xml? Nov 7, 2016 at 9:01
  • @Nidheesh You mean this? Nov 7, 2016 at 9:38
  • @GiuseppeCapoluongo, Everything is fine now right? Nov 11, 2016 at 12:40
  • @TejabhagavanKollepara, yeah just add a new <image (your id)> in etc/view.xml then edit you .phtml file giving the image that new id. Nov 23, 2016 at 7:10

2 Answers 2

3

In <vendor>/<theme>/etc/view.xml you should be able to adjust the settings of the image to remove the frame, like this:

<image id="category_page_grid" type="small_image">
    <width>610</width>
    <height>360</height>
    <frame>false</frame>
</image> 

However, there is an open issue where setting <frame> to false returns true. See this Github issue.

There is also a fix in the Github comments:

After creating a plugin to convert the string value to an integer (which properly casts to a boolean), the image frame is not added.

public function beforeSetKeepFrame($image, $keep)
{
    if (is_string($keep)) {
        $keep = (strtolower($keep) === 'true') ? 1 : 0;
    }
    return [$keep];
}
1
  • 1
    still adds a frame in 2.1.12
    – OZZIE
    Apr 6, 2018 at 9:29
1

Easiest fix is to figure out what the dimensions should be, if it gets whitespace above/below then the height is too much otherwise if it's to the left/right then it's too narrow so increase the width. In the already mentioned:

<image id="category_page_grid" type="small_image">
    <width>610</width>
    <height>360</height>
</image> 

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.