技術資料

Movable Typeでカスタムフィールド画像を直接表示する方法—サムネイル画像とリンク処理の使い方

作成日:2011.04.27

Movable Typeのカスタムフィールドで画像を設定した場合、通常は画像へのリンクが表示されてしまいます。この記事では、テンプレートタグを使用して画像を直接表示する方法を紹介します。サムネイル画像を表示する方法や、サイズを変更するためのモディファイアの使い方を具体的なコードと共に解説します。また、リンクを解除して画像だけを表示する方法も説明しています。

error この記事は最終更新日から13年以上が経過しています。

Movable Type のカスタムフィールド機能で、フィールドの種類を「画像」にした場合、テンプレート内で、自分でカスタムフィールドに設定したテンプレートタグを書いても、そのまま画像は表示されず、その画像へのリンクが出力されてしまいます。

画像へのリンクではなく、直接画像を表示したい場合は、以下のように指定します。
※以下、カスタムフィールドに指定したテンプレートタグが <MTEntryImage> という仮定での記述です。

<MTEntryImageAsset>
<$MTAssetThumbnailLink$>
</MTEntryImageAsset>

上記のように、「設定したテンプレートタグ+Asset」というタグ内で「MTAssetThumbnailLink」を使用することで、カスタムフィールド画像のサムネイルが出力され、さらにアップロードした画像そのものにリンクします。

サムネイル画像のサイズを変更したい場合は、以下のモディファイアを使用します。

<!-- サムネイル画像の最大横幅を100pxに指定 -->
<$MTAssetThumbnailLink width="100"$>

<!-- サムネイル画像の最大縦幅を100pxに指定 -->
<$MTAssetThumbnailLink height="100"$>

<!-- サムネイル画像を実際の画像の50%の大きさに指定 -->
<$MTAssetThumbnailLink scale="50"$>

なお、前述の通り MTAssetThumbnailLink では、「サムネイル画像の出力」と「元画像へのリンク」の二つを自動的にやってしまいます。

画像の出力だけがしたい(元画像へのリンクは要らない)という場合は、MTAssetThumbnailURL というテンプレートタグを使用できます。
こちらは、サムネイル画像のURLのみを出力するためのテンプレートタグです。

<MTEntryImageAsset>
<img src="<$MTAssetThumbnailURL$>" />
</MTEntryImageAsset>

このように書けば、サムネイル画像だけを出力できます。

ちなみに、MTAssetThumbnailURL タグにも、width、height、scale のモディファイアが使用可能なので、サムネイル画像のサイズ調整も行なえます。

この記事を書いた人

※上が私です。

奈良市を拠点に、25年以上の経験を持つフリーランスWebエンジニア、阿部辰也です。

これまで、ECサイトのバックエンド開発や業務効率化システム、公共施設の予約システムなど、多彩なプロジェクトを手がけ、企業様や制作会社様のパートナーとして信頼を築いてまいりました。

【制作会社・企業様向けサポート】
  • 専任エンジニアのいない企業様に対するシステム面の不安を解消
  • 柔軟な契約形態や短納期での対応により、急なニーズにも迅速にサポート
  • システムの企画段階から運用まで、ワンストップでのサービスを提供

Webシステムの開発やサイト改善でお困りの際は、どうぞお気軽にご相談ください。小さな疑問から大規模プロジェクトまで、最適なご提案を心を込めてさせていただきます。

ぜひ、プロフィールWeb制作会社様向け業務案内一般企業様向け業務案内もご覧くださいね。

Movable Typeプラグイン入門:MT::Author で実現するロール付与の手法

2025.03.26

本記事では、Movable Type のプラグイン開発において、MT::Author オブジェクトを利用したユーザーへのロール付与手法を詳しく解説します。具体的なコード例とともに、ユーザー、ブログ、ロールの各オブジェクトの取得方法や、add_role メソッドを活用したロール付与処理の流れを紹介。実務に直結する実装ポイントを分かりやすく解説しています。

Movable Type Perl

Movable Typeプラグイン入門:MT::Authorを活用した新規ユーザー作成の実例解説

2025.03.21

本記事では、Movable Typeプラグインの実装において、MT::Authorオブジェクトを活用したユーザーの新規作成処理の具体例を解説します。コードサンプルを通して、ユーザーの存在確認から新規作成、各種プロパティの設定手順やログ出力まで、実践的なポイントを詳述しています。

Movable Type Perl

Movable Typeプラグイン開発入門:第七回 Transformerプラグインで管理画面UIをカスタマイズする

2025.03.19

この記事では、Movable Type 管理画面の見た目を変更するために、Transformerプラグインで設定フォームをカスタマイズする方法を解説しています。具体的な文字列置換の実装例と、実運用時に考慮すべきポイントをわかりやすくまとめています。

Movable Type Perl

Movable Typeプラグイン開発入門:第六回 ローカライゼーションの実装方法

2025.03.13

第六回では、Movable Typeプラグインのローカライゼーションに焦点を当て、多言語対応の具体的な手法を紹介します。多言語対応の実装方法を学び、プラグインの利用者層を広げましょう。

Movable Type Perl

阿部辰也へのお仕事の依頼・お問い合わせ

軽いご相談もお気軽にどうぞ!

個人情報の取り扱いについて *必須 プライバシーポリシーをご確認いただき、同意いただける場合は「同意する」にチェックをしてください。

keyboard_double_arrow_up
TOP