category

Glide for Craft で画像のリサイズを試してみる #craftcms

2019-08-26

2019-08-21

こちらで試した続きというか、 @BUN に紹介された Glide for Craft を試してみた。

Glide for Craft
https://plugins.craftcms.com/g...

プラグインをインストール。

Set your Local Asset Volume base URL to the following;
https://your-domain.com/path-to-craft/glide/

というふうに設定してほしいということなので、以下のように新たにボリュームを作って対応。

ベースURLの方は最初 @web を使ってたのだけど、うまく行かなかったのでドメインからそのまま。

この辺は .env にかけばいいと教えてもらったので今度試してみる。

ファイルの置き場所も /glide にしてたんだけど、コレ仕組み的には /glide でアクセスしてきた画像を変えたいみたいだったのでファイルシステムのパスは別名（ /glide_source ）にしておいた。

こんな感じのコードで

<div>
<h2>デフォルト</h2>
<img src="{{ craft.assets({ id: 540 }).one().url}}" alt="">
</div>
{% set glideimage = craft.assets({ id: 540 }).one().filename %}
<div>
<h2>Glide 加工済み</h2>
<img src="{{ craft.glide.url(glideimage, { w: 500 }) }}" alt="">
</div>

こんな感じにリサイズされた

出力されたHTMLはこんな感じ

<div>
        <h2>デフォルト</h2>
        <img src="http://bp1-test.craft-demo.mixh.jp/glide/edgawa-hanabi-33_TP_V.jpg" alt="">
      </div>
<div>
        <h2>Glide 加工済み</h2>
        <img src="http://bp1-test.craft-demo.mixh.jp/glide/edgawa-hanabi-33_TP_V.jpg?w=500&amp;s=a1cb4fc86fb3ee166ad57f96620bdbc5" alt="">
      </div>

ウォーターマーク（透かし）も試してみようとおもったのだけど、

Setup - Glide
https://glide.thephpleague.com...

を見ると設定が必要そうで、これの設定は多分

https://github.com/paul-blunde...

この部分ぽいのだけど設定がなさそうなので、ここで終了。

このくらいのリサイズであればアセットの transform の設定をテンプレートでかけば良さそうな気もする。
他にメリットがあるんだろうな、多分。。。