Category image and thumbnail

[snelb91]

I noticed that you can put a nice beautiful image as a category image (800x217 px  default)

 

but then the thumbnail in the category is ugly as hell because you can't really see the image and it does not cover the whole square.

 

is there any trick to take one image as a thumbnail and one as category image?

 

or can i modify any css ho adjust the image to cover the whole square without stretches?

 

 

Thanks.

[Peeex]

I noticed that you can put a nice beautiful image as a category image (800x217 px  default)

 

but then the thumbnail in the category is ugly as hell because you can't really see the image and it does not cover the whole square.

 

is there any trick to take one image as a thumbnail and one as category image?

 

or can i modify any css ho adjust the image to cover the whole square without stretches?

 

 

Thanks.

Yes, and I tried to upload an image category and subcategory 125x125, 800x217, as a result, when viewing the image little maliseet on the text that is transparent and very small font. Distorted page.

[snelb91]

Someone knows how to change it to a full square image ?

[visuatech]

I don't know if it's the right way but, as a workaround, I add the full banner sized image to the category as you would normally.  I then have a 125 x 125 px image with the "nice" square thumbnail.  I save it in jpg format with the following filename:

 

xx-medium_default.jpg

 

where xx is the ID number of your category.  For instance, one of the images I was doing was for category ID 154.  The file was saved as 154-medium_default.jpg.

 

This is then copied into the "img/c" folder of your prestashop site.  I now have a nice square thumbnail and full banner image for my categories

 

As I said - not sure it's the right way - I'm a complete prestashop newbie... just a workaround until I find an "official" way to do it.

[dioniz]

Would something like the bottom image be good for you?

 

[Dinu]

Would something like the bottom image be good for you?

 

category.jpg

This could by a solution. How to get it done?

[dioniz]

In category.tpl find this code:

<!-- Subcategories -->
        <div id="subcategories">
            <p class="subcategory-heading">{l s='Subcategories'}</p>
            <ul class="clearfix">
            {foreach from=$subcategories item=subcategory}
                <li>
                    <div class="subcategory-image">
                        <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
                        {if $subcategory.id_image}
                            <img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium_default')|escape:'html':'UTF-8'}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {else}
                            <img class="replace-2x" src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {/if}
                    </a>
                       </div>
                    <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'|truncate:350}</a></h5>
                    {if $subcategory.description}
                        <div class="cat_desc">{$subcategory.description}</div>
                    {/if}
                </li>
            {/foreach}
            </ul>
        </div>

replace with this

<div id="subcategories">
            <p class="subcategory-heading">{l s='Subcategories'}</p>
            <ul class="clearfix row">
            {foreach from=$subcategories item=subcategory}
                <li>
                    <div class="subcategory-image col-md-3 col-xs-6">
                        <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}" title="{$subcategory.name|escape:'html':'UTF-8'}" class="img">
                        {if $subcategory.id_image}
                            <img class="replace-2x img-responsive" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')|escape:'html':'UTF-8'}" alt=""  />
                        {else}
                            <img class="replace-2x img-responsive" src="{$img_cat_dir}default-medium_default.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
                        {/if}
                        </a>
                    
                        <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'html':'UTF-8'}">{$subcategory.name|truncate:25:'...'|escape:'html':'UTF-8'|truncate:350}</a></h5>
                    </div>
                    {if $subcategory.description}
                        <div class="cat_desc">{$subcategory.description}</div>
                    {/if}
                </li>
            {/foreach}
            </ul>
        </div>

[FurkyStyle]

Not working, i get tiny pictures.

[vekia]

any chance to see it live? i think that this case needs a little deeper inspection

[TPLuK]

Hi

 

I to have the same problem, the mod above does not work.

 

http://www.tpluk.net/shop/11-electrical-lighting

 

I have attached a screen shot before ( Original category.tpl) and one after mod ....
 

Thanks

[TPLuK]

Hi

 

I to have the same problem, the mod above does not work.

 

http://www.tpluk.net/shop/11-electrical-lighting

 

I have attached a screen shot before ( Original category.tpl) and one after mod ....

 

Thanks

Any one can help with the above would be great, thanks

[FurkyStyle]

Got exact same thing.

Following topic

[vekia]

Any one can help with the above would be great, thanks

 

li element has got 145px width

inside li element you've got <div> with with 25%

this is why it works like that

use width:auto; instead of  width:145px.

 

and change also col-md-3 to col-md-6 or col-md-12

(everything depends on what you exactly expect)

[snelb91]

 I Solved this problem  without changing anything in the  easiest way. Image mapping. 

 

You can look at the results here:http://www.cantierestore.com/Shop/12-categorie

 and here: http://www.cantierestore.com/Shop/16--abbigliamento-da-lavoro

 

No need for tpl changes ecc ecc.

Edited September 16, 2014 by snelb91 (see edit history)

[nocturnal]

 

In category.tpl find this code:

 

 

This worked beautifully for me. But when I upgraded to 1.6.0.8 it disappeared because category.tpl is not in my custom theme folder...

Where can we put this code in our custom theme so that it stays when we upgrade?

[dioniz]

Copy category.tpl from default theme to your custom theme and make changes there.

Actually you should copy all files that are not copied already, from default theme to your custom theme.

[nocturnal]

Again I owe you thanks, Dioniz. This is a really good fix.

[Peter C]

 

 I Solved this problem  without changing anything in the  easiest way. Image mapping.

 

 

Can you please explane or direct me to where this Image Mapping is done?

I'm using version 1.6.0.8 and default theme.

 

 

I've been bashing my head over trying to get this fixed..  

 

 

Thanks you and Ciao,

Pete.

 

 

 

[Peter C]

Searching the Forum and again I land here...
and almost 1800 others!

  ... Doesn't this show that this Category and Sub Category shamozzle is causing headaches to PrestaShop users?

[hddepot]

Can you please explane or direct me to where this Image Mapping is done?

I'm using version 1.6.0.8 and default theme.

 

 

I've been bashing my head over trying to get this fixed..  

 

 

Thanks you and Ciao,

Pete.

 

From what I read in 1.6 documentation, image mapping is no longer a feature available. I wish that they would have created the default template and left the thumbnail images in subcategories, the same as in a main category. Not sure what the thought process was for removing them but it would have been a perfect way to have those used for each subcategory instead of the large image. Easy fix, but not now.

[nocturnal]

It's my understanding that Image Mapping is no longer supported in 1.6.

[vekia]

that's right

im also a little worried about that

it was great feature is ps

[sounds]

This is what I just did for presta 1.6

http://doc.prestashop.com/display/PS16/Building+Image+Maps

 

The small image you uploaded in the category will be the thumbnail, the image you uploaded in image map

will be the one that fills the category top header area.. not the best solution.

But the category description text will be under the category header image.

It seems to me this thumbnail image and sub-category header image was over looked.

Edited August 27, 2014 by sounds (see edit history)

[badger1010]

I don't know if it's the right way but, as a workaround, I add the full banner sized image to the category as you would normally.  I then have a 125 x 125 px image with the "nice" square thumbnail.  I save it in jpg format with the following filename:

 

xx-medium_default.jpg

 

where xx is the ID number of your category.  For instance, one of the images I was doing was for category ID 154.  The file was saved as 154-medium_default.jpg.

 

This is then copied into the "img/c" folder of your prestashop site.  I now have a nice square thumbnail and full banner image for my categories

 

As I said - not sure it's the right way - I'm a complete prestashop newbie... just a workaround until I find an "official" way to do it.

 

This seems to work and a lot easier than changing code, thanks for posting.

 

Having done a bit more with this I found that the medium-default image doesn't appear unless there is a full size category image.

As I didn't want a full size image because the category text becomes unreadable, I created a 1x1 px png image and used that for the full size category image, then uploaded the medium-default.jpg to the img/c folder. So far so good...

Edited November 10, 2014 by badger1010 (see edit history)

[Orphee]

Most fabulous hack EVER!

 

Thank you very much, very useful. The choices made by Prestashop here are impossible to understand.