Jump to content
snelb91

Category image and thumbnail

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

  • Like 5

Share this post


Link to post
Share on other sites

Would something like the bottom image be good for you?

 

post-117341-0-21399900-1397987670_thumb.jpg

  • Like 4

Share this post


Link to post
Share on other sites

Would something like the bottom image be good for you?

 

attachicon.gifcategory.jpg

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

Share this post


Link to post
Share on other sites

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>
  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

 

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?

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

 

 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.

 

 

 

post-759659-0-06119000-1404706354_thumb.jpg

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

that's right

im also a little worried about that

it was great feature is ps :(

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Most fabulous hack EVER!

 

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

Share this post


Link to post
Share on other sites

×
×
  • Create New...

Important Information

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