2009.08.12

Movable Type : MT4/MT5: ポップアップ画像のカスタマイズ

leonids2001-01.jpg

Movable Type 4 のポップアップ画像表示をカスタマイズしてみましたので、方法を紹介します。上のサンプル画像は、私が撮影した2001年のしし座流星群の大出現。

なお、Movable Type 5 の場合でも同様です。

カスタマイズしたのは、オリジナルでは以下の点が不満だったからです。

  • ポップアップウインドウのスクロールバー表示が非表示であり、大きい画像の表示に不適。ポップアップウインドウのウインドウサイズが変更できないのも不便。
  • ポップアップウィンドウからブログトップへのリンクが無く、ポップアップ画像用のHTMLへの直アクセスがあった場合、ブログトップにアクセスしてもらうのが難しい。
  • せっかく画像アップロードの際に画像の説明が入力できるのに、それが活かされていない。

よって、以下の改変を施してみました。

  • ポップアップウィンドウをフルスクリーンで表示させるようにし、大きい画像がより楽しめるように。もちろん、スクロールバー表示とウィンドウサイズ変更は許可。
  • 画像クリックでポップアップウィンドウを閉じるように。画面いっぱいで見たら、さくっと閉じれてさくっと次の画像が見れる。
  • ポップアップウィンドウからブログトップへのリンクを設けた。
  • 画像の説明をサムネイル画像のimgタグのtitle要素に入れた。

FireFox 3 と IE8 では希望通りの動作が得られることを確認済みです。

テスト用のサンプルは冒頭の画像に加えて、多数の画像をさくさく見てもらう場合のサンプルとして、次の記事も楽しんで頂ければ。

以下、改変方法の説明。

※このページの記載内容を試した結果、何らかの損害等を被っても筆者は一切責任を負えません。自己責任でお試し下さい。

Image.pm の改変

mt\lib\MT\Asset にある Image.pm というファイルをテキストエディタで開き、下記の通り改変します。改変箇所は4箇所あります。改変前に、元ファイルをバックアップしておきましょう。

なお、これは Movable Type 4.24 の場合の例です。異なるバージョンの場合、Image.pm の内容が異なる可能性がありますのでご注意下さい。なお、Movable Type 5.0 の場合、行番号は違いますが、同じ変更でいけました。

1ヶ所目: 307行目~ ポップアップモードのサムネイル画像表示用のimgタグ

改変前
              ? sprintf(
                '<img src="%s" %s alt="%s" %s />',
                MT::Util::encode_html( $thumb->url ),   $dimensions,
                MT::Util::encode_html( $asset->label ), $wrap_style
              )
改変後
              ? sprintf(
                '<img src="%s" %s alt="%s" title="%s" %s />',
                MT::Util::encode_html( $thumb->url ),
                $dimensions,
                MT::Util::encode_html( $asset->label ),
                MT::Util::encode_html( $asset->description ),
                $wrap_style
              )

サムネイル画像のimgタグtitle要素画像の説明 (画像をアップロードする際に入力した奴) を入れます。title要素の内容は、サムネイル画像にマウスカーソルを合わせた際にポップアップ表示されます。

2ヶ所目: 313行目~ ポップアップ画像表示用のリンク

改変前
            $text = sprintf(
q|<a href="%s" onclick="window.open('%s','popup','width=%d,height=%d,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">%s</a>|,
                MT::Util::encode_html( $popup->url ),
                MT::Util::encode_html( $popup->url ),
                $asset->image_width,
                $asset->image_height,
                $link,
            );
改変後
            $text = sprintf(
q|<a href="%s" target="_blank" onclick="window.open('%s','popup','width='+window.screen.availWidth+',height='+window.screen.availHeight+',scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=no'); return false">%s</a>|,
                MT::Util::encode_html( $popup->url ),
                MT::Util::encode_html( $popup->url ),
                $link,
            );

画像サイズを問わず、ポップアップ画像を常にフルスクリーン表示させます。フルスクリーンと言っても、ウインドウ枠やタイトルバー表示の無いキオスクモードではなく、単にウィンドウサイズを画面いっぱいにするだけです。window.screen.availWidth, window.screen.availHeight を用いることにより、タスクバー等に重ならないようにサイズ調整されます。画面に入りきらないような大きい画像にも対応するため、スクロールバー表示は許可。ウインドウサイズの変更も許可。

改変前にある left=0,top=0 は削除。フルスクリーン表示させる場合、1画面環境ではこの有無は結果に差がありませんが、2画面以上の環境の場合は、これがあるとポップアップ画像が常に一番左側のモニタに表示されてしまうので好ましくないです。これを削ると、2画面以上の環境では、親ウインドウがある画面上でフルスクリーン表示されます。

JavaScript OFF の場合は、単純に新規ウィンドウで開きます。新規ウィンドウで表示させるため、target="blank" を追加してあります。

3ヶ所目: 324行目~ サムネイル画像クリックでポップアップなしで画像にリンクするモードのimgタグ

改変前
                $text = sprintf(
                    '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
                    MT::Util::encode_html( $asset->url ),
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $thumb->url ),
                    $dimensions,
                    $wrap_style,
                );
改変後
                $text = sprintf(
                    '<a href="%s"><img alt="%s" title="%s" src="%s" %s %s /></a>',
                    MT::Util::encode_html( $asset->url ),
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $asset->description ),
                    MT::Util::encode_html( $thumb->url ),
                    $dimensions,
                    $wrap_style,
                );

一箇所目と同様。

4ヶ所目: 334行目~ サムネイル画像から元画像にリンクしないモードのimgタグ

改変前
                $text = sprintf(
                    '<img alt="%s" src="%s" %s %s />',
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $asset->url ),
                    $dimensions, $wrap_style,
                );
改変後
                $text = sprintf(
                    '<img alt="%s" title="%s" src="%s" %s %s />',
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $asset->description ),
                    MT::Util::encode_html( $asset->url ),
                    $dimensions, $wrap_style,
                );

一箇所目と同様。

以上の改変が完了したら、ファイルを保存し、ウェッブサーバーに上書き転送します。

ポップアップ画像の html ファイル用テンプレートの変更

Movable Type 4 のダッシュボードにログインし、システムメニューからブログを選択してブログ管理画面に移行した後、「デザイン」→「テンプレート」 にアクセスします。システムテンプレートの「ポップアップ画像」をクリックし、内容をまるごと下記に書き換え、保存します。

Movable Type 5 の場合、システムテンプレートは、ブログのテンプレートではなく、ウェブサイトのテンプレートとして配置されていますので注意。変更内容はMT4の場合と同じでOK。

<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta http-equiv="Content-Script-Type" content="text/javascript" />
   <meta http-equiv="Content-Style-Type" content="text/css" />
   <title><mt:blogName encode_html="1" /></title>
</head>
<body bgcolor="#000000" text="#aaaaaa" link="#00aaaa" vlink="#00aaaa" alink="#00fffff" style="margin: 0px; padding: 0px;">
<table style="margin: 0px; padding: 0px; width: 100%; height: 100%;" border=0 cellpadding=0 cellspacing=0><tr><td align="center" valign="middle">
  <script type="text/javascript" language="javascript">
    document.write("<a href='#' onClick='window.close(); return false;'>")
  </script>
  <img src="<mt:imageURL />" width="<mt:imageWidth />" height="<mt:imageHeight />" style="margin: 0;padding: 0;border: 0;" />
  <script type="text/javascript" language="javascript">
    document.write("</a>")
  </script>
  <br />
  <div style="font-size: 12px;">
    <a href="<mt:blogURL />" target="_blank"><mt:blogName encode_html="1" /></a>
    <span id="close_button" style="display: none;"> / <a href="#" onClick="window.close(); return false;">画像クリックで閉じる (Click image to close)</a></span>
  </div>
</td></tr></table>
<script type="text/javascript" language="javascript">
  document.getElementById("close_button").style.display = "inline";
</script>
</body>
</html>

オリジナル冒頭の <!DOCTYPE html... は要削除。これがあると、上下方向の中央寄せができなくなります。

黒バックで上下・左右とも中央寄せで表示させます。画像クリックでポップアップウィンドウを閉じるようにしています。なお、JavaScript が無効な場合に、意味を成さないにも関わらずウインドウ閉じ用のリンクが生きているのは気持ち悪いですので、JavaScript が無効の場合はこのリンクが生成されず、「画像クリックで閉じる」の説明テキストも非表示となります。

ポップアップ画像への直アクセスの場合にブログのトップページに戻ってもらえるように、ブログトップへのリンクを設けています。

色等の指定が固定で、外部のCSSから制御できないのはちょっとかっこ悪いですが、その辺は各自の好みに合わせて改変して下さい。

なお、サムネイル画像とは違い、こちらにはimgタグtitle要素に画像の説明を入れることをしていません。これは Google のイメージ検索等からのポップアップ画像への直リンクを好まないため、あえてそうしています。

以上で完了です。参考になれば幸いです。

※この変更は、変更後にアップロードした画像や記事に対してのみ適用されます。変更前の既存の画像や記事には適用されませんのでご注意下さい。

参考

Categories: Movable Type

Category: Movable Type

Trackbacks

Trackback URL:

コメント(1)

I occasionally question imagine if all of a sudden net vanishes from our everyday life. So what can happen. Will life be exactly like it is now? Cant think it mate the online world is within our viens now just like blood and it is impossible to survive without one.