Highslide JS用アトリビュート追加-Movable Type（ムーバルタイプ）埋め込み画像カスタマイズ

ファイルアップロードカスタマイズ

今回のカスタマイズは、デフォルトでのファイルアップロードにおいて埋め込み画像のHTML生成ならびに表示タグをカスタマイズしました。

埋め込み画像のHTML生成にてHighslide JS用のアトリビュート（属性）を最初から生成するようにしました。

尚、このエントリーで紹介するカスタマイズを行った場合、デフォルトでの埋め込み画像のHTMLは生成されなくなります。

おことわり：今回のカスタマイズでMTの動作に支障をきたしても当サイトでは責任を負うことはできませんことをご了承願います。また、カスタマイズ前に別名にてデフォルトファイルを保存するようにしてください。最悪動作がおかしくなった場合は、デフォルトファイルをアップロードすることで元の状態に戻ります。

Highslide JS用のアトリビュート（属性）

Highslide JS-サムネール画像を拡大表示するスマートなjavascriptにて紹介しているように、Highslide JSの動作を可能とするには、以下のようなHTML生成（アトリビュートの変更・追加）が必要となります。

Highslide JS基本タグ

<div id="highslide-container"></div>
<a href="イメージ画像ファイルアドレス" class="highslide" onclick="return hs.expand(this)"><img src="イメージ画像ファイルアドレス" alt="Highslide JS" title="この画像をクリックすると拡大表示されます。" width="100" heigh="100" id='任意' /></a>

上記のコードのが基本パターンです。

キャプションを追加して表示したい場合は以下のコードを上部に追加します。

<div class='highslide-caption' id='caption-for-任意'>
<p> 好きなテキストを</p>
</div>

idセレクタにimgタグに指定したセレクタ名を設定する必要があります。

上記のコードの場合、imgタグをid='任意'で指定し、キャプションdivブロックにid='caption-for-任意'で指定してあります。各イメージ毎に並べて表示してキャプション表示をする場合、id指定を個々に揃えて設定する必要があります。

Movable Type（ムーバルタイプ）デフォルトでの埋め込み画像HTML生成タグ

デフォルトで画像【埋め込み】を選択した場合、以下のようなHTMLコードが生成されます。

<a href="画像保存先アドレス"><img alt="画像ファイル名" src="画像保存先アドレス（サムネイル）" width="サムネイル画像幅" height="サムネイル画像縦" /></a>

上記のコードを以下のようなHTMLコードが生成されるように変更します。

<div id="highslide-container"></div><a href="画像保存先アドレス" class="highslide" onclick="return hs.expand(this)"><img alt="画像ファイル名" src="画像保存先アドレス（サムネイル）" width="サムネイル画像幅" height="サムネイル画像縦" id='画像ファイル名' /></a><div class='highslide-caption' id='caption-for-画像ファイル名'><p>caption</p></div>

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

Movable Type（ムーバルタイプ）で埋め込み画像が生成されるスクリプトは、libフォルダ＞MTフォルダ＞Appフォルダ＞CMS.pmファイルの中にあります。

今回のカスタマイズの概要は、以下の通りです。

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

CMS.pmファイル（4686行目）sub _process_post_upload部分

埋め込み画像HTML生成は、CMS.pmファイルの中の4686行目（MT-3.33-ja)のsub _process_post_upload部分となります。

4803行目コード変更

4803行目のコードを変更します。デフォルトの状態でのコードは以下の通りです。

<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>

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

追記修正(2008/2/20)：注意id属性を指定した要素は、同一ページにおいて一つのみと決まりがありますので、複数画像をhislideJSで動作させる場合でも下記のコードは、ページ上のどこかにひとつあれば、正しく作動します。body要素すぐ後にでも追加させるようにするといいかと思います。
<div id="highslide-container"></div>
修正前のコードには、上記のコードも一緒に生成されるようにしていましたが、同一ページに複数画像を表示させる時に同じid属性の要素が複数存在することになりますので下記コードに修正いたしました。

<a href="$url" class="highslide" onclick="return hs.expand(this)"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" id='$fnamealt' /></a><div class='highslide-caption' id='caption-for-$fnamealt'><p>caption</p></div>

各img画像並びにキャプションブロックのid指定に新規で$fnamealtを設定しています。これは、デフォルトでimgのalt属性に$fnameが設定されていますが、この設定を使うと”ファイル名+.ファイル形式”で生成されます（$fnameはファイル名.画像形式）。これではidとして認識してくれません。

新規に$fnamealtを設定し、"."を"_"（アンダーバー）に置き換えて生成されるようにします。例えば、0001.gifのファイル名は、0001_gifといったように"."を"_"（アンダーバー）に置き換えたファイル名に変換されるように設定します。

$fnamealt設定

$fnamealtは、任意の設定名です。お好きな設定名に変更することもできます。

$fnameで設定されているファイル名を変換して生成するために設定します。（"."を"_"[アンダーバー]に置き換えて生成するようにします。）

4691行目に以下のようなコードがあります。

$url = $base_url . '/' . $fname; # no need to re-encode filename; url is already encoded

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

	my $file = $q->param('fname');
	$fname =~ s|\.|\_|;
    my $fnamealt = $fname;

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

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

ftpソフトを使ってlibフォルダ＞MTフォルダ＞Appフォルダ＞CMS.pmファイルに上書きアップロードします。

デフォルトスクリプト（MT-3.33-ja)

一応4686行目からのデフォルトのスクリプトを残しておきます。動作がおかしくなった場合は、修正することで元に戻ります。（4686行目〜4815行目）

+ expand sourceをクリックするとコードが表示されます。

sub _process_post_upload {
    my $app = shift;
    my $q = $app->param;
    my($url, $width, $height) = map $q->param($_), qw( url width height );
    my ($base_url, $fname) = $url =~ m|(.*)/([^/]*)|;
    $url = $base_url . '/' . $fname; # no need to re-encode filename; url is already encoded
    my $blog_id = $q->param('blog_id');
    require MT::Blog;
    my $blog = MT::Blog->load($blog_id, {cached_ok=>1});
    my($thumb, $thumb_width, $thumb_height);
    if ($thumb = $q->param('thumb')) {
        require MT::Image;
        my $base_path = $q->param('site_path') ?
            $blog->site_path : $blog->archive_path;
        my $file = $q->param('fname');
        if ($file =~ m!\.\.|\0|\|!) {
            return $app->error($app->translate("Invalid filename '[_1]'", $file));
        }
        my $i_file = File::Spec->catfile($base_path, $file);
        ## Untaint. We checked $file for security holes above.
        ($i_file) = $i_file =~ /(.+)/s;
        my $fmgr = $blog->file_mgr;
        my $data = $fmgr->get_data($i_file, 'upload')
            or return $app->error($app->translate(
                "Reading '[_1]' failed: [_2]", $i_file, $fmgr->errstr));
        my $image_type = scalar $q->param('image_type');
        my $img = MT::Image->new( Data => $data,
                                  Type => $image_type )
            or return $app->error($app->translate(
                "Thumbnail failed: [_1]", MT::Image->errstr));
        my($w, $h) = map $q->param($_), qw( thumb_width thumb_height );
        (my($blob), $thumb_width, $thumb_height) =
            $img->scale( Width => $w, Height => $h )
            or return $app->error($app->translate("Thumbnail failed: [_1]",
                $img->errstr));
        require File::Basename;
        my($base, $path, $ext) = File::Basename::fileparse($i_file, '\.[^.]*');
        my $t_file = $path . $base . '-thumb' . $ext;
        $fmgr->put_data($blob, $t_file, 'upload')
            or return $app->error($app->translate(
                "Error writing to '[_1]': [_2]", $t_file, $fmgr->errstr));

        $file =~ s/\Q$base$ext\E$//;
        my $url = $q->param('site_path') ? $blog->site_url : $blog->archive_url;
        $url .= '/' unless $url =~ m!/$!;
        $url .= $file;
        $thumb = $url . encode_url($base . '-thumb' . $ext);
        MT->run_callbacks('CMSUploadFile',
                          File => $t_file, Url => $thumb, Size => length($blob),
                          Type => 'thumbnail',
                          Blog => $blog);
        MT->run_callbacks('CMSUploadImage',
                          File => $t_file, Url => $thumb,
                          Width => $thumb_width, Height => $thumb_height,
                          ImageType => $image_type,
                          Size => length($blob),
                          Type => 'thumbnail',
                          Blog => $blog);
    }
    if ($q->param('popup')) {
        require MT::Template;
        if (my $tmpl = MT::Template->load({ blog_id => $blog_id,
                                            type => 'popup_image' })) {
            (my $rel_path = $q->param('fname')) =~ s!\.[^.]*$!!;
            if ($rel_path =~ m!\.\.|\0|\|!) {
                return $app->error($app->translate(
                    "Invalid basename '[_1]'", $rel_path));
            }
            my $ext = $blog->file_extension || '';
            $ext = '.' . $ext if $ext ne '';
            require MT::Template::Context;
            my $ctx = MT::Template::Context->new;
            $ctx->stash('image_url', $url);
            $ctx->stash('image_width', $width);
            $ctx->stash('image_height', $height);
            my $popup = $tmpl->build($ctx);
            my $fmgr = $blog->file_mgr;
            my $root_path = $q->param('site_path') ?
                $blog->site_path : $blog->archive_path;
            my $abs_file_path = File::Spec->catfile($root_path, $rel_path . $ext);

            ## If the popup filename already exists, we don't want to overwrite
            ## it, because it could contain valuable data; so we'll just make
            ## sure to generate the name uniquely.
            my($i, $rel_path_ext) = (0, $rel_path . $ext);
            while ($fmgr->exists($abs_file_path)) {
                $rel_path_ext = $rel_path . ++$i . $ext;
                $abs_file_path = File::Spec->catfile($root_path, $rel_path_ext);
            }
            my ($vol, $dirs, $basename) = File::Spec->splitpath($rel_path_ext);
            my $rel_url_ext = File::Spec->catpath($vol, $dirs, encode_url($basename));
 
            ## Untaint. We have checked for security holes above, so we
            ## should be safe.
            ($abs_file_path) = $abs_file_path =~ /(.+)/s;
            $fmgr->put_data($popup, $abs_file_path, 'upload')
                or return $app->error($app->translate(
                   "Error writing to '[_1]': [_2]", $abs_file_path,
                                                     $fmgr->errstr));
            $url = $q->param('site_path') ?
                $blog->site_url : $blog->archive_url;
            $url .= '/' unless $url =~ m!/$!;
            $rel_url_ext =~ s!^/!!;
            $url .= $rel_url_ext;
            MT->run_callbacks('CMSUploadFile',
                          File => $abs_file_path, Url => $url,
                          Size => length($popup),
                          Type => 'popup',
                          Blog => $blog);
        }
        my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" alt="" />) : q{<MT_TRANS phrase="View image">};
        return $app->translate_templatized(<<"HTML");
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>
HTML
    } elsif ($q->param('include')) {
        if ($thumb) {
            return <<"HTML";
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
HTML
        } else {
            return <<"HTML";
<img alt="$fname" src="$url" width="$width" height="$height" />
HTML
        }
    } elsif ($q->param('link')) {
        return $app->translate_templatized(<<"HTML");
<a href="$url"><MT_TRANS phrase="Download file"></a>
HTML
    }
}

今回のカスタマイズで参考にしたサイト

今回のカスタマイズで参考にさせていただいたエントリーです。

• MovableType 画像回り込み改造
• Perl基礎入門:

今回のカスタマイズで少しperlカスタマイズもわかるようになった気がします。MovableType 画像回り込み改造のエントリーを参考に画像のalt属性入力やセレクトボタン表示でHighslide JSタグ生成も選択できるなどの更なるカスタマイズを試してみようと思います。

perlの知識がある方で、今回のカスタマイズに興味のある方でお力を貸していただける方が見えましたら、コメント・トラックバックお待ちしております。