カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン

カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン

Posted at January 17,2008 1:55 AM
Tag:[MovableType, Plugin]

Movable Type 4.1 で追加されたカスタムフィールドで、アップロード画像をサムネイル表示するプラグインを紹介します。

2008.09.17 Movable Type 4.2 対応のバージョンを公開しました。

2008.01.22 カスタムフィールドによるアップロード画像をサムネイルで表示するプラグイン 0.02を公開しました。

このプラグインを作成した理由は、カスタムフィールドの種類で「画像」を選択すると、画像をアップロードできるようになりますが、アップロード後の表示が「表示」というリンクのみで、どのような画像をアップロードしたか分かりません(下)。

そこで、アップロード後の画像をサムネイルにして表示できるように改良してみました。このプラグインを利用すればアップロードした画像(GIF/JPG/PNG)を JavaScript でサムネイル表示できます(下)。

仕組みは「表示」というテキストリンクを、JavaScript で img 要素に置き換えているだけです(が、かなりてこずりました...)。画像幅が 200px 以上であれば画像をサムネイル表示します。

動作は、ブログ記事にひとつだけのカスタムフィールド(画像)を作り、画像選択時と、保存時に表示されることを確認しています。あまりデバグできていませんので、不具合ありましたらご連絡ください。

1.プラグインのダウンロード

下記のリンクをクリックしてプラグインをダウンロードします。

VisibleCustomFieldImage.zip

プラグイン開発やサポート等にご支援・ご賛同くださる方からの寄付をお待ち申し上げます。

上記の「寄付」のリンクをクリックすると Paypal によるお支払いページにジャンプします。

2.プラグインのアップロード

ダウンロードした VisibleCustomFieldImage.zip を解凍して、中にある VisibleCustomFieldImage.pl を plugins ディレクトリにアップロードします。「VisibleCustomFieldImage.pl」が表示されればOKです。

3.使い方

カスタムフィールドによる画像選択方法は変更ありませんが、一応手順を記しておきます。

カスタムフィールドの「imageを選択」をクリック。

画像を選択、または新規画像をアップロードして「次へ」をクリック。

「完了」をクリック。

これでアップロードされた画像がサムネイル表示されます。画像は元画像へのリンクを設定してますので、クリックすると元画像を表示します。

「表示」というリンクの時もそうですが、ブログ記事等を保存前にリンクをクリックして元画像を表示させた後、前の画面に戻ると、アップロード履歴が消えてしまいます。したがって HighSlide JS 等でサムネイルを拡大させる方がいいかもしれません。

4.サムネイル画像のサイズ

サムネイル画像のデフォルトサイズは幅200pxにしています。ソースコードが分かる人は、下記の行を変更すればデフォルトサイズを変更できます。

var def_width = 200;

サムネイル画像のデフォルトサイズ指定等は別途機能追加したいと思います。

5.ライセンス

MTOSにはカスタムフィールドはありませんが、先のことを考えてデュアルライセンスにしておきます。

5.1 MT4.1個人ライセンス/MT4.1商用ライセンスと組み合わせる場合

  • 無料で利用できます。
  • 改変・再配布は自由ですが、改変して再配布する場合、原作者のクレジットを必ず残してください。

5.2 MTOSと組み合わせる場合

  • 無料で利用できます。
  • GPLv2に従います。

2008.02.17
0.03 にバージョンアップしました。

関連記事
zenback
人気エントリー
トラックバックURL


コメント

はじめまして。

カスタムフィールドを入れたはいいものの、
純粋に画像を表示させるのに悩んでいました。

すばらしいプラグインをありがとうございます。
ぜひ活用させていただければと思います。

ただ、わたしの環境がCoreserverなのですが、
プラグインを入れると、script errorが出てしまいます。

これはサーバーの仕様によるものなのでしょうか。
お時間ありましたら、ご教授いただけますと幸いです。

よろしくお願いいたします。

[1] Posted by kageyama : February 7, 2008 12:18 AM

>kageyamaさん
こんばんは。
Coreserverでのscript errorはどの画面で発生していますでしょうか。
もう少し詳細な情報を頂けると幸いです。
それではよろしくお願い致します。

[2] Posted by yujiro logo : February 14, 2008 11:35 PM

すみません。説明不足でした・・・。

mt管理画面へアクセスすると、script errorが出て、
すべて正常に表示されなくなってしまいます。

FTPでプラグインをアップした瞬間から
このような現象になります。

以上、よろしくお願いいたします。

[3] Posted by kageyama : February 15, 2008 8:03 PM

>kageyamaさん
こんばんは。
ご指摘ありがとうございました。
またご迷惑おかけして申し訳ありません。
プラグインを0.03にバージョンアップしましたのでお試しください。
それではよろしくお願い致します。

[4] Posted by yujiro logo : February 17, 2008 1:44 AM

大変遅くなりました。

0.03バージョン使わせていただきました!

素晴らしいプラグインをありがとうございます!

[5] Posted by kageyama : April 4, 2008 12:01 PM

>kageyamaさん
こんにちは。
ご連絡ありがとうございました。
ではでは!

[6] Posted by yujiro logo : April 4, 2008 4:21 PM
コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)