Image in the Category page

[Na0m1]

 

Hello, in the category page I want the img category to fill the whole picture, but instead I only get a small portion, change the sizes from the design part and even then it does not look good. Could you help me?

 

The first image would be current, the second as I want it to look

 

Thanks!

Edited February 25, 2019 by Na0m1 (see edit history)

[tdsoft]

you can modify template to print this page in file: themes\classic\templates\catalog\listing\category.tpl

[fran83]

Hello Please I am having the same problem. I added this code and now I have two images. How can I delete one of them please !  

Code added  {*
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
        *}
        {* Webbax - categorie end *}
        <br/>
        <div>
            <img src="{$category.image.large.url}" alt="{$category.image.legend}" class="img-thumbnail">
        </div>
        {* Webbax - categorie start *}
      {/if}
    <

 

 

my category tpl 

 

 

{**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[email protected]>
 * @copyright 2007-2017 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
<div class="block-category relative">
    {if (isset($pkts.cp_category_preview) && $pkts.cp_category_preview == 1)}
    {if file_exists("{$pkts.cat_img_path}{$category.id}.jpg")}
    <img src="{$category.image.large.url}" width="1110" height="500" alt="{$category.name}">
    {/if}
    {/if}
    {if (isset($pkts.cp_category_description) && $pkts.cp_category_description)}
    <div class='category-desc-wrap{if file_exists("{$pkts.cat_img_path}{$category.id}.jpg")} img_exist{else} no_img{/if}'>
    <h1 class="h1">{$category.name}</h1>
        {if $category.description}
            <div id="category-description">{$category.description nofilter}</div>
        {/if}
    </div>
    {/if}
</div>
 {*
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
        *}
        {* Webbax - categorie end *}
        <br/>
        <div>
            <img src="{$category.image.large.url}" alt="{$category.image.legend}" class="img-thumbnail">
        </div>
        {* Webbax - categorie start *}
      {/if}
    </

{if (isset($pkts.cp_subcategories) && $pkts.cp_subcategories)}
    {if isset($subcategories) && !empty($subcategories)}
        <div id="subcategories">
            <h3 class="subcategory-heading">{l s='Subcategories'}</h3>
            <ul class="flex-container">
                {foreach from=$subcategories item=subcategory}
                    <li>
                        <div class="subcategory-image">
                            <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)}" title="{$subcategory.name}" class="img">
                                {if $subcategory.id_image}
                                    <img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')}" alt="{$subcategory.name}"/>
                                    <!--<img class="replace-2x" src="{$urls.img_cat_url}{$subcategory.id_image}-0_thumb.jpg" alt="{$subcategory.name}"/>-->
                                {else}
                                    <img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name}"/>
                                {/if}
                            </a>
                        </div>
                        <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)}">{$subcategory.name|truncate:25:'...' nofilter}</a></h5>
                        {if $subcategory.description}
                            <div class="cat_desc">{$subcategory.description nofilter}</div>
                        {/if}
                    </li>
                {/foreach}
            </ul>
        </div>
    {/if}
{/if}
{/block}

[Na0m1]

14 hours ago, tdsoft said:

you can modify template to print this page in file: themes\classic\templates\catalog\listing\category.tpl

i have this code...  in that file 
 

 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <contact@prestashop.com>
 * @copyright 2007-2018 PrestaShop SA
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
    {include file='catalog/_partials/category-header.tpl' listing=$listing category=$category}
{/block}

so i go to catalog/_partials/category-header.tpl and i have
 

<div id="js-product-list-header">
    {if $listing.pagination.items_shown_from == 1}
        <div class="block-category card card-block">
            <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>

i change the custom css to 

.block-category .category-cover img {
    width: 400px;
    height: 150px;
}

img {
    vertical-align: baseline;
}

and i dont see whats wrong... 

 

Thanks

 

Edited February 26, 2019 by Na0m1
added inf (see edit history)

[Na0m1]

On 2/26/2019 at 9:44 AM, fran83 said:

Hello Please I am having the same problem. I added this code and now I have two images. How can I delete one of them please !  

Code added  {*
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
        *}
        {* Webbax - categorie end *}
        <br/>
        <div>
            <img src="{$category.image.large.url}" alt="{$category.image.legend}" class="img-thumbnail">
        </div>
        {* Webbax - categorie start *}
      {/if}
    <

 

 

my category tpl 

 

 

{**
 * 2007-2017 PrestaShop
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Open Software License (OSL 3.0)
 * that is bundled with this package in the file LICENSE.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/osl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to http://www.prestashop.com for more information.
 *
 * @author    PrestaShop SA <[email protected]>
 * @copyright 2007-2017 PrestaShop SA
 * @license   http://opensource.org/licenses/osl-3.0.php Open Software License (OSL 3.0)
 * International Registered Trademark & Property of PrestaShop SA
 *}
{extends file='catalog/listing/product-list.tpl'}

{block name='product_list_header'}
<div class="block-category relative">
    {if (isset($pkts.cp_category_preview) && $pkts.cp_category_preview == 1)}
    {if file_exists("{$pkts.cat_img_path}{$category.id}.jpg")}
    <img src="{$category.image.large.url}" width="1110" height="500" alt="{$category.name}">
    {/if}
    {/if}
    {if (isset($pkts.cp_category_description) && $pkts.cp_category_description)}
    <div class='category-desc-wrap{if file_exists("{$pkts.cat_img_path}{$category.id}.jpg")} img_exist{else} no_img{/if}'>
    <h1 class="h1">{$category.name}</h1>
        {if $category.description}
            <div id="category-description">{$category.description nofilter}</div>
        {/if}
    </div>
    {/if}
</div>
 {*
        <div class="category-cover">
          <img src="{$category.image.large.url}" alt="{$category.image.legend}">
        </div>
        *}
        {* Webbax - categorie end *}
        <br/>
        <div>
            <img src="{$category.image.large.url}" alt="{$category.image.legend}" class="img-thumbnail">
        </div>
        {* Webbax - categorie start *}
      {/if}
    </

{if (isset($pkts.cp_subcategories) && $pkts.cp_subcategories)}
    {if isset($subcategories) && !empty($subcategories)}
        <div id="subcategories">
            <h3 class="subcategory-heading">{l s='Subcategories'}</h3>
            <ul class="flex-container">
                {foreach from=$subcategories item=subcategory}
                    <li>
                        <div class="subcategory-image">
                            <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)}" title="{$subcategory.name}" class="img">
                                {if $subcategory.id_image}
                                    <img class="replace-2x" src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category_default')}" alt="{$subcategory.name}"/>
                                    <!--<img class="replace-2x" src="{$urls.img_cat_url}{$subcategory.id_image}-0_thumb.jpg" alt="{$subcategory.name}"/>-->
                                {else}
                                    <img class="replace-2x" src="{$img_cat_dir}{$lang_iso}-default-category_default.jpg" alt="{$subcategory.name}"/>
                                {/if}
                            </a>
                        </div>
                        <h5><a class="subcategory-name" href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)}">{$subcategory.name|truncate:25:'...' nofilter}</a></h5>
                        {if $subcategory.description}
                            <div class="cat_desc">{$subcategory.description nofilter}</div>
                        {/if}
                    </li>
                {/foreach}
            </ul>
        </div>
    {/if}
{/if}
{/block}

Reading the comments in the category.tpl you have to edit the catalog/_partials/category-header.tpl and i dont see how can use that code.

 

Thanks