Movable Type 4 で Highslideを利用する Part2

以前、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生成タグは、下記のようになっています。

<a href="画像ファイルのURL"><img alt="画像ファイル名" src="画像ファイル(サムネイル)のURL" width="サムネイル画像幅" height="サムネイル画像縦" /></a>

 

上記のタグを以下のように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 ),

上記コードに記載ミスがありました。Basket Blogさんのご指摘で気が付きました。(早く気づけよ~って言われそう...)

うちの「image.pm」ファイルを確認したところ、 「{」はしっかり記述されておりました。

下記のよう(赤文字)に訂正します!(2009.10.03)

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ファイルをブログのシステムの中にアップロードします。

これで設定完了です。

 

カテゴリ

, ,

トラックバック(4)

このブログ記事を参照しているブログ一覧: Movable Type 4 で Highslideを利用する Part2

このブログ記事に対するトラックバックURL: http://maru-j.com/mt/mt-tb.cgi/42

» Movable Type 4でHighslide JSのタグを自動で吐き出す。(White Wing version2.0)~のトラックバック

Movable Type 4で画像挿入時に「Highslide JS」のタグを... 続きを読む

画像のポップアップにはlightboxってのが流行ってるみたいなんだけど、あれはブラウザ全面を占有してしまって本文を読みながら写真を見るってことが出来ない... 続きを読む

» Movable Type 4.xでHighslide JSのタグを自動挿入させる方法(MONOCHROME - 犬と日常とデジタル生活と。)~のトラックバック

Movable Type 4.xの記事作成画面にて、いちいちタグを入力しなくても、自動でHighslide JSのタグを挿入させる方法 続きを読む

うまく行くかな。うまく行ったらエントリの続きを書きます。 ... 続きを読む

コメントする

ブログ管理者の承認後、コメントは公開されます!

即時公開されませんので、ご注意お願いします!

 

みんなでレッツ
お小遣い稼ぎっ★



Loading Now.....

アクセスカウンター

Maru-J Blog
本日
昨日

Maru-J Blog トップページ


Maru-J HP

Maru-J HP トップページ

このブログ記事について

このページは、Maru-J(管理人)が2007年12月 1日 10:24に書いたブログ記事です。

ひとつ前のブログ記事は「DIY:屋根裏に換気ファン&○○管設置」です。

次のブログ記事は「ワンセグ受信アダプタ DSテレビ」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Powered by Movable Type 4.0