Jump to content

Category Image Situation


Recommended Posts

Hi there, i noticed recently when associating an image with a categoy, later on when displaying a category the default bootstrap template displays the image resized and centred on a 870px × 217px white image, making the category description undreadble? its a big ask but, is there any way to stop prestashop from doing this resize operation?

 

My problem is i already have hundreds of images, that now when viewing a category display as a vastly white background with light grey text over the top.

 

Im just tryin to get out of remaking hundreds of category images to suit this kinda strange behavior!!

 

So i discovered this when i made a 2 second adjustment to the default themes template files, i just split the description into 2 divs, removed the background css declaraton from the parent and set it to be a responsive image in the 1st split of the divs i added, which only took, 30 seconds, solved my issue instantly, but, now the cat images a 1cm x 1cm square *sigh* can anyone assist?

 

hmCUD2a.jpg

Edited by ibanez0r (see edit history)
Link to comment
Share on other sites

You can try to edit category.tpl, part where category image is set as background of div element.

And in css there is part where it use background-size:cover so that image is responsive and fill whole div.

 

Issue with lot of white on image is effect of your original image size that does not match 870px × 217px

so Prestashop resize image and fills rest with white color.

 

What you can try is to edit category.tpl use regular img element and then in Preferences > Images set new size

for category image, one that match your original size and then regenerate that category image type only. 

Link to comment
Share on other sites

  On 10/15/2014 at 11:04 AM, razaro said:

You can try to edit category.tpl, part where category image is set as background of div element.

And in css there is part where it use background-size:cover so that image is responsive and fill whole div.

 

Issue with lot of white on image is effect of your original image size that does not match 870px × 217px

so Prestashop resize image and fills rest with white color.

 

What you can try is to edit category.tpl use regular img element and then in Preferences > Images set new size

for category image, one that match your original size and then regenerate that category image type only. 

 

Hi there, well thats whats strange, the original image is 72px x 96px!!! prestashop seems to be resizing the image! to really weird colors and dimensions, i already edited the cat tpl, see below. (this would now be working if prestashop wasnt doing this funky resize bizo on my cat images!  because i set width:100%;height:auto on the img element this is the result :/ I dont understand why you would resize the image to fill the space when it can be done with css or just with css placement.  It seems like you have a page of code, to do what 1 line of css could of done, and now its a major inconvienance for most ppl who will have to remake category images to specific sizes and colors to match the styling of the theme.

 

Ultimately i just wish to disable this resizing of category images function.  Is it possible to change the smarty tag to point to the category image that is displayed in the category admin, which isnt resized to those strange dimension? do u kno?

 

I mean afterall, a theme... *should* repsond to the data, like view to a controler, the data shouldnt be manipulated to suit the view, its terrible idea, PLEASE remove!!!!!  You got to remember, where large operations are concerned, migration is ONLY JUST doable, remaking, makes it not possible.

 

kGVaFlc.jpg

Edited by ibanez0r (see edit history)
Link to comment
Share on other sites

Well you could change this code in category.tpl 

                    <!-- Category image -->
                    <div class="content_scene_cat_bg"{if $category->id_image} style="background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) 0 top no-repeat; background-size:contain; min-height:{$categorySize.height}px;"{/if}>
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">

to, not tested

                    <!-- Category image -->
                    <div>
                        {if $category->id_image}
                        <div class="cat_image_org">
                            <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, '')|escape:'html':'UTF-8'})" alt="{$category->name|escape:'html':'UTF-8'}">
                        </div>
                        {/if}
                        {if $category->description}
                            <div class="cat_desc">
                            <span class="category-name">

Notice I left out category image type s it should get original image. If that does not work try to delete ,'' from get catlink.

 

And add styles to that image way you want.

Edited by razaro (see edit history)
Link to comment
Share on other sites

Thanks m8, ill give it a try and let you know how i go! :ph34r:

 

Ive been so busy migrating products i havnt had a chance to go back and man handle this code, as i sat here, adding products it occured to me i could chop the image up so to speak using css in a similar way that sprites are handled for instance, it would be a bit of  a guess as to where to start collecting the image from position wise but it could work i think, in theory too. for instance:

 

#new-cat-image {
    width: 75px;
    height: 100px;

    background:url({$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category_default')|escape:'html':'UTF-8'}) XPOS YPOS;
}

 

I think its the only way to accomodate for terrible programming ideas like that, i mean lets face it, no matter what theme you use, this will always now present an issue. I srsly hope they change it soon.  I cant remake 35,000 category images, not now not ever!

Edited by ibanez0r (see edit history)
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...