PowerCMS X ブログ
2023-12-16
※ ここで紹介する機能の一部は次のリリースで追加されるものを含みます。
<mt:assetthumbnailurl>タグは width, height, square, scale などの属性を指定してサムネイル用の画像を生成するタグです。
PowerCMS Xの<mt:assetthumbnailurl> タグはPowerCMSの <mt:assetthumbnailurl>と違い、「アセット」モデル以外のモデルに添付されたバイナリ型のカラムに添付された画像に対しても利用できる点が違います。
最近、必要があって機能を強化したので、この記事で纏めることにします。
タグ | 説明 | タグ属性 |
---|---|---|
<mt:assetthumbnailurl />
PTTags
|
バイナリカラムにアップロードされたファイルが画像の場合にサムネイルのURLを表示します。 |
|
例えば「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">
keep_aspect属性を指定することで実現できます。widthと heightを指定してサムネイルを作成する時はみ出した部分はカットして比率を維持したサムネイルを作成します。
<mt:assetthumbnailurl width="800" height="450" keep_aspect>
ここからが本題です。アスペクト比 16:9でサムネイル用画像を作成したい、という要望があったのです。keep_aspect属性を指定すれば、実現できます。
<mt:assetthumbnailurl width="800" height="450" keep_aspect>
ただ、「偉い人の頭が切れたら担当者の首が飛ぶ!」というお話がありまして...
そこで、新たにaspect属性を追加しました。aspect="16x9" aspect="16:9"のように指定します。生成されたサムネイルと共に使い方をご紹介します。
<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> // と同じ
<mt:assetthumbnailurl width="800" aspect="16x9" fit="#cccccc">
上下にグレーの余白ができて、16:9に収まっています。
<mt:assetthumbnailurl width="800" aspect="16x9" fit>
fit="#cccccc" とせずに属性を省略しました。わかりやすいように枠線を指定しています。左右に余白ができ、余白は透過となります。
カテゴリー:テンプレート作成Tips
投稿者:Junnama Noda