MovableTypeの強力な画像管理機能を使ったtips

これを書いているのは、民主が大勝して逢坂議員が「当選確実なう」とpostする歴史的な日だったりするのですが、ここはカスタマイズ職人のブログです。
なので、今日も空気を読まずにカスタマイズのお話など。

MovableTypeは、記事中に画像などの「アイテム」をアップロードして貼り付けると、アイテムに関する詳しい情報も記録されるようになります。
これは、ブログ全体であれば<mt:Assets>、エントリー中であれば<mt:EntryAssets>で呼び出すことができます。& lt;/p>

WordPressにも近い機能があるのですが、

• アイテムにエントリーとは別個の「タグ」を付けられる
• テンプレート側でサムネイルのサイズを細かく指定できる
• アップした元ファイルと生成されたサムネイル・ポップアップが別ディレクトリで保管される

という点でMovableTypeは優れています。
（WordPressのように正方形にトリミングできないのが残念ですが）
写真・イラスト中心の個性的なサイトを作るのに力を発揮するでしょう。

追記：2009年9月25日
<$mt:AssetThumbnailURL$>にsquare="1"を加えると正方形にトリミングできます。はてブにコメントくれたaklaswadさんありがとうございます！

<mt:Assets>の強力な機能を使ったtipsをご紹介します。

タイプが「画像」のアイテムを表示する

まずは基本的な使い方です。

<mt:Ignore>タイプが「画像」と判断されたアイテムのみ5点リストアップ</mt:Ignore><br /> <mt:Assets type="image" lastn="5"></p> <p><img decoding="async" src="<$mt:AssetThumbnailURL width="200" height="150"$>” /></p> <p></mt:Assets>

<mt:Assets>は、lastnモディファイアで出力される数、typeモディファイアで出力するアイテムの種類を固定できます。
typeをimageとしておくことで、もし動画やPDFが混じっていても確実にサムネイルを出すことができます。

また、サムネイルを出力する<$mt:AssetThumbnailURL$>にwidthと heightモディファイアを指定しておくと、サムネイルはその値を超えないサイズで生成されます。

特定のタグが付けられた画像をリンク・alt付きで表示する

<mt:Ignore>「bbb」タグが付けられた画像のみ元画像へのリンクつきで5点リストアップ</mt:Ignore><br /> <mt:Assets type="image" tag="bbb" lastn="5"></p> <p><a href="<$mt:AssetURL$>” title=”<$mt:AssetProperty property="description"$>” target=”_blank”><img decoding="async" src="<$mt:AssetThumbnailURL width="200" height="150"$>” alt=”<$mt:AssetProperty property="description"$>” /></a></p> <p></mt:Assets>

<mt:Assets>にtagモディファイアを付けると、その値のタグが付いているアイテムのみリストアップします。対象はアップロードしたときに付けるアイテムのタグであって、エントリーのタグではありません。

記事中に何枚か貼ったアイテムのうち、タグを付けた画像のみを一覧にサムネイル表示することもできます。

<$mt:AssetProperty$>はpropertyモディファイアの値によって、説明文・ファイルサイズ・縦横サイズ等を取得できます。
アップロード時に入力した説明文を代替テキストにすると、よりアクセシビリティを考慮したHTMLソースを生成でき、jQueryのギャラリー生成ライブラリとの連動もしやすくなります。

<$mt:AssetProperty$>をうまく利用すると、MTOSでも正式版のカスタムフィールドのような拡張が可能なのです。

特定サイズ以下の画像はサムネイルを生成しない

<mt:Ignore>200×150ピクセル以下の画像は原版、それ以上はサムネイルで5点リストアップ& lt;/mt:Ignore><br /> <mt:Assets type="image" lastn="5"><br /> <mt:SetVarBlock name="img_width"><$mt:AssetProperty property="image_width"$></mt:SetVarBlock><br /> <mt:SetVarBlock name="img_height"><$mt:AssetProperty property="image_height"$></mt:SetVarBlock></p> <p> <mt:If name="img_width" le="200"><br /> <mt:If name="img_height" le="150"><br /> <img decoding="async" src="<$mt:AssetURL$>” width=”<$mt:AssetProperty property="image_width"$>” height=”<$mt:AssetProperty property="image_height"$>” alt=”<$mt:AssetProperty property="description"$>” /><br /> <mt:Else><br /> <img decoding="async" src="<$mt:AssetThumbnailURL width="200" height="150"$>” alt=”<$mt:AssetProperty property="description"$>” /><br /> </mt:if><br /> <mt:Else><br /> <img decoding="async" src="<$mt:AssetThumbnailURL width="200" height="150"$>” alt=”<$mt:AssetProperty property="description"$>” /><br /> </mt:if> </p> <p></mt:Assets>

サムネイルを生成する<$mt:AssetThumbnailURL$>には、欠点があります。
指定したwidth・heightモディファイアよりも小さな画像をアップすると、画像が逆に引き延ばされてしまいます。

もしも小さな画像もアップされる可能性がある場合は、<$mt:AssetProperty$> で取得した「画像の幅」「画像の高さ」を<mt:SetVarBlock>で変数に渡し、想定している最大サイズで二段構えの条件分岐を行う必要があります。

やや複雑にはなってしまいますが、上記のようにするとどんな画像をアップしても適切なサイズで表示されることになります。

PDFファイルだけHTMLを変える

<mt:Ignore>拡張子が「pdf」のファイルのみ表示方法を変えて5点リストアップ</mt:Ignore><br /> <mt:Assets type="file" lastn="5"><br /> <mt:SetVarBlock name="file_ext"><$mt:AssetFileExt$></mt:SetVarBlock><br /> <mt:If name="file_ext" eq="pdf"></p> <p><a href="<$mt:AssetURL$>” target=”_blank” class=”pdf”>PDFファイル(<$mt:AssetProperty property="file_size" format="1"$>)</a></p> <p><mt:Else></p> <p><a href="<$mt:AssetURL$>” target=”_blank”>PDF以外のファイル(<$mt:AssetProperty property="file_size" format="1"$>)</a></p> <p></mt:Else><br /> </mt:If><br /> </mt:Assets>

CMS等でアップロードされるアイテムには、「PDF」や「Excelファイル」「圧縮ファイル」などもあります。
しかし、これらはMovableType内ではどちらも「type="file"」として判断されるので、最初のtipsではPDFだけを判別できません。

この場合は、アイテムの「拡張子」を取得する、<$mt:AssetFileExt$>を利用します。< br />
PDFであれば値は必ず「pdf」になるはずなので、変数に渡して条件分岐を行うことで出力されるHTMLを変えたり、リンクにクラスを付けて、CSSでPDFアイコンを付ける演出を加えることもできます。

このように、ブログシステムに関わらずかなり高度な画像処理ができるMovableTypeですが、肝心のアップロード画面がお粗末です。
初期状態のまま特に意識せずにアップロードすると、サイトルート＝トップページがある場所に画像が保存されてしまいます。

サムネイルの保管先ディレクトリは環境変数で設定できるのですが、アップする画像そのものの保存先は上の画像のポップアップのHTMLを手入力かプラグインで書き換えるしかありません（いい方法があったら教えてください＞＜）。

また、画像関連の独自タグが入るとサムネイル生成処理が必要となるため、分岐が複雑になるとかなり更新処理が遅くなっていきます。

MovableTypeの画像処理機能は、オープンソース版でも使えるにも関わらずかなり便利なので、次バージョンの5で、ぜひこのあたりを改善してほしいものです。

—–
EXTENDED BODY: