0

I'm trying to show square product images on the product list pages, where images for hundreds of products range in dimensions.

When I use this adaptive resize

<img id="product-collection-image-<?php echo $_product->getId();" 
src="<?php echo $this
->helper('catalog/image')
->init($_product, 'small_image')
->constrainOnly(FALSE)
->keepAspectRatio(TRUE)
->keepFrame(FALSE)
->adaptiveResize(300,300); ?>" width="300" height="300"

it shows squares but the image quality is bad. When I set constrainOnly(TRUE), the quality is good, but the squares have some black in them to fill the rest of the square that the image doesn't fill.

How can I get as high as possible image resolution whilst also squaring the images (ideally showing the centre of the image)? Is there any alternative method?

(I tried this adaptive resize too)

Update

I accepted the solution below however I was still left with bad resolution on images. Because I am working with images of different dimensions, some landscape, some portrait, the best solution for me was to manually crop the images into squares (in gimp, change the relative scale so the smallest side is equal to the size of the image I need whilst retaining aspect ratio, then change canvas size). All the solutions I've seen don't work well on images like these.

2

1 Answer 1

1

You can just use resize(width, height) with constrainOnly(TRUE).

Try this:

<img id="product-collection-image-<?php echo $_product->getId();?>" 
src="<?php echo $this
->helper('catalog/image')
->init($_product, 'small_image')
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepFrame(FALSE)
->resize(300,300); ?>" width="300" height="300"/>

Reference: link.

Hope this helps.

3
  • When I use this the images are not squared.
    – MW Millar
    Jun 8, 2015 at 10:21
  • It should work, I have tested it. Please check each line thoroughly. Jun 8, 2015 at 10:37
  • thanks, I found that I was using some css to set width:100% and height:auto. So now I have squares, but the resolution is still not ideal. Thanks for your answer.
    – MW Millar
    Jun 8, 2015 at 11:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.