Prestashop 1.7 change category cover Image

[EmCi]

Hi all,

this is my first note. I hope I'll manage to explain my problem properly.

I would like to add category cover images that fill the whole category cover image box (i think it's 820 wiede and 217 high).

The default image is of a free standing woman. The size is 141 wide and 180 high.

I change the size of the "category_default" image settings from 141x180 to 820x217 and I used an image with that size. But the image keeps being small (141x180) and then is distorted as well. Can I change any settings to get the desired results or do I need to change code anywhere? And how would I go about that problem to solve it?

best regards,

newby from Germany 

[tornadostudio]

yes, our problem as well.

[tantan199]

That's a problem of prestashop, the problem occurs sometimes. Two ways to fix it,

The first one doesn't need to edit any files, but it is tricky and different from site to site.

The second one is that editing the \themes\classic\templates\catalog\listing\category.tpl file to replace this code {$category.image.large.url} by this one {$category.image.bySize.category_default.url} 

 

Regards,

Jonny

[ican]

On 26/12/2017 at 1:47 AM, EmCi said:

Hi all,

this is my first note. I hope I'll manage to explain my problem properly.

I would like to add category cover images that fill the whole category cover image box (i think it's 820 wiede and 217 high).

The default image is of a free standing woman. The size is 141 wide and 180 high.

I change the size of the "category_default" image settings from 141x180 to 820x217 and I used an image with that size. But the image keeps being small (141x180) and then is distorted as well. Can I change any settings to get the desired results or do I need to change code anywhere? And how would I go about that problem to solve it?

best regards,

newby from Germany 

 

You have to regenerate thumbnail images after changing image setting and lastly clear the cache.

[notProgramer]

its not working for me , im using 1.7.4.2 any ideas ?

 

[dinesh badrukhiya]

Can you please share your website url details to check?

Best Regards.

[c.cristinziano]

Hi everyone, I can't to set up just the thumbnail in the sub-categories...So I've proceed in this way:

1- I've uploaded the thumbnail image (58x58px) in the "Category thumbnail field" then I've clicked to save

2- I've regenerated the thumbnail in this way =>categories =>Format => medium_default

3- I've cleared files and images chache of google chrome

But the thumbnail doesn't appear....

How you can see on my web site:

https://www.gioielleriamomentipreziosi.it/it/10-collane

Do you have some recommend for me? thank you in advance

[Andrea_Firenze]

On 7/8/2018 at 16:13, tantan199 said:

Questo è un problema di prestashop, il problema si verifica a volte. Due modi per risolverlo,

Il primo non ha bisogno di modificare alcun file, ma è complicato e diverso da sito a sito.

Il secondo è quello di modificare il file \ themes \ classic \ templates \ catalog \ listing \ category.tpl per sostituire questo codice {$ category.image.large.url} con questo {$ category.image.bySize.category_default.url } 

 

Saluti,

Jonny

 

on PS 1.7.5.1 the correct path is: \ themes \ classic \ templates \ catalog \ _partial \ category-header.tpl

.. \ themes \ classic \ templates \ catalog \ listing \ category.tpl - here there are only a file that includes category-header.tpl

Unfortunately this trick doesn't work. 

The image is still stretched.

Any ideas?

 

[Andrea_Firenze]

At the end i have solved in this way:

 

- go to .. \ themes \ classic \ asset \ css \ theme.css -> find -> .block-category .category-cover img -> delete/comment width and height values.

.block-category .category-cover img {

/* width: 141px; */

/* height: 180px; */

}

- go to .. \ themes \ classic \ asset \ css \ custom.css -> to raise up the img from bottom

.block-category .category-cover img {

padding-bottom: 40px;

}

 

for me, it work!

 

 

[cafe21]

Much easier - use Admin image settings - see

https://zemez.io/prestashop/support/how-to/prestashop-1-7-edit-predefined-image-dimensions/

Don't forget to regenerate thumbnails and correct css

ec

[Dp.]

What I did so far:

• changed image size category_default from 141px*180px to 750px*180px
• Regenerated thumbnail images

I then had a distorted image in the category block. I then changed the width via custom css from 141 to 750:

.block-category .block-category-inner .category-cover img {
    width: 750px;
    height: 180px;
}

This looks fine on full size view. When I am scaling down the window size, however, the image stays fixed while the other content gets smaller:

 

How can I address this?

[bbajc]

Bonjour,

 

Avez vous trouver la solution ? j'ai le même problème...

[Jose Lorenzini]

On 4/19/2019 at 7:59 PM, Andrea_Firenze said:

 

on PS 1.7.5.1 the correct path is: \ themes \ classic \ templates \ catalog \ _partial \ category-header.tpl

.. \ themes \ classic \ templates \ catalog \ listing \ category.tpl - here there are only a file that includes category-header.tpl

Unfortunately this trick doesn't work. 

The image is still stretched.

Any ideas?

 

i just add $category.image.bySize.category_default.url into the <img src="$category.image.bySize.category_default.url"> and edit the css on the theme.css .block-category img{width:100% ; max-width:1240px} . is working full width cover image . thanks

[MacManko]

I got some weird problem, i have set up cover images and on pc/laptop its working correct in dev tools i'm looking at same resolution as my phone and image does not popup it's only seen on phones. On phones there is image like this that is redirecting to prestashop site. Nay1 got same problem or know how to fix it? Its the same for exery category and subcategory. EDIT: found solution to this. It's the Advertisment block module, You can change link picture or just disable it on mobile.

Edited August 10, 2020 by MacManko
Found solution. (see edit history)

[A.V.E]

On 1/31/2020 at 11:35 PM, Dp. said:

What I did so far:

• changed image size category_default from 141px*180px to 750px*180px
• Regenerated thumbnail images

I then had a distorted image in the category block. I then changed the width via custom css from 141 to 750:

.block-category .block-category-inner .category-cover img {
    width: 750px;
    height: 180px;
}

This looks fine on full size view. When I am scaling down the window size, however, the image stays fixed while the other content gets smaller:

 

How can I address this?

That would be through media queries in the css: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

[musicmaster]

Did you clean the cache after you changed the format? It could very well been that the image became distorted because the cached template still had the old format.