Jump to content

[SOLVED] Align category image to the right


gunneman
 Share

Recommended Posts

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.

 

post-789064-0-82597900-1398373445_thumb.jpg

and

post-789064-0-36922600-1398373447_thumb.jpg

 

If someone could help me I would be very gratefull.

 

With kind regards,

Jeroen

Edited by vekia (see edit history)

Share this post


Link to post
Share on other sites

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.

  • Like 3

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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: post-789064-0-16592100-1398382489_thumb.jpg

 

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

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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. :)

Share this post


Link to post
Share on other sites

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}
  • Like 3

Share this post


Link to post
Share on other sites

 

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 :)

4p299.jpg

thanks! :)

Share this post


Link to post
Share on other sites

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  :D

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

Share this post


Link to post
Share on other sites

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   :D

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

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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: attachicon.gifsolution.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

Share this post


Link to post
Share on other sites

  • 4 weeks later...

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.!.!

  • Like 1

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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.

  • Like 2

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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}

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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 by xgarb (see edit history)
  • Like 1

Share this post


Link to post
Share on other sites

  • 2 weeks later...

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?

Share this post


Link to post
Share on other sites

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) ?

Share this post


Link to post
Share on other sites

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 by Mister Denial (see edit history)

Share this post


Link to post
Share on other sites

  • 1 month later...

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}

Share this post


Link to post
Share on other sites

  • 2 months later...
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More