これは Craft CMS Advent Calendar 2020 9日目の記事です。

Craft CMS ではテンプレートで指定したサイズよりも小さな画像を登録すると、生成されるサムネイル画像が「強制的に引き伸ばした状態」になってしまいます。もちろん最適化した画像をあらかじめ用意できればよいのですが、リニューアル時に既存コンテンツからデータを流用する場合など、難しいときもあるでしょう。

そこで、元画像が一定サイズ以上のときだけサムネイル画像を生成する方法について、ご紹介します。

はじめに

Craft CMS でアセットを取得するには、次のようなコードを定義します。

{% set entryImage = entry.image.one() %}

ここでは変数 entry でアクセスできるエントリのフィールドハンドル image にセットされた最初の画像を取得し、変数 entryImage にセットしています。

画像の URL を出力する

アップロードされた元画像の URL をそのまま出力するには、url() を利用します。

{{ entryImage.url() }}

一方、サムネイル画像を取得する場合は getUrl() を利用し、管理画面の 設定 > アセット > 画像変形であらかじめ定義した画像変形のハンドルをセットします。

過去記事の「 【Craft 3 サイト構築の基本】「ニュース」セクションの作成（ブロック設定編） 」で 画像変形 の設定方法をご紹介していますので、そちらも参考にしてみてください。

{{ entryImage.getUrl('thumb') }}

この例では、画像変形のハンドル thumb の設定に基づいて生成されたサムネイル画像の URL が出力されます。

画像のサイズを取得する

アップロードされた元画像のサイズは width または height で取得できます。

{# 元画像の幅 #}
{{ entryImage.width }}

{# 元画像の高さ #}
{{ entryImage.height }}

同様にサムネイル画像のサイズを getWidth() または getHeight() で取得できます。

{# サムネイル画像の幅 #}
{{ entryImage.getWidth('thumb') }}

{# サムネイル画像の高さ #}
{{ entryImage.getHeight('thumb') }}

この例では、画像変形のハンドル thumb の設定に基づいて生成されたサムネイル画像の幅と高さが出力されます。

以上を踏まえて、元画像の幅が一定以上の場合のみサムネイル画像を生成してみましょう。

やってみる

今回は元画像の幅が 1,000px 未満かどうかで分岐させます。

{% if entryImage.width > 1000 %}
  {{ entryImage.getUrl('thumb') }}
{% else %}
  {{ entryImage.url() }}
{% endif %}

三項演算子であれば、次のようになります。

{{ (entryImage.width > 1000) ? entryImage.getUrl('thumb') : entryImage.url() }}

元画像のプロパティを取得する方法やサムネイル画像の生成方法さえ理解していれば他にも応用できると思いますので、ぜひお試しください。