Image Size In Default Categories

[acking12]

Does anyone know what I can size my pictures for the category default image ?

 

I know the layout its 500X150 but I cannot find the correct size to crop and/or resize my category image so they do not look distorted, I have tried everything in image mapping and under category images

 

My product pics are great , just all the category images are terrible.

 

I posted my link below

 

http://www.bellasbibs.com/7--girls-dress

 

Here is a screen shot of my settings on my image sizes so if anyone has any suggestion that need to be made ??

[PascalVG]

I'd expect your category pictures should be the same size as the layout setting (you will see if you use firefox, right click on the picture and choose inspect , that the full 500x150 image pace holder is shown)

So make your pictures 500x150 as chosen.

 

If you want your pictures 200x100 or so, change the layout setting, and make all pictures 200x100.

If you don't make the pictures the exact size, Prestashop will scale the picture down, keeping the width x height ratio intact (as far as I know), so it checks which one will fit and scales down the other one with the same %.

 

If you have pics that aren't all he same size. Maybe use any paint program. Make a white/transparent canvas of 500*150 (or any size you want that fits any of your pics)) and insert the picture on top of this empty pic. move (and maybe stretch it, skew it, anything you like to make it beautiful) it where you want it aligned and save it. Use his image for your category.

 

If I missed something in your question that makes this answer rubbish, please elaborate a little :-)

 

My 2 cents,

pascal.

Edited February 15, 2013 by PascalVG (see edit history)

[Peter Zarian]

Hi,

My question is related to this thema...

I have image size 500x150 px as the size for category_default in "images/settings" but

1. the image is not centered in frame - it allways more to the left size. I tried different ways to solve it but unsuccesfully.

2. there is the white frame border because image shrink a little bit.

 

How to senter image in the frame and remove the frame border?

 

Please check this link as example.

http://aport.se/en/5-tillbehor

[PascalVG]

To center the image:

 

add to themes/<your theme folder>/css/global.css:

 

.align_center { text-align: center;}

 

to remove the white space:

 

#categoryImage {

    width: 100%;

    height: 100%;         (or   height: auto;    if you want the ratio to stay as the original)

}

 

 

and find the css code below (maybe inglobal.css, or product-list.css or so. You can optimization/compression on, so I can't see where exactly)

 

.content_scene_cat {

   padding: 0px;              <-- change to 0px

   border: 1px solid #ccc;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

   border-radius: 3px;

  -moz-box-shadow: 0 1px 1px #e2e2e2;

  -webkit-box-shadow: 0 1px 1px #e2e2e2;

   box-shadow: 0 1px 1px #e2e2e2;

}

 

 

This should remove the white box around the image (when using height: auto;    there may be a little bit white at the bottom)

 

Hope this helps,

 

pascal

[Peter Zarian]

 

To center the image:

 

add to themes/<your theme folder>/css/global.css:

 

.align_center { text-align: center;}

 

to remove the white space:

 

#categoryImage {

    width: 100%;

    height: 100%;         (or   height: auto;    if you want the ratio to stay as the original)

}

 

 

and find the css code below (maybe inglobal.css, or product-list.css or so. You can optimization/compression on, so I can't see where exactly)

 

.content_scene_cat {

   padding: 0px;              <-- change to 0px

   border: 1px solid #ccc;

  -moz-border-radius: 3px;

  -webkit-border-radius: 3px;

   border-radius: 3px;

  -moz-box-shadow: 0 1px 1px #e2e2e2;

  -webkit-box-shadow: 0 1px 1px #e2e2e2;

   box-shadow: 0 1px 1px #e2e2e2;

}

 

 

This should remove the white box around the image (when using height: auto;    there may be a little bit white at the bottom)

 

Hope this helps,

 

pascal

 

Pascal, thank you for your answer/time and I'm very sorry that I couldn't answer before - my wrong! I tried to follow your instuction but where exactly these scripts have to be? Can you specify same text as reference point? I'm not so good with css files yet, sorry.

 

Best regards, Peter

[PascalVG]

Hi Peter,

.align_center { text-align: center;}

to remove the white space:

#categoryImage {
    width: 100%;
    height: 100%;         (or   height: auto;    if you want the ratio to stay as the original)
}

You can probably just add to the themes/<your theme folder>/css/global.css file, at the very end.

 

This code:

.content_scene_cat {

   padding: 0px;              <-- change to 0px
   border: 1px solid #ccc;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
   border-radius: 3px;
  -moz-box-shadow: 0 1px 1px #e2e2e2;
  -webkit-box-shadow: 0 1px 1px #e2e2e2;
   box-shadow: 0 1px 1px #e2e2e2;
}

You have to find in the same global.css file (Search with Ctrl-F: .content_scene_cat , you may find it then) or in the file product-list.css (in the same folder as global.css).

 

If you can find it, please go to Advanced Parameters->Performance and turn OFF all the CCC optimizations (Set to : "Keep xxx as Original") and let me know, maybe I can find te correct file then.

 

pascal.

[Peter Zarian]

Thank you Pascal!

 

I can not find "content_scene_cat" in both files - global & product_list. Turned OFF CCC optimisation but cant see any changes.

[PascalVG]

.content_scene_cat {...} is in themes/your theme folder/css/category.css

 

So open this file, and search for .content_scene_cat (probably almost at the top)

and change the

 padding: 0px;

 

 

 

 

The other two changes:

.align_center { text-align: center;}

#categoryImage {
  width: 100%;
  height: 100%;
}

 

I see you tried to add to themes/theme_1/css/global.css already.

You wrote:

 

.align_center { text-align: center;}

to remove the white space:

#categoryImage {
width: 100%;
height: 100%; (or height: auto; if you want the ratio to stay as the original)
}

 

 

Please fix here:

 - Add the red point before align_center

 - Remove my comment (the blue, striked-through text)

 

That should do the trick.

 

pascal.