2020-10-23

Craft CMS の Image toolbox プラグインで webP 画像周りの出力を簡単に対応する #craftcms

20201021 1202

Craft CMS は 3.5 から画像の出力の時に webP に変換して出せるようになった。

[feature request] Add support for webp image transforms. · Issue #5853 · craftcms/cms
https://github.com/craftcms/cm...
<source type="image/webp" srcset="{{ asset.getUrl({
    transform: 'namedtransform',
    format: 'webp',
}) }}">

この辺の設定・出力をまとめてやってくれるのが Image toolbox プラグイン。

Image toolbox
https://plugins.craftcms.com/i...

プラグインをインストールして設定が問題ない場合はプラグインのドキュメントにもあるように、必要なHTMLタグを出力してくれる。
これはなかなか便利そう。

ただ、 ColorfulBox では WebP 周りの設定がたりていないようでうまく動かなかった。
設定が問題ない場合はちゃんと動くのを @BUN に確認してもらった。

ドキュメントにも書かれているが craft.app.images.supportsWebP() をテンプレートに書いたときに 1 が返ってくるかを確認する必要がある。
返ってこないときはおとなしく個別に書こう。