アスペクト比を指定してサムネイルを生成する

※ ここで紹介する機能の一部は次のリリースで追加されるものを含みます。

<mt:assetthumbnailurl>タグは width, height, square, scale などの属性を指定してサムネイル用の画像を生成するタグです。

PowerCMS Xの<mt:assetthumbnailurl> タグはPowerCMSの <mt:assetthumbnailurl>と違い、「アセット」モデル以外のモデルに添付されたバイナリ型のカラムに添付された画像に対しても利用できる点が違います。

最近、必要があって機能を強化したので、この記事で纏めることにします。

タグ	説明	タグ属性
<mt:assetthumbnailurl /> PTTags	バイナリカラムにアップロードされたファイルが画像の場合にサムネイルのURLを表示します。	name : オブジェクトのカラム名 width : 生成するサムネイルの幅 height : 生成するサムネイルの高さ square : 1をセットすると正方形のサムネイルを生成 scale : 拡大・縮小のパーセンテージ max : 長辺を指定したピクセルに設定したサムネイル画像を生成 extension : サムネイル出力時の拡張子 keep_aspect : widthと heightを指定してサムネイルを作成する時はみ出した部分はカットしてアスペクト比を維持したサムネイルを作成する aspect : 「fit」または「trim」とあわせて指定し、「fit」の時、余白ありトリミングなし、「trim」の時、余白なしトリミングありでアスペクト比を固定した画像を作成(例:'16x9') fit : 「square」または「aspect」とあわせて指定し、1または余白の色をHexColorCode(例 : #fcfcfcなど)で指定(省略時は透過または白) trim : 「aspect」とあわせて指定し、余白なしトリミングありでアスペクト比を固定した画像を作成 properties : 画像のプロパティ(配列)を指定された変数名に割り当てる

画像のプロパティを取得したい

例えば「width="800"」を指定して生成されたサムネイルの高さを取得したい、という要望がありました。オリジナルの画像の値から mathタグやopモディファイアを指定して計算できないことはないのですが、なかなかに面倒です。そこで、properties属性を指定できるようにしました。

<mt:assetthumbnailurl width="800" properties="image_props">
<mt:var name="image_props[image_height]"> // 生成されたサムネイルの高さ

取得できるのは以下のような情報です。

array(11) {
  ["file_size"]=>
  int(19181)
  ["image_width"]=>
  int(800)
  ["image_height"]=>
  int(210)
  ["class"]=>
  string(5) "image"
  ["extension"]=>
  string(3) "jpg"
  ["basename"]=>
  string(16) "thumb-max-800-51"
  ["uploaded"]=>
  string(19) "2023-12-11 09:49:24"
  ["user_id"]=>
  string(1) "1"
  ["mime_type"]=>
  string(10) "image/jpeg"
  ["file_name"]=>
  string(25) "thumb-max-800-51-file.jpg"
  ["label"]=>
  string(8) "青空と東京スカイツリーを下から見上げる"
}

異なるフォーマットのサムネイルを作成したい。

extension属性で指定が可能です。以下の例では、オリジナルが jpegや pngであったとしても webp形式のサムネイルが出力されます。

<mt:assetthumbnailurl width="800" extension="webp">

長辺を指定したピクセルに設定したサムネイル画像を生成したい

max属性で指定が可能です。以下の例では、長辺を 800pxにしてサムネイル用の画像を生成します。

<mt:assetthumbnailurl max="800">

widthとheightを指定してサムネイルを生成する時、画像を歪ませたくない

keep_aspect属性を指定することで実現できます。widthと heightを指定してサムネイルを作成する時はみ出した部分はカットして比率を維持したサムネイルを作成します。

<mt:assetthumbnailurl width="800" height="450" keep_aspect>

アスペクト比16:9を指定してサムネイルを生成したい

ここからが本題です。アスペクト比 16:9でサムネイル用画像を作成したい、という要望があったのです。keep_aspect属性を指定すれば、実現できます。

<mt:assetthumbnailurl width="800" height="450" keep_aspect>

ただ、「偉い人の頭が切れたら担当者の首が飛ぶ!」というお話がありまして...

そこで、新たにaspect属性を追加しました。aspect="16x9" aspect="16:9"のように指定します。生成されたサムネイルと共に使い方をご紹介します。

アスペクト比4:3などの画像の時

<mt:assetthumbnailurl width="800" aspect="16x9" fit="#cccccc">

左右にグレーの余白が出ますが、画像は切れず、16:9のキャンバスにピタッと配置されます。fit="1"または、fit のみ指定した時はPNG/Webpの時は余白は透過、それ以外の時は余白は白となります。

<mt:assetthumbnailurl width="800" aspect="16x9" trim>
<mt:assetthumbnailurl width="800" height="450" keep_aspect> // と同じ

この時、収まらなかった部分はトリミングされます。場合によっては「担当者の首が飛びます!」

<mt:assetthumbnailurl width="800" height="450">

とすると、トリミングはされませんが、画像が歪みます。

縦長の画像の時

<mt:assetthumbnailurl width="800" aspect="16x9" fit="#cccccc">

<mt:assetthumbnailurl width="800" aspect="16x9" trim>
<mt:assetthumbnailurl width="800" height="450" keep_aspect> // と同じ

16:9よりも横長の画像の時

<mt:assetthumbnailurl width="800" aspect="16x9" fit="#cccccc">

上下にグレーの余白ができて、16:9に収まっています。

正方形の画像の時

<mt:assetthumbnailurl width="800" aspect="16x9" fit>

fit="#cccccc" とせずに属性を省略しました。わかりやすいように枠線を指定しています。左右に余白ができ、余白は透過となります。

カテゴリー：テンプレート作成Tips

投稿者：Junnama Noda