カスタムフィールドでアップロード・選択した画像を出力ページで表示する
カスタムフィールドでは、テキストの入力やドロップダウンメニューだけではなく、画像やアイテムを管理しているアイテムから選択したり、新規にアイテムとしてアップロードすることができるフィールドの追加も行えます。この追加されたフィールドで画像をアップロード・選択しすると、オリジナルファイルへのリンクになりますが、画像の場合はオリジナルファイルへのリンクではなく、画像を表示したい場合がほとんどだと思います。
今回はカスタムフィールドでアップロード・選択した画像を表示するテンプレートのサンプルと解説を行います。
画像・アイテムのフィールドを追加した場合、他のフィールドと同じように、そのフィールドの内容を表示するためのテンプレートタグが追加されますが、このタグを使用すると画像やアイテムのファイルへのリンクが表示されます。
例えばブログ記事作成画面に、テンプレートタグを entryimage と設定した画像フィールドを追加した場合は MTEntryImage というファンクションタグが作成されます。この MTEntryImage ファンクションタグは追加した画像フィールドを使用してブログ記事に追加した画像ファイルへのリンクを出力します。フィールド作成・編集ページに表示される [テンプレートの例] のテンプレートを使用した場合の出力例を見てみましょう。
アイテム (pdf, mp3, txt など) であれば、ファイルへのリンクで問題無いのですが、追加したフィールドは画像フィールドですので、そのフィールドを通して追加されるものは画像です。リンクではなく、アップロードしたものを表示したい場合は、追加したフィールドに設定した [テンプレートタグ] の末尾に Asset を付与したテンプレートタグを利用ます。
さきほどの例で作成した画像フィールドには entryimage というタグを設定しました。この画像フィールドで追加した画像をリンクではなく表示させるには、MTEntryImageAsset というブロックタグを使用します。この末尾に Asset を付与したブロックタグはアイテムのコンテキストとなるので、アイテム関係のテンプレートタグを使用することができます。実際に画像を表示するテンプレートの例をみてみましょう。
ブログ記事に画像フィールドを追加し、そのフィールドに設定したテンプレートタグは entryimage とします。
<MTIf tag="EntryImage">
<MTEntryImageAsset>
<$MTAssetThumbnailLink width="200"$>
</MTEntryImageAsset>
</MTIf><MTIf tag="EntryImage">...</MTIf>-
追加したフィールドに値があるかどうかを判別しています。無い場合は囲まれた内容を処理しません。
MTIfブロックタグでは、tagモディファイアを使用することで、指定したタグに値があるかどうかを判別することができます。これは<MTIfNonEmpty tag="EntryImage">...</MTIfNonEmpty>とするのと同じです。 <MTEntryImageAsset>...</MTEntryImageAsset>-
追加した画像フィールドに設定した entryimage というタグの末尾に Asset を付与したテンプレートタグも、フィールド作成時に用意されています。このブロックタグは追加したアイテムに関する情報を表示する為のもので、様々なアイテムに関するテンプレートタグを使用することができます。
<$MTAssetThumbnailLink width="200"$>-
追加した画像フィールドからブログ記事に追加した画像は、ブログ記事内に画像を設定するときのように、配置やサムネイル作成の設定するのではなく、独自のテンプレート構成でのカスタマイズが可能です。ですので、オリジナルファイルへのリンク付きのサムネイルを作成し、表示する XHTML タグを出力するには
MTAssetThumbnailLinkファンクションタグに、表示する最大横幅を設定するwidthモディファイアを付与し、サムネイルの横幅を指定します。例では 200 と設定しており、これで大きな画像を追加した場合でも、その画像の横幅が200px以上にはなりません。この値やテンプレートの内容は、サイトのデザインに合わせて設定してください。
例のテンプレートをブログ記事の詳細テンプレートモジュールに追加すると、画像が表示されるようになりました。画像は指定した通り幅200pxのサムネイルで表示され、画像をクリックすると元のファイルへを表示します。
