cover image on category page ps1.7.0.0

[nagyalp]

Hello,

 

I am using ps 1.7.0.0

 

I would like to change the look of the cover image on category page like it was in ps1.6

I attached 3 images

 

screen1.jpg - actual look 

 

screen2.jpg - desired look

or 

screen3.jpg - desired look 

 

I know I have to change some code but I am not so good at coding.

 

Thanks,

 

 

 

 

[NemoPS]

in classic/templates/catalog/listing/category.tpl

See where it has the img src thing, you have to use this as bacgkround image for the block instead

{$urls.base_url}img/c/{$category.id_category}.jpg
For div id="category-description", just add a style, simple inline css

[nagyalp]

Thank you very much.

 

here is the code in category.tpl:

 

{block name='product_list_header'}

    <div class="block-category card card-block hidden-sm-down" style="background:url({$category.image.large.url}); no-repeat 0px 0px;">

      <h1 class="h1">{$category.name}</h1>

      {if $category.description}

        <div id="category-description" class="text-muted">{$category.description nofilter}</div>

        <div class="category-cover" >

        </div>

      {/if}

    </div>

    <div class="text-xs-center hidden-md-up">

      <h1 class="h1">{$category.name}</h1>

    </div>

{/block}

 

I deleted the img tag and I used the image in style/background.

 

Thank you very much.

[svend]

I have Version 1.7

can some show me the whole code in category.tpl for getting cover image category page like in Version 1.6

[tornadostudio]

Something like NemoPS said but id_category did not work for me.

I have in classic/templates/catalog/listing/category.tpl:

{block name='product_list_header'}

    <div class="block-category card card-block hidden-sm-down" style="background-image: url( {$urls.base_url}img/c/{$category.id}.jpg )">

 

[sam_dls]

Hi there!

I am using Prestashop 1.7.5.1 and this worked for me:

1. Change the dimensions for the "category_default" images:
1.1 From the admin panel go to Design> Images> category_default
1.2 Assign a size of 1170px x 320px

2. Show the image as a background instead of <img>
2.1 In my file directory go to mydomain.com/themes/classic/templates/catalog/_partials
2.2 Open the file "category-header.tpl"

2.3 Identify the following line:

<div class = "block-category card card-block">

2.4 Add the background as an inline style (only if a loaded image was found for this category), it would look like this:

<div class = "block-category card card-block" {if $ category.image.large.url} style = "background: url ({$ category.image.large.url}) center right / cover no-repeat" {/ if}>

2.5 Remove the code block where the category image is shown with a <img> tag

{if $ category.image.large.url}
      <div class = "category-cover">
          <img src = "{$ category.image.large.url}" alt = "{if! empty ($ category.image.legend)} {$ category.image.legend} {else} {$ category.name} { / if} ">
      </div>
{/ if}

----------------------
My final code looked like this:

<div id = "js-product-list-header">
    {if $ listing.pagination.items_shown_from == 1}
        <div class = "block-category card card-block" {if $ category.image.large.url} style = "background: url ({$ category.image.large.url}) center right / cover no-repeat" {/ if}>
            <h1 class = "h1"> {$ category.name} </h1>
            {if $ category.description}
                <div id = "category-description" class = "text-muted"> {$ category.description nofilter} </div>
            {/ if}
            <! - {if $ category.image.large.url}
                <div class = "category-cover">
                    <img src = "{$ category.image.large.url}" alt = "{if! empty ($ category.image.legend)} {$ category.image.legend} {else} {$ category.name} { / if} ">
                </div>
            {/ if} ->
        </div>
    {/ if}
</div>

 

pd: Sorry for my bad English, I'm Spanish speaker, hehe 😅