How to make the category images responsive to screen size in Classic (default) theme in Prestashop 1.7


Firstly Edit the theme.css to remove any image size restrictions. 

\ 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; */

}

Next edit the category-header.tpl:

/themes/classic/templates/catalog/_partials/category-header.tpl

Edit the following lines to make the image class img-fluid

{if !empty($category.image.large.url)}

<div class="category-cover">

<img class="img-fluid" src="{$category.image.bySize.category_default.url}" alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" loading="lazy">

</div>

{/if}

Now, clear cache and recompile template files from the performance menu in the prestashop backoffice.

Comments

Post a Comment

Popular posts from this blog

How reinstall Prestashop 1.7 keeping the existing database

Download the latest version of Prestahop 1.7 from the offical versions website > https://prestashop.com/versions/ .  Follow the manual installtion steps:  Download the prestashop package.  Unzip on the local HDD.  On the server, move the files in public_html folder to another folder as a backup.  Upload the prestahop.zip file to the public_html folder.  Unzip the contents here.  Now visit your site, www.example.com.  The installer will start, add basic information.  On the Database setup page, provide the name of the existing database, username and password.  It is important to Untick the "Remove exiting tables".  In the table name prefix field provide a prefix different form the existing one.  Let the installation proceed as normal, it will create a set of empty tables with the new prefix in the database.  In the cPanel File Manager, look for the file 'parameters.php' located in the app/config folder.  Change the...
Keep reading

How to change the displayed name for a payment module in Prestashop

Often payment modules need to be renamed to something more appropriate for customers to understand them. It is important to display information that a customer would understand, especially when money and payments are involved. Prestashop Version 1.6.0.6 Go to the modules folder on your Prestashop host. Open your module folder, for example : bankwire Go to the translations folder. Edit the .php file which relates to the language, en.php is for English. Changing the rows highlighted below in the en.php file will help change what is displayed to the customer. bankwire_05adcee99142c1a60fb38bb1330bbbc1'] = 'Bank Transfer / NEFT / RTGS / IMPS - You will be provided bank details'; $_MODULE['<{bankwire}prestashop>bankwire_a246a8e9907530c4c36b8b4c37bbc823'] = 'Accept payments for your products via bank wire transfer.'; $_MODULE['<{bankwire}prestashop>bankwire_cbe0a99684b145e77f3e14174ac212e3'] = 'Are you sure about removing these ...
Keep reading

Using 'Group By' to Select the Row with the 'max(date)' and Updating it

update item_rate set rate_of_tax = 18 where id in (select id from (select id from item_rate where date_effective in (select max(date_effective) from item_rate group by item_name)) as t1) Explained : First get the maximum date_effective for each item_name.  Get the item_rate row id for that date  Place it into a temporary table t1  Select the ids from the temporary table  Update the item_rate table, set the rates of tax for the selected row ids from the temporary table.  Note : The temporary table is required because the table to be updated cannot be the same as the table being queried. item_rate Table ------------------------------------------------- | id | date_effective | rate_of_tax | item_name | ------------------------------------------------- | 1  | 01.Jan.2017    |   12.0      |  item1    | | 2  | 15.Jan.2017    |   12.0  ...
Keep reading