- How to set image dimensions Prestashop.
- How to set product slider modules to have sharp product images on homepage.
- How to use settings in the Theme editor module to have sharp product images on the category page.
- How to use settings in the Theme editor module to have sharp product images on the product page.
The key point to have sharp images is keep them at their original sizes, don’t get them resized. That works for all images like product images, banner images, logo, etc.
1. How to set image dimensions Prestashop.
Image types showing on the above picture are predefined image types of Transformer theme and Panda tempalte. They are in 7:8 ratio, the largest on is 1200×1372. You can change them accordion to your needs, generally don’t change the width of “cart_default” and “small_default”.
How to change predefined image dimensions of prestashop site.
- If you want to make everything be perfect, then crop your images into the same ratio before uploading them. If your images are in two ratios like 7:8 and 1:1, then white borders will be added to one of them, that’s not we wanted. If some of your images are in 910px * 1040px, some others are in 1400px * 1600px, then no needs to crop them at all, cause they are in the same ratio 7:8, that’s already enough, no need to do extra work to crop them to be in the same dimension.
- When you change predefined image dimensions, it’s recommended to just change heights, don’t change widths. I will talk about how to change widths in the following 3 sections. For exmaple, if your product images are in 1000×800, then you need to change the cart_default to 70px * 56px, change the home_default to 280px * 224px, see change the ratio of image types to be the same as your product images by changing heights only, keep widths in predefined values.
- Round values. If you get 320.133, round it to 320. If you get 320.5, then round it to 321.
- What’s the smallest dimension of product images you’ve prepared. If the smallest dimension is 910×1040, then you need to reduce all image types which are larger than that down to 910×1040, other white borders will be added to make them look even smaller.
- _2x image types are for retina feature to make images look sharp on most mobile devices. For example the dimension of home_default is 280px * 320px, then home_default_2x would be 560px * 640px, twice of home_default.
- You can create as many new image types as you want.
2. Home page of your prestashop site.
Let me use the “Feature products slider” module as an example to see why the predefined width for home_default is 280px.
(1200-15*2-16*3)/4=280 15*2 are two paddings on the each side. 4 products per row, so there are 3 gaps, all products slider modules allow you to change the gap between products.
You don’t have to know every details, all products slider modules of Transformer theme and panda template provide suggested dimensions for you accordion to your settings. Check the fifth demo of Panda template, the feature products slider shows 5 products per row, gaps between products are 16px, so the correct width for product images is (1200-15*2-16*4)/4=221.2, round 221.2 to 221. You don’t have to do math do get the value, you can find it in the Featured products module after saving settings. By default you can’t find a image type which is 221px in width and in most cases you can’t just adjust the size of home_default image type, cause it’s being used in other places. So what you need to do is create a new image type for the featured products module, name it whatever you want, just make sure it ends up with _default, like “featured_products_default”. You can get the height for the new “featured_products_default” image type accordion to the ratio of your product images, for example if the ratio is 7:8, then the height should be 221*8/7=253. If you have the retina option enabled, then you need to create another image type with the same name ended up with _default_2x. After creating the new image type, don’t forget to regenerate thumbnails and go back to the Featured products slider module to change the “Image type” setting.
3. Category page of prestashop
(1200*(9/12)-15*2-15*2)/3=280 The default layout of the category is “Two columns”, the width of main column is 9/12. 15*2 are two paddings on the each side of the main column. the gap between each product is 15px, you can change the value in the Theme editor module, 3 products per row, so two gaps per row 15*2. You can also find suggested width in the Theme editor module.
4. Product page of prestashop
The default product image type for image galleries is medium_default. The image type for zoom feature and lightbox feature is superlarge_default.
It’s easy to get the correct width of the medium_default for horizontal image galleries, because it’s the same as the content width of “Image column”, you can set the width of “Image column” in the Theme editor module. For example, the with for “Image column” is 5/12, the the width of the medium_default should be 1200*5/12-15*2=470, if the width your media_default is not 470px, change its width to be 470px, adjust its height to keep the same ratio as your product images, because by default the medium_default image type isn’t being used anywhere else, so no need to create a new image type. As always, you can also find suggested width in the Theme editor module.
General set an as large as possible width for superlarge_default.
You can adjust the number of products per row to let images not getting resized on every devices, by doing that, gaps between product may be large on some devices, so that’s not necessary, because of with the “Retina” feature, images will look okay even when they are resized.