Files manager in PrestaShop - how to add webp support

PrestaShop has a files manager that gives you possibility to upload own files to the /img/cms/ directory. It is useful when you want to upload some pictures to embed them on your website pages. By default this filesmanager support only basic images upload. It is for safety reasons. Accepted by default files extensions are:

• jpg, jpeg, png, gif, bmp, tiff, svg
• pdf
• mov, mpeg, mp4, avi, mpg, wma, flv, webm

Default upload tool also checks the mime type of file (mime - header of file that gives possibility to recognize file type by browser / php server). Accepted mime types are:

• image/jpeg, image/png, image/gif, image/bmp, image/tiff, image/svg
• application/pdf,
• video/mpeg, video/mp4, video/x-msvideo, audio/x-ms-wma, video/x-flv, video/webm

As you can see - there is no webp image format support, both as a file extension .webp and mime type of file: image/webp

How to add support of wepb file to filesmanager in PrestaShop?

To implement support of webp files to prestashop's default files manager it is required to alter core files. Firstly we must apply chagnes to the filesmanager upload php functions, then - also to .htaccess file to make webp files uploaded to /img/cms/ directory visible in front office.

Let's start with files manager core file that is responsible for upload process

filesmanager files are located in admin directory, so for each installation of prestashop the admin directory may be different. It's just unique and only you - as a merchant know the path to the admin dir. So in the path below just replace ADMIN_DIR with name of your admin directory.

Open file: /admin_dir/filemanager/config/config.php. This file is responsible for upload php scripts configuration. We have to add there support of webp image extension and image/webp mime type of file. 

To support .web extension change line:

$ext_img = array('jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg'); //Images

to:

$ext_img = array('jpg', 'jpeg', 'png', 'gif', 'bmp', 'tiff', 'svg', 'webp'); //Images

and line

$ext_file = array('pdf'); //array('doc', 'docx','rtf', 'pdf', 'xls', 'xlsx', 'txt', 'csv','html','xhtml','psd','sql','log','fla','xml','ade','adp','mdb','accdb','ppt','pptx','odt','ots','ott','odb','odg','otp','otg','odf','ods','odp','css','ai'); //Files

to

$ext_file = array('pdf','webp'); //array('doc', 'docx','rtf', 'pdf', 'xls', 'xlsx', 'txt', 'csv','html','xhtml','psd','sql','log','fla','xml','ade','adp','mdb','accdb','ppt','pptx','odt','ots','ott','odb','odg','otp','otg','odf','ods','odp','css','ai'); //Files

to support image/webp mime type of file,

change line:

$mime_img = array('image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/tiff', 'image/svg');

to:

$mime_img = array('image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/tiff', 'image/svg', 'image/webp');

That's all. now it's time to accept "webp" files located in /img/cms/ directory in shop's front office

.htaccess modification to accept webp files in prestashop's front office

open file: /img/cms/.htaccess

change code from:

# Apache 2.2
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all
    <Files ~ "(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico)$">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4
<IfModule mod_authz_core.c>
    Require all denied
    <Files ~ "(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico)$">
        Require all granted
    </Files>
</IfModule>

to:

# Apache 2.2
<IfModule !mod_authz_core.c>
    Order deny,allow
    Deny from all
    <Files ~ "(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|webp)$">
        Allow from all
    </Files>
</IfModule>

# Apache 2.4
<IfModule mod_authz_core.c>
    Require all denied
    <Files ~ "(?i)^.*\.(jpg|jpeg|gif|png|bmp|tiff|svg|pdf|mov|mpeg|mp4|avi|mpg|wma|flv|webm|ico|webp)$">
        Require all granted
    </Files>
</IfModule>

And that's all. Your files manager tool in shop's back office should allow to upload .webp files and add them (and display!) in shop's front office.