ibanez0r Posted October 15, 2014 Share Posted October 15, 2014 (edited) 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? Edited October 15, 2014 by ibanez0r (see edit history) Link to comment Share on other sites More sharing options...
razaro Posted October 15, 2014 Share Posted October 15, 2014 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 More sharing options...
ibanez0r Posted October 15, 2014 Author Share Posted October 15, 2014 (edited) 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. Edited October 15, 2014 by ibanez0r (see edit history) Link to comment Share on other sites More sharing options...
razaro Posted October 15, 2014 Share Posted October 15, 2014 (edited) 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 October 15, 2014 by razaro (see edit history) Link to comment Share on other sites More sharing options...
ibanez0r Posted October 15, 2014 Author Share Posted October 15, 2014 (edited) Thanks m8, ill give it a try and let you know how i go! 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 October 16, 2014 by ibanez0r (see edit history) Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now