cancel
Showing results for 
Search instead for 
Did you mean: 

Category image size

SOLVED

Category image size

It seems that magento is upsizing the images on the category page.  I need to be able to keep them a lot smaller, but if I upload say a 100 x 100 image, Magento upsizes it to 1800 or something and it looks like crap.

 

Suggestions on how to fix this?

 

theme is RWD

2 ACCEPTED SOLUTIONS

Accepted Solutions

Re: Category image size

I get it. That file is located at app/design/[package]/[theme]/catalog/category/view.phtml. But setting a width to the element is not recommended. I took a look at a clean Magento installation and I think your issue is in your stylesheet. It has these lines:

 

.category-image img {
    width: 100%;
    max-width: 100%;
}

The width: 100% makes your image fill the entire width, even if the image is smaller. If you change this to width: auto; it should use the width of the original image as the max-width, or the width of the container if that's smaller.

 

Hope this works.

If this response was helpful to you, consider giving kudos to this post.
If this response solved your problem, click accept as solution to help others solve this

View solution in original post

Re: Category image size

Finally got back to this and that did the trick.  Thanks

 

 

View solution in original post

7 REPLIES 7

Re: Category image size

You can always change the size of the images in the template files. But the idea behind the larger images is that they also look good on retina screens and hi-def screens. On a retina screen you will need a 200x200 image to make it "retina-proof" for a size of 100x100.

If this response was helpful to you, consider giving kudos to this post.
If this response solved your problem, click accept as solution to help others solve this

Re: Category image size

Upsizing the images also degrades the quality.  

 

So can you point me to where I need to go to change the files?

 

Re: Category image size

The images are in several template files. So it depends on the page you want the images to be resized. For the product overview page it would be app/design/frontend/[yourpackage]/[yourtheme]/catalog/product/list.phtml and for a product detail page it would be app/design/frontend/[youtpackage]/[yourtheme]/catalog/product/view/media.phtml.

If this response was helpful to you, consider giving kudos to this post.
If this response solved your problem, click accept as solution to help others solve this

Re: Category image size

I'm specifically talking about the CATEGORY IMAGE, not the products. 

 

Am I making sense?

 

Re: Category image size

Let me put it this way.

 

There is an image that you can display oin the CATEGORY PAGE - IE: NOT a PRODUCT IMAGE, but sort of a banner image on the CATEGORY page.  That's the image I'm talking about.

 

Re: Category image size

I get it. That file is located at app/design/[package]/[theme]/catalog/category/view.phtml. But setting a width to the element is not recommended. I took a look at a clean Magento installation and I think your issue is in your stylesheet. It has these lines:

 

.category-image img {
    width: 100%;
    max-width: 100%;
}

The width: 100% makes your image fill the entire width, even if the image is smaller. If you change this to width: auto; it should use the width of the original image as the max-width, or the width of the container if that's smaller.

 

Hope this works.

If this response was helpful to you, consider giving kudos to this post.
If this response solved your problem, click accept as solution to help others solve this

Re: Category image size

Finally got back to this and that did the trick.  Thanks