【EC-CUBE4】商品画像の最大サイズを制限して自動的にリサイズしてアップロードしたいとき。

アップロード画像の最大サイズを固定したい

EC-CUBEで商品写真をアップロードする際、誤ってリサイズせずに3000x2000ピクセルくらいの画像をアップロードしまうことがありました。デフォルトではサイズは無制限のようです。これをアップロードする際に自動的に800x800ピクセルまたは1000x1000ピクセルくらいにしたいと思い。どのようにしたらできるか調べると以下の参考ページを見つけることができ解決できたのでメモ。

• 対象バージョン：4.1.1

参考ページ

EC-CUBE4のファイルアップロードには「jQuery File Upload」が使われているようです。

Link

Client Side Image Resizing · Blueimp/jQuery-File-Upload Wiki · Github

https://github.com/blueimp/jQuery-File-Upload/wiki/Client-side-Image-Resizing

Link

Eccube4の商品画像サイズを制限するカスタマイズ | ウェブてく

https://web.bright-b.com/eccube4-image-size-64/

手順

変更を加えるテンプレート

縦横のサイズ上限値を指定するためには以下のファイルに変更を加えます。

ec-cubeのディレクトリ/src/Eccube/Resource/template/admin/Product.twig

追記するコード

Product.twig の 131行目 に以下のコードがあるかと思います。

$('#{{ form.product_image.vars.id }}').fileupload({
    url: "{{ url('admin_product_image_add') }}", 
    type: "post",
    sequentialUploads: true,
    dataType: 'json',
    dropZone: $('#upload-zone'),
    done: function(e, data) {
        $('.progress').hide();
        $.each(data.result.files, function(index, file) {
            var path = '{{ asset('', 'temp_image') }}' + file;
            var $img = $(proto_img.replace(/__path__/g, path));
            var $new_img = $(proto_add.replace(/__name__/g, count_add));
            $new_img.val(file);
            $child = $img.append($new_img);
            $('#thumb').append($child);
            count_add++;
        });
        hideThumbnail();
        updateSortNo();
    },

この間に追記します。

$('#{{ form.product_image.vars.id }}').fileupload({
    url: "{{ url('admin_product_image_add') }}",
    type: "post",
    sequentialUploads: true,
    dataType: 'json',
    dropZone: $('#upload-zone'),
    disableImageResize: false, //新規追加　画像のリサイズを許可
    imageMaxWidth: 1000, //新規追加　横幅の最大サイズ
    imageMaxHeight: 1000, //新規追加  縦幅の最大サイズ
    imageQuality: 0.7, //新規追加　リサイズした画像の画質
    done: function(e, data) {
        $('.progress').hide();
        $.each(data.result.files, function(index, file) {
            var path = '{{ asset('', 'temp_image') }}' + file;
            var $img = $(proto_img.replace(/__path__/g, path));
            var $new_img = $(proto_add.replace(/__name__/g, count_add));
            $new_img.val(file);
            $child = $img.append($new_img);
            $('#thumb').append($child);
            count_add++;
        });
        hideThumbnail();
        updateSortNo();
    },

オプションの説明

Link

Options · Blueimp/jQuery-File-Upload Wiki · Github

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

これで、アップロード時にリサイズされた画像がアップロードされていると思います。