CMS で利用する画像に透かし（watermark）を入れたいという要望は時々あるのでそれの方法を少し試してみる。
CDN使う方法はとりあえず後回しという感じで。
Craft CMS だと Imager プラグインが画像の transform 周りについては高機能な感じなので、とりあえず試してみる。
Imager
https://plugins.craftcms.com/i...
プラグインをインストールすれば、ドキュメントに書かれてるような感じの画像を変形するオプションを使える。
Imager-Craft/README.md at craft3 · aelvan/Imager-Craft
https://github.com/aelvan/Imag...
似たようなプラグインだと ImageOptimize もかなり高機能っぽい気がしている。
ImageOptimize
https://plugins.craftcms.com/i...
透かしについては見つけられていなかったのでこのプラグインも後日試してみる。
Assetを指定してwatermarkを入れる
ひとまず指定の画像にwatermarkを入れるのを試してみる。
テンプレートとしてはこんな感じ。
{% set logo = craft.assets({ id: 462 }).one() %}
{% set sampleimage = craft.assets({ id: 463 }).one() %}
{% set watermarkedImage = craft.imager.transformImage(sampleimage, {
width: 800,
watermark: { image: logo, width: 303, height: 84, position: { right: 30, bottom: 30 }, opacity: 0.3, blendMode: 'multiply' }
}) %}
<div>
<h2>デフォルト</h2>
<img src="{{ craft.assets({ id: 463 }).one().url}}" alt="">
</div>
<div>
<h2>加工済み</h2>
<img src="{{ watermarkedImage.url}}" alt="">
</div>id 462 の画像がwatermark用にアップしておいた画像。
id 463 はテスト用にアップした画像。
こんな感じでwatermarkが乗っかる。
透過とかオプションがあるんだけど、その辺は Imagick のオプションなので今は適用されず（今は、GD）
期待した感じにはなりそうなきがするなー。
画像決め打ちで行けるということは、Matrixに画像のブロックを用意しておけばそこで選択した画像についてはwatermarkをつけるということができる。
もちろん画像用のフィールドを使っている時も行けるはず。
Redactor での画像に適用したい場合どうするか？
セクション内のエントリすべて、とか、 Redactor で使う画像全てにwatermarkを適用する、となると何かしら処理が必要そう。
その辺はプラグインを書くなりするとか、それこそCDN側に機能を寄せるとか。
後は出力時に処理するとかになりそうだけど。
結局全部のファイルを対象にしてしまうと楽な面もあるのかもしれないけど例外をつけるのが難しくなると思うのでその辺は使い方次第だろうなぁ。
せめて Redactor で画像を挿入するときには画像の変形（transform）を選べるわけだからそこのオプションにwatermarkを入れるということが会ってもいい気がする。
Image transform in a plugin - Craft CMS Stack Exchange
https://craftcms.stackexchange...
superbigco/craft-imagerpretransform: Pretransform Assets on save with Imager
https://github.com/superbigco/...
とかが参考になるんだろうか。
その辺はなにかプラグイン作るなりでできないかな。
似たような話としては @BUN に教えてもらった Glide を使うという方法のプラグインもあるっぽい。
Glide for Craft
https://plugins.craftcms.com/g...
これはこれで後で試してみよう。
watermark 自体はさっきの ImageOptimize に request 自体はでてるけどまだまだ先だろうな。
[FR] Request for watermark support · Issue #26 · nystudio107/craft-imageoptimize
https://github.com/nystudio107...
似たような Watermarkの話はこの辺。
Craft CMS — Create custom share images with your company logo
https://medium.com/webdevs/cra...
Imagix 関係で見つけたのはこの辺
sjelfull/craft3-imgix: Use Imgix with Craft
https://github.com/sjelfull/cr...