[partly solved] Subcategory images and text.

[BoKr]

When I am in a category with lots of subcategories then I want to see those small images giving a preview what the category is about. Crystal cleal. Visual communication.

 

However, when I go into a subcategory the same image is used - of course ? - and that leads to the problem that the CSS background of the subcategory is being disrespected.

 

Well, this is a problem, since I need to make use of white text for the subcategory description.

 

 

What can I do? I think there must be a work arround.

 

 

Edited June 22, 2014 by B.Köring (see edit history)

[PSfever.com]

Hi,

 

could you give us the URL of your site? PReferably with links to categories where you're experiencing this problem.

[vekia]

two possibilities:

1) different imagetype for category description background

2) remove categirt image background, and with css add there own background (for example image or simple color)

[BoKr]

I think I get an idea what Vekia supposes as solution. However, first, here are two screenis:

 

Main category (here I want to use only text on colored background) and sub-category (here I think I need to make use of the image since - as said- when you browse a main category you want to see the thumbs of any given sub-categories).

 

 

I would approach this - if I am correct - in the follwing way:

I would part the sub-category div into a text and image part. Let's say 80/20. 80% text on the left side of the div and the rest for the image floating next to the text part.

 

But, honestly, I am not good enough to make this possible right now.

 

link to site:

http://www.gruenes-spielzeug.de/33-steckturme

[BoKr]

I jusst stumbled about an 'new' css atttribute I never used before: background(-size): cover

 

I looked it up and that lead me to this approach:

 

But I am in doubt if that is the correct way to do this and I think the image looks a bit distorted at teh moment. Anyway, I like it since it I do not have to alter the tpl's but I still do not get why the image looks distorted. All my images should have square resolution and have minimal 'white-space' arround. The way the image is displayed here it looks quite different with alot of white-space. Do not know why.

.content_scene_cat_bg {
    background-position: right center !important;
    background-size: 25% 75% !important;
    padding-right: 240px !important;
}

Edited June 16, 2014 by B.Köring (see edit history)

[sw1ft25]

Hello. 

 

I think you have a fixed width and height there that keeps your image distorted?

 

Like that 219px 167px? 

 

I would try to find the default image size and resize all my images according to that.

[BoKr]

Sorry, but I do come to a solution.

 

The problem is that the given resolution above does actually make the image as square as possible. Any other chance that may come to mind first like using somethin like 200px 200px does make it worse!

 

So, the given height / weight attributes must be related to the whole div or some kind of CSS convolution I do not understand.

 

But honestly, am I the only one who is interesed in having some kind of colored background for the subcategory / category divs?

 

 

 

All I want is to make use of a consistend background (for the many cases I do not have such nice images as seen in the default template -- this is like a safe fall-back div). That is easy to do and I got my green there

 

But the default template does 'overlay' a photographic / picturesque image. Fine if it works but my photos I have at hand to not meet the given resolution and aren't suitable for a background. --> BACKGROUND there shall be readable text  / category description 'floating' over it....

 

So, I thought it might be great to adapt the CSS and if not possible otherwise the category.tpl to float in a conventional way the subcategory image right next to the description.

 

I still need help here.

 

Thanks alot

[BoKr]

Ok, I had to alter the category.tpl, since else I could get done I wanted:

<!-- 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}>
                    *}
                      <div class="content_scene_cat_bg">