Movable Type 4 で Highslideを利用する Part2

2007年12月 1日 10:24 Maru-J（管理人） | 個別ページ | コメント(0) | トラックバック(2)

以前、Movable Type 4 で Highslideを利用する方法をこちらのエントリーで記述しました。

画像挿入後に「Highslide JS」用のアトリビュート（タグ）を、いちいち手作業で挿入しなければならないため、とても手間が掛かると思います。

そこでMovable Type（ムーバルタイプ）の画像（ファイルのアップロード）挿入作業にて、Highslide JS用のアトリビュート（タグ）を自動で、吐き出すようにカスタマイズする方法の紹介です。

Movable Type 4 で Highslideを利用するで紹介したように、「Highslide JS」を動作させるには、下記のようなHTML生成（アトリビュートの変更・追加）が必要となります。

まずは、おさらいから。

1ページに複数の画像を表示し、画像にキャプション（タイトル）を表示する場合のHighslide JS基本タグ

<a href="1枚目の画像ファイルのURL" id="thumb1" class="highslide" onclick="return hs.expand(this)">
<img src="1枚目のサムネイル画像のURL" alt="..." /></a>
<div class="highslide-caption" id="caption-for-thumb1"><p>1枚目のタイトル</p></div>

<a href="2枚目の画像ファイルのURL" id="thumb2" class="highslide" onclick="return hs.expand(this)">
<img src="2枚目のサムネイル画像のURL" alt="..." /></a>
<div class="highslide-caption" id="caption-for-thumb2"><p>2枚目のタイトル</p></div>

でしたね。

Movable Type 4 での埋め込み画像 HTML生成タグは、下記のようになっています。

上記のタグを以下のようにHTMLコードが生成されるように変更しなければなりません。

<a href="1枚目の画像ファイルのURL" id="1枚目の画像ファイル名" class="highslide" onclick="return hs.expand(this)">
<img src="1枚目のサムネイル画像のURL" alt="1枚目の画像埋め込み時に指定したラベル" /></a>
<div class="highslide-caption" id="caption-for-1枚目の画像ファイル名"><p>1枚目の画像埋め込み時に指定したラベル</p></div>

<a href="2枚目の画像ファイルのURL" id="2枚目の画像ファイル名" class="highslide" onclick="return hs.expand(this)">
<img src="2枚目のサムネイル画像のURL" alt="2枚目の画像埋め込み時に指定したラベル" /></a>
<div class="highslide-caption" id="caption-for-2枚目の画像ファイル名"><p>2枚目の画像埋め込み時に指定したラベル</p></div>

埋め込み画像生成ファイルPerlスクリプト

Movable Type 4 では、「lib」フォルダ＞「MT」フォルダ＞「asset」フォルダ＞image.pm　ファイルの中にあります。

今回のカスタマイズの概要です。

デフォルトで生成されるコードをHighslide JS用のアトリビュート（属性）で生成されるように生成HTMLの変更
イメージのidセレクタ名の生成（重複防止のため、新規ファイル名を生成するようにする）を画像ファイル名が表示されるようにします。「ファイル名.画像形式」表示はidを認識してくれませんので、"."（ドット）を"_"（アンダーバー）に置き換えるようにします。

image.pmファイルを修正する前に、必ずバックアップを取っておいてください。

修正ミスにより、mt4自体が動作しなくなる可能性があります。

動作しなくなった場合、バックアップファイルを戻す事により、元通りに動作するようになります。

動作しなくなった場合、当方では一切関知しませんので、自己責任でお願いします！

image.pmファイル修正

埋め込み画像（サムネイルを利用）HTML生成は、sub as_htmlになるようです。

デフォルトでは、下記のようになっています。

if ( $param->{thumb} )
    $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,

上記コードを、下記のように変更します。

if ( $param->{thumb} )
    $text = sprintf(
        '<a class="highslide" onkeypress="return hs.expand(this)" id="%s" onclick="return hs.expand(this)" href="%s">
        <img alt="%s" src="%s" %s %s/></a>
        <div class="highslide-caption" id="caption-for-%s">
        <center><p><b>%s</b></p></center></div></p>',
        $myalt,
        MT::Util::encode_html( $asset->url ),
        MT::Util::encode_html( $asset->label ),
        MT::Util::encode_html( $thumb->url ),
        $dimensions,
        $wrap_style,
        $myalt,
        MT::Util::encode_html( $asset->label ),

各img画像とキャプションのid指定に新規で$myaltを設定しています。

$myalt設定

新規に$myaltを設定し、"."（ドット）を"_"（アンダーバー）に置き換えて生成されるようにします。

例えば、「071201.JPG」のファイル名は、「071201_JPG」といったように"."（ドット）を"_"（アンダーバー）に置き換えたid名に変換されるように設定します。

sub as_html直下に下記のコードがあります。

my $asset   = shift;
    my ($param) = @_;
    my $text    = '';
    if ( $param->{include} ) {
        my $fname = $asset->file_name;　　　　　
        require MT::Util;

上記コード直下に、下記のコードを追加します。

        my $mytemp = $fname;
        $mytemp =~ s|\.|\_|;
        my $myalt = $mytemp;

上記のコードの追加で$myaltは、$fnameで生成されるコードにおいて、"."（ドット）を"_"（アンダーバー）に置き換えて生成するように設定しています。

上記で設定の変更は終了です。変更したimage.pmファイルをブログのシステムの中にアップロードします。

これで設定完了です。