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 to Convert an ImageIcon to a Base64 encoded String in Java

To convert an ImageIcon to a Base64 encoded string, we first need to convert the ImageIcon to a BufferedImage. The BufferedImage then needs to be converted to a ByteArray using a ByteArrayOutputStream. Then using a Base64 encoder, we can convert the ByteArray to a Base64 String. Particularly useful when trying to save an image loaded into a JLabel  to the database. To get the image from the JLabel, we need to get the ImageIcon from the JLabel using getIcon(); import com.itextpdf.text.pdf.codec.Base64; import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import javax.imageio.ImageIO; import java.awt.Graphics; private String ConvertImageIconToBase64String(ImageIcon ii) { // Create a buffered image of the size of the original image icon BufferedImage image = new BufferedImage(ii.getIconWidth(), ii.getIconHeight(), BufferedImage.TYPE_INT_RGB); // Create a graphics object to draw the image Graphics g = image.createGraphics(); // Paint the icon on ...
Keep reading

How to install a network Star TSP700II installed on Windows XP in Windows 10

Image
Goal : You need to add a Star Micronics network printer installed on a XP machine to a Windows 10 machine.   Issue : Windows update cannot find a suitable driver for the Star printer when you add the printer over the network. Solution : Step 1: Download the Star Micronics printer software from here .. http://www.starmicronics.com/support/download.aspx?type=1&tabText=StarPRNT%20V3.4%20FULL%2032/64-bit&path=DriverFolder\drvr\starprnt_v340.zip&id=1743&referrer=http://www.starmicronics.com/support/ Step 2 : Navigate to the Windows folder in the download. Look for the 64 bit windows installer. Step 3 : Install the software. Step 4 : Make sure the printer is already installed on the Windows XP machine and that it is switched and reachable. If not installed, use the same Star Micronics printer software that was downloaded earlier, to install the printer on the XP PC. Make sure the printer is switched on and connected when the software is installed. ...
Keep reading

Problems when generating and uploading JSON from CSV for GSTR1

1. Check whether the GST Offline tool is the latest version. 2. If not, download the latest version from the GST website (gst.gov.in). After you have logged in, click on the downloads tab and go to the offline tools section, download and install the GST offline tool. 3. Ensure the .csv file generated is in the format prescribed in the csv files folder that is available along with the GST Offline tool. 4. Make sure the Date is in the correct format. 5. Make sure the place of supply is in the format "07-Delhi" and not "7-Delhi". The state code has to be 2 digits. If it is a single digit like "7", it must be padded with a zero like "07". There must be no spaces in between. 6. Make sure the GSTIN is in the correct format. 77AAAAA8888A1ZX. Let's break down the GSTIN: 77 - 2 Digit State Code AAAAA8888A - PAN 5letters,4digits,1letter 1 - GST related digit Z - compulsary Z X - Checksum digit These are some basic checks that are applicable ...
Keep reading