EC-CUBE4系で商品画像にWebP形式の画像を登録できるようにする方法

EC-CUBE4で商品画像にWebPを登録しようとしても、「無効なファイルです: サポートしているファイルは image/gif, image/png 又は image/jpeg です」というエラーになってしまいます。

エラーを回避して商品画像にWebPも登録できるようにする方法をご紹介いたします。

※今回検証した環境はEC-CUBE4.3.1です。EC-CUBE4系でしたら同じ方法で対応できるはずです。

まずは、「/src/Eccube/Controller/Admin/Product/ProductController.php」を編集します。

327行目付近に以下のような箇所があります。

$allowExtensions = ['gif', 'jpg', 'jpeg', 'png'];

ここに’webp’を追記します。

$allowExtensions = ['gif', 'jpg', 'jpeg', 'png', 'webp'];

続いて、「/src/Eccube/Resource/template/admin/Product/product.twig」をダウンロードして編集します。

アップロード先は、「/app/template/admin/Product/product.twig」にします。Productフォルダがない場合は作成してください。

そのまま「/src/Eccube/Resource/template/admin/Product/product.twig」に上書きアップロードしても良いですが、「/app/template/admin/Product/product.twig」にアップロードすればこちらが優先されます。

product.twigの74行目付近に以下のような箇所があります。

acceptedFileTypes: [
  'image/gif',
  'image/png',
  'image/jpeg'
],

ここに’image/webp’を追記します。

acceptedFileTypes: [
  'image/gif',
  'image/png',
  'image/jpeg',
  'image/webp'
],

これで、WebP形式の画像も商品画像として登録できるようになります。

あとがき

商品画像にWebPを使いたい時は、ぜひ参考にしていただければ幸いです。