[SOLVED] Align category image to the right

[gunneman]

Hi all,

 

Is it possible to align the category image to the right?

I will explain my problem: I can make an image of 860x217 and it will show correctly as the category image. But it won't show nice as a subcategory image, because it will be too long. Also I can't change the dimensions of the medium_default image, because it is used by products as well.

 

I thought the easiest way, would be to align the image to the right, but I'm not sure where I can do this and how, I attached a screenshot for further explanations.

 

and

 

If someone could help me I would be very gratefull.

 

With kind regards,

Jeroen

Edited April 24, 2014 by vekia (see edit history)

[vekia]

try to use this code somewhere in your global.css or category.css

  
  .content_scene_cat_bg {
	  background-position:right!important; 
  }

also, can you share url to your shop?

[kelbel3abh]

Ooh, that is a good idea.  I am going to try that.  I have also been having problems with the category image size being the same for the thumbnail and for the category header.  It would be nice to have an option for using 2 images rather than the same one.

[gunneman]

Thank you for the very fast reply. I will try this tommorrow. Right now it's 1 o'clock in the morning in Holland and I'm calling it a day. The URL is www.gunnie.nl/paintball

 

I will post if it has worked or not.

[vekia]

and remember to change also dimensions of the image

now it's a wide picture:

http://www.gunnie.nl/paintball/c/14-category_default/dye-precision.jpg

 

without change, you will not see effects.

[gunneman]

I just had to try it before i went to bed. At first it didn't work, but then I saw your post about changing the dimensions. I really should learn to think things through and not make haste.
 
Now as for the solution, with big thanks to Vekia!

 

I added a piece of code to the category.css. Which is located in root/yourtheme/css/

 

original:

  .content_scene_cat .content_scene_cat_bg {
    padding: 18px 10px 10px 42px;
    background-color: #ffffff !important;

modification:

  .content_scene_cat .content_scene_cat_bg {
    padding: 18px 10px 10px 42px;
    background-color: #ffffff !important;
    background-position: right !important; }

And last but not least, change the dimensions of the "category_default" image, which is located in your Admin Back Office under Settings -> Images. Now change the dimension to 217x217.

 

Result:

 

Again, thank you for you help Vekia. I can go to bed with my mind at peace now

[vekia]

thank you for detailed explanation what you did

so, we have got working solution

 

i marked this thread title as [solved]

with regards,

Milos

[kelbel3abh]

One thing I am seeing, though, is the subcategory images are now displaying funny on his other subcategory thumbnails.   Is there a way to make it work for both places? I have also run into a similar issue. http://www.gunnie.nl/paintball/9-paintballs

[gunneman]

One thing I am seeing, though, is the subcategory images are now displaying funny on his other subcategory thumbnails.   Is there a way to make it work for both places? I have also run into a similar issue. http://www.gunnie.nl/paintball/9-paintballs

That is just because those category images are still 860x217. If you look at http://www.gunnie.nl/paintball/13-maskers You will see that the category images are correct. Size is 217x217. I just haven't changed the category images of "Paintballs" yet.

[vekia]

so why not to change category image sizes, and regenerate thumbnails under preferences > images tab in back office?

[gunneman]

I just wanted to make a quick test yesterday. Today I will change the rest of the category images but the most important part is that it works.

[kelbel3abh]

I think I see what you mean now.  You will need to upload new images in the 217x217 size or just regenerate all the thumbnails.  At that point, all the subcategories will also have the 217x217 size.  I got it.  It is basically a work around in order to use the same image in 2 places that will still look good, which is what I would like as well.  RIght now, if I use the wide image, it looks good as the category header, but strange as the thumbnail and visa versa. Thanks to you both, guys!  I will try it out further tomorrow.

[roz]

but what if i need the main category's banner in full width?

then sub categories without the banner. is this possible? 

[vekia]

it is but only with modification of category.tpl file

it's necessary to include if condition there:

{if $category->level_depth>1}
code to display image and desc here
{/if}

modification:

{if $category->level_depth>1}
<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">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                     
                     </div>
{/if}

[roz]

 

it is but only with modification of category.tpl file

it's necessary to include if condition there:

{if $category->level_depth>1}
code to display image and desc here
{/if}

modification:

{if $category->level_depth>1}
<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">
                                {strip}
                                    {$category->name|escape:'html':'UTF-8'}
                                    {if isset($categoryNameComplement)}
                                        {$categoryNameComplement|escape:'html':'UTF-8'}
                                    {/if}
                                {/strip}
                            </span>
                            {if Tools::strlen($category->description) > 350}
                                <div id="category_description_short" class="rte">{$description_short}</div>
                                <div id="category_description_full" class="unvisible rte">{$category->description}</div>
                                <a href="{$link->getCategoryLink($category->id_category, $category->link_rewrite)|escape:'html':'UTF-8'}" class="lnk_more">{l s='More'}</a>
                            {else}
                                <div class="rte">{$category->description}</div>
                            {/if}
                            </div>
                        {/if}
                     
                     </div>
{/if}

 

hi vekia! thank you. this should work. however, i'm just afraid that i already mixed up the correct settings in my Images preferences when trying to make it work this way. can you check this for me?   because it's not working. it still shows the thumbnails in the sub-categories

thanks!

[roz]

up 

[vekia]

try to increase "level-depth" value in if condition

[roz]

try to increase "level-depth" value in if condition

 

thanks Vekia! i have increased it and it's all not showing anymore. however, my main category banner is also gone 

i want to remain the main category's banner. is this possible? thanks Vekia 

[sjaakie]

this was a great help, now my website looks great again!

 

https://www.kloonduino.nl/nl/23/sensors

[roz]

try to increase "level-depth" value in if condition

 

thanks Vekia! i have increased it and it's all not showing anymore. however, my main category banner is also gone  

i want to remain the main category's banner. is this possible? thanks Vekia  

[bburrer77]

I just had to try it before i went to bed. At first it didn't work, but then I saw your post about changing the dimensions. I really should learn to think things through and not make haste.

 

Now as for the solution, with big thanks to Vekia!

 

I added a piece of code to the category.css. Which is located in root/yourtheme/css/

 

original:

  .content_scene_cat .content_scene_cat_bg {
    padding: 18px 10px 10px 42px;
    background-color: #ffffff !important;

modification:

  .content_scene_cat .content_scene_cat_bg {
    padding: 18px 10px 10px 42px;
    background-color: #ffffff !important;
    background-position: right !important; }

And last but not least, change the dimensions of the "category_default" image, which is located in your Admin Back Office under Settings -> Images. Now change the dimension to 217x217.

 

Result: solution.jpg

 

Again, thank you for you help Vekia. I can go to bed with my mind at peace now

I have applied this change, and it does not switch my picture over to the right..

It actually moves it to the left..

Does anyone have a fix for this.

 

Website is www.e-cigshoppe.com

[bburrer77]

please,,, anyone!

 

 I need to find a solution......

[bburrer77]

Anyone?

[dioniz]

I don't see any category image. Where do you have it?

[fadedsuede]

BBURRER77 - 

I'm having the same issue as you are. In the previous version of PS, the solution offered by Gunneman worked, but that solution doesn't work in the latest version of PS 1.6.0.8  - it does absolutely nothing at all.

 

I know the Prestashop teams doesnt consider this change in text and image alignment a "bug", but from what I read, 90% or more of long term PS users do. We should at least be able to hit the return bar a couple times to insert category descriptions lower - even if we toyed with the HTML using the </> key and entered <BR> <BR> a couple times.!.!

[Mister Denial]

I have the same issue, works fine in 1.6.0.6 but after the update to 0.8 it does not work anymore.

 

I believe the problem is that Prestashop has added this line of code "min-height: 870px;" somewhere, I can see it in Firebug, but I have no idea in which file it is, so I can remove it.

[fadedsuede]

Seriously, I think this mess with images and category descriptions was done intentionally so that future PS users would be inclined to purchase a custom module......

[Mister Denial]

Seriously, I think this mess with images and category descriptions was done intentionally so that future PS users would be inclined to purchase a custom module......

 

I have wondered about that too... why make a square subcategory image, but a landscape on-category image - it's not logical.

[fadedsuede]

This topic is NOT solved and each time I try to start a new thread it gets deleted.....

[vekia]

hello

i checked your posts history and i don't see there hidden posts 

[Scott J]

Mmm...

Yes, but ps, in its own magical mystical way, adds a "min-height: 870px" to div class "content_scene_cat_bg". 

I'm searching, but cannot see what template that is coming from... 

[vekia]

Mmm...

Yes, but ps, in its own magical mystical way, adds a "min-height: 870px" to div class "content_scene_cat_bg". 

I'm searching, but cannot see what template that is coming from... 

 

it's a part of category.tpl file

there is a code like:

 

<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}>

there is min-height definition

min-height:{$categorySize.height}px;"{/if}

[Peter C]

Well this look Promising .. or maybe not..   could be another night of wasteful hopes

Following post so I can get here again soon.

[xgarb]

function resizeCatimg()
{
	var div = $('.cat_desc').parent('div');
	var image = new Image;
	$(image).load(function(){
	    var width  = image.width;
	    var height = image.height;
		var ratio = parseFloat(height / width);
		var calc = Math.round(ratio * parseInt(div.outerWidth(false)));
		div.css('min-height', calc);
	});
	if (div.length)
		image.src = div.css('background-image').replace(/url\("?|"?\)$/ig, '');
}

 

in global.js is possibly causing your problems. It's 'helpfully' resizing the image and injecting the style for the background min-height into the HTML and over-writing your manually added min-height.

Edited July 18, 2014 by xgarb (see edit history)

[Peter C]

meh, for me it's all scrambled.. a bit of code here, then change some more there..  after a night tying what I could make sense of, absolutely nothing has been gained except for another headache.

 

Thanks a lot PrestaShop!

[Mister Denial]

I also noticed something else: if you don't use a category image at all (because of the previously mentioned frustration we all know), it will cause a file not found error on your page. Apparently a javascript (probably for the responsive function) still calls the category image, even though you didn't upload any).

 

Has anyone else noticed that?

[vekia]

I also noticed something else: if you don't use a category image at all (because of the previously mentioned frustration we all know), it will cause a file not found error on your page. Apparently a javascript (probably for the responsive function) still calls the category image, even though you didn't upload any).

 

Has anyone else noticed that?

 

any link to page where the problem appears? (for test purposes) ?

[Mister Denial]

any link to page where the problem appears? (for test purposes) ?

 

Hi Vekia,

 

yes, here's the link: http://www.the-black-angel.com/4-gothic-clothing-women

 

As you can see on this Pingdom FPT test, there are two instances of "none", the latter creating a considerable page load delay. I found the cause to be the missing category image.

 

I used the Chrome console to find out more, and to me it looks like it's a javascript causing the problem, probably the responsive function. But I am no real tech guy, just a merchant with some learning-by-doing background, so I might be off here.

Edited August 4, 2014 by Mister Denial (see edit history)

[Mister Denial]

@ Vekia: apparently the problem comes from global.js at line 361 - the javascript tries to resize a non-existent image. There is non condition / check to see if an image is in use or not.

[Mister Denial]

There now is a fix on Github for this bug: https://github.com/PrestaShop/PrestaShop/commit/f627f6e0fd27b2d25baf791f82cdc4e5fbb84a5d

[BoKr]

I was struggling with all this, too. So I decidec to rewrite my castegory.tpl in a way to transplant the image from the 'descripton container' to a new one floating right of it. Ok, works But I have created in this way some issues with responsive design. I might cure it via CSS but I am missing time and am no specialist.

So, I wonder after reading about the easy change Vekia mentioned above ( to postion the image to the right end of the container) and all the now deriving small issues with sub-categories and the need of a new image dimension....

why not add a new image dimension in BO? eg: desc_img_right_default with 233x233 or what ever pixel dimension?

 

All what needed be done extra to Vekia's CSS line would be to make a small edit in the category.tpl:

 

'category_default' ---> 'descimgright_default'

                                   &

categorySize.height ---> descimgright.Size.height ?!

 

This definition you find in the following code lines, too. Open your category.tpl and you will see.

 

In a nutshell, I did not try this but I might work. Perhaps some expert can test or comment on it.

 

 

it's a part of category.tpl file

there is a code like:
 

<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}>

there is min-height definition

min-height:{$categorySize.height}px;"{/if}

[sreenivas]

There now is a fix on Github for this bug: https://github.com/PrestaShop/PrestaShop/commit/f627f6e0fd27b2d25baf791f82cdc4e5fbb84a5d

 

Thanks Mr. Mister Denial