小粋空間  -  a cheap joke and a play on words site

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

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

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

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

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

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

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

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

１．プラグインのダウンロード

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

VisibleCustomFieldImage.zip

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

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

２．プラグインのアップロード

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

３．使い方

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

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

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

「完了」をクリック。

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

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

４．サムネイル画像のサイズ

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

var def_width = 200;

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

５．ライセンス

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

５．１ MT4.1個人ライセンス／MT4.1商用ライセンスと組み合わせる場合

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

５．２ MTOSと組み合わせる場合

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

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

• 
• Tweet