category

Craft CMS の Imager Pretransform プラグインを試してみた #craftcms

2019-09-06

Imager Pretransform
https://plugins.craftcms.com/i...

先日 Imager プラグインを試したときにみつけたので試してみた。

2019-08-21

どういうプラグインかはよくわからず。

あわよくば Redactor で watermark とかが使えないかなー、とか。

テスト用にアセットにボリュームを作成

まずはテスト用に１つ volume を用意する。

これを用意したうえで

craft-imagerpretransform/README.md at master · superbigco/craft-imagerpretransform
https://github.com/superbigco/...

に書かれてある感じで vendor/superbig/craft-imagerpretransform/src/config.php のファイルを /config/imager-pretransform.php にコピーした。

ファイルの内容としてはこんな感じでとりあえずリサイズをするように設定。

return [
    'transforms' => [
        'imagertest' => [
            [
                'width'       => 300,
                'jpegQuality' => 65
            ],
            'defaults' => [

            ]
        ]
    ]
];

pakutaso の写真をお借りして、、、

森の中に自生する苔の大地｜無料の写真素材はフリー素材のぱくたそ
https://www.pakutaso.com/20190...

今回用意したvolumeにアップロードする。

この画像はもちろん設定した volume にアップされてる。

/imagertest/KM19814184_TP_V.jpg

他に

/imager/imagertest/579/KM19814184_TP_V_fb4cc41b697244613afff7f8c4761451.jpg

にリサイズされた 300px の画像が生成される。

最初このリサイズされた画像をなにか使えるのかなー、とか思ってたんですが、これはあくまで pre であって、あらかじめ画像を生成しておく、ということっぽい。

結果としては

{% set transformedImages = craft.imager.transformImage(image, [ 
	{ width: 300, jpegQuality: 65 }
	]) %}

みたいな書き方をテンプレートでしていたときに、アクセスがあったときではなくあらかじめ画像を用意しておいて、アクセス時の負荷を減らすということっぽい。

Watermark はできるのかどうか？

Watermark がどんな感じかも見てみた。

return [
    'transforms' => [
        'imagertest' => [
            [
                'width'       => 300,
                'jpegQuality' => 65
            ],
            [
                'width'       => 450,
                'watermark'  => [
                     'image' => 'http://bp1-test.craft-demo.mixh.jp/asset/bitpart-white-big.png', 
                     'width' => 303,
                     'height' => 84,
                     'position' =>  [
                        'right' => 30, 
                        'bottom' => 30 
                        ], 
                    'opacity' => 0.3, 
                    'blendMode' => 'multiply' 
                ]
            ],
            'defaults' => [

            ]
        ]
    ]
];

こんな感じで直接透かし用のファイルパスを指定したら、450に縮小された上にwatermarkがのった画像が生成されていた！！！

おぉー、これができるとなるとだいぶいいなぁ。

画像のURLに乱数がはいっているので単純に置換してあらかじめ作成された画像のURLを取得するというのは難しそう。

多分内部的にどこかにデータを持ってるんだろうな。

defaults の指定は他の設定で指定されていない値があるときに使われるものっぽいな。

return [
    'transforms' => [
        'imagertest' => [
            [
//                 'width'       => 300,
                'jpegQuality' => 65
            ],
            [
//                 'width'       => 450,
                'watermark'  => [
                     'image' => 'http://bp1-test.craft-demo.mixh.jp/asset/bitpart-white-big.png', 
                     'width' => 303,
                     'height' => 84,
                     'position' =>  [
                        'right' => 30, 
                        'bottom' => 30 
                        ], 
                    'opacity' => 0.3, 
                    'blendMode' => 'multiply' 
                ]
            ],
            'defaults' => [
                'width'       => 333,
            ],
        ]
    ]
];

これだと変形された画像として幅は全部333になってた。なるほどなるほど。

次は外部ボリュームを使ったときにそちらでwatermarkを当てるとかができるかどうか。。。試してみよう。