Movable Type 備忘録

 画像を挿入で出力されるタグを Lightbox 対応にする

こんにちわ^^

訪問者さんと「画像を挿入」で出力されるタグを Lightbox2 に対応したものにする･･･というコメントのやりとりをしました。

とりあえず動作確認できたのでご紹介します。
哲やん さん、ありがとう (●＞∀＜●)／

先日、画像を挿入で出力されるタグをカスタマイズでチョビッと触れましたが、mt/lib/MT/Asset/Image.pm をカスタマイズすることで、エントリ編集時の「画像を挿入」で出力されるタグに 「rel="lightbox"」を付加するというものです。

カスタマイズ

  1. まず、Lightbox2 をインストールします。
    インストールに関しては、こちらのサムネイルをLightbox JSで表示してみるを参考にしてください。

  2. 次に mt/lib/MT/Asset/Image.pm を編集します。
    具体的には以下の 2 箇所をカスタマイズします。

    mt/lib/MT/Asset/Image.pm 246 行目

    1. # '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
    2. '<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s /></a>',

    赤い字の行をコメント( # )にして、青い字の行を追加します。
    ここでは「画像を挿入」時にサムネイルを指定した場合の処理を変更しています。

    次にサムネイルを使用しない場合の処理を変更します。

    mt/lib/MT/Asset/Image.pm 256 行目

    1. my $thumb_width = $param->{thumb_width};
    2. my $scale = $asset->image_width / $thumb_width;
    3. $dimensions = sprintf(
    4. 'width="%s" height="%s"',
    5. (( $asset->image_width / $scale, $asset->image_height / $scale ))
    6. );
    7. $text = sprintf(
    8. # '<img alt="%s" src="%s" %s %s/>',
    9. # MT::Util::encode_html( $asset->label ),
    10. # MT::Util::encode_html( $asset->url ),
    11. '<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s /></a>',
    12. MT::Util::encode_html( $asset->url ),
    13. MT::Util::encode_html( $asset->label ),
    14. MT::Util::encode_html( $asset->url ),
    15.     $dimensions, $wrap_style,
    16. );

    赤い字の行をコメント( # )にして、青い字の行を上記のように追加しています。
    サムネイルを使用しない場合、通常では元イメージのサイズで表示されます。
    それでもいいのですが、サムネイル使用時に指定する縮小サイズ入力エリアを流用して、サムネイル画像を作成せずに元イメージサイズを縮小表示するようにしてみました。

    もちろん、元イメージサイズで表示したい場合でも、縮小サイズ入力エリアには元イメージサイズがデフォルトで入力されますので、そのまま変更せずに「完了」ボタンをクリックすれば OK です (￣∇￣)q

  3. 一通り変更したら保存してアップロードすれば完了です。

一応わたしが変更した mt/lib/MT/Asset/Image.pm をサンプルとして置いておきます。参考にしてください (￣∇￣)/

なお、ポップアップウィンドウを使用する場合には、Lightbox2 は対応させていません。

MovableType MEMO のテンプレートをご使用の人で、Lightbox2 を使用したい場合には、インストールした dtree.js を Lightbox2 と競合しないようにカスタマイズする必要があります。
dtree.js についても、わたしがカスタマイズした dtree.js を置いておきます。合わせて参考にしてください。

 Trackback Pings(2)

from Tetsuyan´s Blog

Movable Type 3.xで少し慣れかけていた私には、Movable Ty...

Tracked on September 24, 2007
from MovableType書庫

記事を書いたら早速MovableType4.1の正式版がリリースされましたので、早速アップグレードしました。 画像アップロード時にrel属性を追加（for...

Tracked on January 24, 2008

 Comments(11)

#1: Posted by oscar @ September 24, 2007 [REPLY]
user-pic

ども。
さらに横着な人は、10$払って、BetterFileUploader2.2っていうのも手です。
クリックのみで複数画像を、Lightbox用に出来ます。

アセットがらみは未対応なのですが。

 
#2: Posted by bzbell @ September 24, 2007 [REPLY]
user-pic

>>1 oscar さん

こんにちわ^^

> クリックのみで複数画像を、Lightbox用に出来ます。

おぉ (・o・)!! そぃぅ手もありですね。

> アセットがらみは未対応なのですが。

そうすると、VOX みたいなイメージ一覧が表示できない･･･てことでしょうか (;￣∇￣A
まぁわたしはともかくとして、他の人はどうですかね。

以前、oscar さんとこでご紹介されたとき使ってみたんですけど、うまく動作しなかった!? んで BetterFileUploader プラグインは使ってないんですよ。

今なら大丈夫かな･･･一括して複数のファイルのアップローダーが欲しかったんで試してみます♪

 
#3: Posted by oscar @ September 24, 2007 [REPLY]
user-pic

しつこく登場します。
＞そうすると、VOX みたいなイメージ一覧が表示できない･･･てことでしょうか (;￣∇￣A
残念ながら、そうなりますね。
BFU2.2は、とりあえずBFU2.1forMT3.3と同等の機能を、使えるようにしたって事みたいです。
とりあえず、アセットは良いから、使えるようにしろって要望にこたえたんでしょうか。
アナウンスにはBFU3.0というのが、以前よりあがっているので、おそらくそこで正式対応という事でしょうかね。

 
#4: Posted by 哲やん @ September 24, 2007 [REPLY]
user-pic

bzbellさん、素晴らしいカスタマイズをありがとうございました。
動作も素晴らしいものだと思いました。
自分にはスキルが足りないこともあって、いじれる場所が分からなかったのですが、これでしのぐ事ができそうです。

まだテストしていないのですが、ブログ記事上ではなく、「ウェブページ」にアルバムを作れたらなぁと考えています。

oscar さんご紹介の物も調べてみようと思っています。

 
#5: Posted by bzbell @ September 24, 2007 [REPLY]
user-pic

>>4 哲やん さん

こんばんわ^^

> bzbellさん、素晴らしいカスタマイズをありがとうございました。

どういたしまして (●´∀｀●)
でも、哲やん さんが調べてくださったことに、わたしがただチョビッとアレンジしただけですから♪

> まだテストしていないのですが、ブログ記事上ではなく、「ウェブページ」にアルバムを作れたらなぁと考えています。

いいですねぇ♪それ!!
TRY & ERR でいきましょ♪

> oscar さんご紹介の物も調べてみようと思っています。

ですね。
BetterFileUploader プラグインは有償ですけど、oscar さんは前バージョンからずっと使ってるようですあから、分からないことは聞くといいと思います (￣∇￣)b
いろいろやって、どうしてもダメだったらわたしも聞いちゃいます♪

では、今後ともよろしくですの。

 
#6: Posted by 哲やん @ September 25, 2007 [REPLY]
user-pic

こんにちは。

カスタマイズされたImage.pmをはじめ、Lightbox2関係をちょっとだけいじって「フォトアルバムもどき」を作ってみました。
本来のウェブページの使い方とは違うでしょうけど、画像置き場としては使えるかなぁと・・・

http://tetsuya.s151.xrea.com/album.html

 
#7: Posted by bzbell @ September 25, 2007 [REPLY]
user-pic

>>6 哲やん さん

こんばんわ^^

かっくいぃですぅ ヾ(〃＾∇＾)ノ
フォトアルバム用のテンプレートを新調した方がもっといいかんじそうですね。

わたしもつくってみよっかな♪

 
#8: Posted by Author Profile Page matakichi @ January 22, 2008 [REPLY]
user-pic

bzbellさん、こんばんわ。
matakichiです。

本カスタマイズ、私のブログにも適用いたしました。
私のところでは、小粋空間様で紹介されている「highslide.js」を利用しているんですが、編集ファイル・編集箇所ともに同じで、入力する属性のみ異なるので特に問題はありませんでした。
これでより簡単にサムネイル画像をカッコよく表示できます♪

トラバしたんですが、こちらの管理画面のログでは、トラックバックURLが404Not Foundになってます・・・。
お手数ですが、一度ご確認ください

 
#9: Posted by Author Profile Page bzbell @ January 23, 2008 [REPLY]
user-pic

>>8 matakichi さん

こんばんわ^^

> 編集ファイル・編集箇所ともに同じで、入力する属性のみ異なるので特に問題はありませんでした。

お役に立ててよかったですうぅ～ん
highslide.js はズームがカックいいですね。

ちなみに、わたしの別サイトでは PopBox を使ってます。

そういえば、使い方を記事にしようと思ってそのまま放置プレイしてたよあせあせ

トラックバックは残念ですが届いてないですね。
てか、わたしんとこの問題でした。すいません。

 
#10: Posted by Author Profile Page matakichi @ January 23, 2008 [REPLY]
user-pic

>>9 bzbell さん
PopBox、見てきました。
highslideと似たような動きで、コチラもかっこいいですね！
highslideは、ポップアップした画像がドラッグで移動できたのでヒトメボレしちゃったんです。

画像以外にも、WEBページとかも同様にポップアップできるようので、それでリンク集を作成しようとしていたんですが、検証する時間を作れません・・・。

 
#11: Posted by Author Profile Page bzbell @ January 23, 2008 [REPLY]
user-pic

>>10 matakichi さん

こんにちわ^^

今日の東京は朝から雪です。
シンシンと降ってます。この調子で降り続けるなら電車が止まらないうちに帰る予定の bzbell ですチュ！

> highslideは、ポップアップした画像がドラッグで移動できたのでヒトメボレしちゃったんです。

ですね。
記事を見ながら画像を見れるという点で、わたしもそれは便利だなと思いましたワクワク

> 画像以外にも、WEBページとかも同様にポップアップできるようので、それでリンク集を作成しようとしていたんですが、検証する時間を作れません・・・。

なるほどぉキャハハ
わたしのサイトだったらメールフォームに使ったらいいかもチュ！

 

 Post a Comment

 

コメント用フィード