Category Images Issue.

[soni991]

When i create an Category and add picture to it in default theme of prestashop 1.6 there is weird white background, why don't that crop to the size of the image and fall on top of the blackish background.

This issue had almost wasted my day. seek for help 

http://www.sonishop.com

Soni

 

 

 

WebRep

 

currentVote

 

 

noRating

noWeight

 

 

 

 

 

 

 

 

 

 

 

 

[vekia]

your website is under maintenance mode, i can't check it.

can you temporary disable it?

[soni991]

your website is under maintenance mode, i can't check it.

can you temporary disable it?

sorry, it is now available online the problem still there. please let me know if there is any help i can get on this. there are other post with similar issue hope this tread can solve all those query related to category image background.

[Guest]

It is not a bug, it is the design. I have a workaround as shown on this thread

 

http://www.prestashop.com/forums/topic/310422-bug-catergory-text-overlays-category-picture/?p=1616188

[soni991]

It is not a bug, it is the design. I have a workaround as shown on this thread

 

http://www.prestashop.com/forums/topic/310422-bug-catergory-text-overlays-category-picture/?p=1616188

The Design is related to the left column of the prestashop. if you disable the left column then the category picture would mess around. i think the category image should be conditioned to the left column enable and disable option.

[dioniz]

Problem is in fact that category image is not an image but background-image and therefore it can't be stretched. But you can always make image wider and make it some background color or gradient maybe. Hope this makes sense

[soni991]

At last i thought of removing the sub category Images  as it was to tedious job to add picture for each subcategory or else it was showing no image on the subcategory section of my pages in sonishop.com

 

So i though of disabling the code in category.tpl responsible for <div> image and src file which reflects the image to those div.

 

so i went into the category.tpl and commented out the section with "{* ..........  *}" ..... are just ref for code in between do not use "...."

 

in my case the line i edited was 81 where something similar was mentioned " <div class="subcategory-image"> ......"

 

So i added " {* <div class="subcategory-image"> .... all the way to line 89 where the div ends "</div> " changed to "</div> *}"

 

By doing so all code in between these were commented out. maybe online server code editor won't show comment out of code but it would work. 

 

Now as u can check on my site the images don't show in the list of Subcategory only shows the name.

 

Hope this help someone who want to do this way .

 

Regards,

 

Soni

 

 

Yeah also need change the CSS of the Subcategory unless the list of subcategory name would be wide apart from each other in terms of height, so go to css folder there category.css file is there need edit the existing cssfile :-

 

#subcategories ul li {

      float: left;

      width: 128px;

      margin: 0 0 13px 20px;

      text-align: center;

      height: 202px; }

 

to 

 

#subcategories ul li {

      float: left;

      width: 128px;

      margin: 0 0 13px 20px;

      text-align: center;

      height: 50px; }

 

i changed the height as per my requirement in your case u can try same or other figure.

 

 

Edited April 14, 2014 by soni991 (see edit history)