プロフィール画像の表示を便利に行うテンプレートモジュール

Taichi Kaminogoya 2007年12月21日

Movable Type 4.1 より追加された、プロフィール画像機能を利用すれば、ブログ記事の作成者や、コメントの投稿者のアイコンを表示することができます。

プロフィール画像を利用する

プロフィール画像を表示するテンプレートは、テンプレートモジュールにしておくと便利です。プロフィール画像を表示するために、何度も同じテンプレートを書く必要がなくなるだけでなく、表示する場所に合わせて、プロフィール画像のサイズを変更するといったことも可能になるからです。また、グローバルテンプレートとして登録しておくことで、同じ Movable Type で管理している全てのブログで共通利用することができます。

表示することができるプロフィール画像には、ブログ記事作成者、コメント投稿者、登録ユーザーの三種類があり、各々テンプレートタグが用意されています。

プロフィール画像に関する MT タグ一覧

作成するテンプレートモジュールは、ブログ記事やコメント、登録ユーザー用のプロフィール画像を表示できるように作成しますが、ブログ記事作成者用部分のテンプレートを利用して、テンプレートの仕組みをみてみましょう。

<div class="userpic">
    <MTIf tag="EntryAuthorUserpicURL">
    <MTIgnore>登録ユーザー (プロフィール画像登録あり)</MTIgnore>
    <MTEntryAuthorUserpicAsset>
    <img alt="" src="<mt:AssetThumbnailURL width="$userpic_size">" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
    </MTEntryAuthorUserpicAsset>
    <MTElse>
    <MTIgnore>登録ユーザー (プロフィール画像登録なし)、未登録ユーザー</MTIgnore>
    <img alt="" src="<mt:StaticWebPath>images/default-userpic-90.jpg" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
    </MTIf>
</div>

MTIf ブロックタグでは、MTEntryAuthorUserpicURL ファンクションタグに値があるかどうかを判別しています。もし、ユーザーがプロフィール画像を設定していれば、プロフィール画像の URL が存在することになりますので、MTEntryAuthorUserpicURL ファンクションタグの値は空ではない。ということになります。この条件に合った場合は、MTEntryAuthorUserpicURL ファンクションタグを利用して、プロフィール画像を表示する処理が行われます。

MTElse ブロックタグでは、MTEntryAuthorUserpicURL ファンクションタグに値が無かった場合、つまり、ユーザーがプロフィール画像を設定していなかった場合に処理するテンプレートタグが書かれています。この例では、プロフィール画像の設定が無い場合、代替となるデフォルトの画像を表示させるためのテンプレートが書かれています。

<MTIf tag="EntryAuthorUserpicURL">
    <!-- プロフィール画像が設定されている場合の処理 -->
<MTElse>
    <!-- プロフィール画像が設定されていない場合の処理 -->
</MTElse>
</MTIf>

また、img 要素で指定する画像のサイズは、作成するテンプレートモジュールを MTInclude ファンクションタグで読み込む際に指定する、userpic_size という変数を参照し設定するようにしています。

<img alt="" src="<mt:AssetThumbnailURL width="$userpic_size">" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />

テンプレートモジュールを読み込む際に、以下のようにします (50px 四方で表示させたい場合)。

<$MTInclude module="モジュール名" userpic_size="50"$>

この MTInclude ファンクションタグに設定した userpic_size という変数の値が、読み込まれるプロフィール画像のサイズとなります。MTInclude タグに変数を指定する方法の詳細は、以下のブログ記事を参照ください。

変数を定義した MTInclude ファンクションタグの活用

どのタイプのプロフィール画像かを選択する

ブログ記事作成者、コメント投稿者、登録ユーザーという三種類のプロフィール画像のなかから、どのタイプのプロフィール画像を表示するのかを選択する仕組みも用意します。こちらも MTInclude ファンクションタグで変数を設定し、選択できるようにします。このサンプルテンプレートを、グローバルテンプレートのテンプレートモジュールに、Userpic という名前で登録します。

<MTIf name="userpic_type" eq="author">
    <MTIgnore>登録ユーザー用</MTIgnore>
    <div class="userpic">
    <MTIf tag="AuthorUserpicURL">
        <MTIgnore>登録ユーザー (プロフィール画像登録あり)</MTIgnore>
        <MTAuthorUserpicAsset>
        <img alt="" src="<mt:AssetThumbnailURL width="$userpic_size">" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
        </MTAuthorUserpicAsset>
    <MTElse>
        <MTIgnore>登録ユーザー (プロフィール画像登録なし)、未登録ユーザー</MTIgnore>
        <img alt="" src="<$MTStaticWebPath$>images/default-userpic-90.jpg" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
    </MTIf>
    </div>

<MTElse name="userpic_type" eq="commenter">
    <MTIgnore>コメンター用</MTIgnore>
    <div class="userpic">
    <MTIf tag="CommenterUserpic">
        <MTIgnore>登録ユーザー (プロフィール画像登録あり)</MTIgnore>
        <MTCommenterUserpicAsset>
        <img alt="" src="<mt:AssetThumbnailURL width="$userpic_size">" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
        </MTCommenterUserpicAsset>
    <MTElse>
        <MTIf tag="CommenterAuthIconURL">
        <MTIgnore>認証コメンター</MTIgnore>
        <img alt="" src="<mt:CommenterAuthIconURL size="logo_small">" />
        <img alt="" src="<mt:StaticWebPath>images/default-userpic-90.jpg" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
        <MTElse>
        <MTIgnore>登録ユーザー (プロフィール画像登録なし)、未登録ユーザー</MTIgnore>
        <img alt="" src="<mt:StaticWebPath>images/default-userpic-90.jpg" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
        </MTIf>
    </MTIf>
    </div>

<MTElse>
    <MTIgnore>登録ユーザー, コメンター以外。つまりブログ記事</MTIgnore>
    <div class="userpic">
        <MTIf tag="EntryAuthorUserpicURL">
        <MTIgnore>登録ユーザー (プロフィール画像登録あり)</MTIgnore>
        <MTEntryAuthorUserpicAsset>
        <img alt="" src="<mt:AssetThumbnailURL width="$userpic_size">" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
        </MTEntryAuthorUserpicAsset>
        <MTElse>
        <MTIgnore>登録ユーザー (プロフィール画像登録なし)、未登録ユーザー</MTIgnore>
        <img alt="" src="<mt:StaticWebPath>images/default-userpic-90.jpg" width="<mt:Var name="userpic_size">" height="<mt:Var name="userpic_size">" />
        </MTIf>
    </div>
</MTIf>

プロフィール画像の種類を選択する仕組みにも、MTInclude ファンクションタグに設定する変数の値を利用して、条件分岐を行います。この部分のテンプレートだけを抜き出してみます。

<MTIf name="userpic_type" eq="author">
    <!-- 登録ユーザー用 MTInclude ファンクションタグで userpic_type="author" とした場合の処理 -->
<MTElse name="userpic_type" eq="commenter">
    <!-- コメント投稿者用 MTInclude ファンクションタグで userpic_type="commenter" とした場合の処理 -->
<MTElse>
    <!-- それ以外 (この場合、ブログ記事作成者用) MTInclude ファンクションタグで userpic_type 変数未設定の場合の処理 -->
</MTIf>

このサンプルテンプレートの使用方法は、MTEntries, MTComments, MTAuthors 各のコンテキスト内で、MTInclude ファンクションタグで上のテンプレートモジュールを読み込む際に、画像のサイズ (userpic_size) と、プロフィール画像の種類 (userpic_type) を各々指定するだけです。例えば、ブログ記事作成者のプロフィール画像を 35px 四方で表示させたい場合は、以下のようにします。

<MTEntries>
...
<$MTInclude module="Userpic" userpic_size="35"$>
...
</MTEntries>

また、コメント投稿者のプロフィール画像を 75px 四方で表示させたい場合は、以下のようにします。

<MTComments>
...
<$MTInclude module="Userpic" userpic_size="75" userpic_type="commenter"$>
...
</MTComments>

テンプレートモジュールを読み込む際に変数を設定し、その変数を利用して有効とするテンプレートや、出力する結果を変更することで柔軟なテンプレートの作成が可能になりました。この記事で紹介したサンプルは、以下よりダウンロード可能ですので、実際に利用して動作や仕組みを確認ください。

サンプルテンプレートのダウンロード

CMSプラットフォーム Movable Type
ドキュメントサイト

Blogブログ

プロフィール画像の表示を便利に行うテンプレートモジュール

どのタイプのプロフィール画像かを選択する