小粋空間  -  a cheap joke and a play on words site

以前エントリーした「アップロード画像の img 要素の alt 属性・title 属性をカスタマイズする」で、サムネイル画像への対応がもれていたので、本エントリーにて補足します。

１．概要

Movable Type のデフォルト状態では、次のようにアップロード時のオプションでサムネイル表示を設定した場合、

埋め込まれる img 要素には、title 属性が表示されません。

下に示す、２項のカスタマイズを行えば、埋め込まれる img 要素に title 属性が追加され、「ファイルオプション」の「説明」フィールドの内容が反映されます。

２．「説明」フィールドの内容を title 属性に挿入する

サムネイル画像を Movable Type の記事本文などに挿入したときに、img 要素に title 属性を追加し、「説明」フィールドの内容を title 属性の内容に反映させるカスタマイズです。

このカスタマイズでは、「アップロード画像の img 要素の alt 属性・title 属性をカスタマイズする」の２項「『説明』フィールドの内容を title 属性に挿入する」のカスタマイズも同時に行っています。

「説明」フィールドの内容を title 属性に挿入するには、次の内容をパッチとして使ってください。パッチの実施方法は下記のエントリーを参考にしてください。

• パッチをあてる（その1：適用方法）
• patchコマンドの-pオプションについて

--- lib/MT/Asset/Image.pm.bak   Tue Aug 12 09:51:00 2008
+++ lib/MT/Asset/Image.pm       Mon Nov 24 01:54:47 2008
@@ -305,8 +305,9 @@
             my $link =
               $thumb
               ? sprintf(
-                '<img src="%s" %s alt="%s" %s />',
+                '<img src="%s" %s title="%s" alt="%s" %s />',
                 MT::Util::encode_html( $thumb->url ),   $dimensions,
+                MT::Util::encode_html( $asset->description ),
                 MT::Util::encode_html( $asset->label ), $wrap_style
               )
               : MT->translate('View image');
@@ -322,9 +323,10 @@
         else {
             if ( $param->{thumb} ) {
                 $text = sprintf(
-                    '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
+                    '<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,
@@ -332,8 +334,9 @@
             }
             else {
                 $text = sprintf(
-                    '<img alt="%s" src="%s" %s %s />',
+                    '<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,
                 );

パッチが分からない方は、lib/MT/Asset/Image.pm をダウンロードして任意のエディタで開き、300行目あたりからの下記の部分に、青色の内容を追加してください。変更後、元のディレクトリにアップロードすれば完了です。
作業前にファイルのバックアップをとっておくと良いでしょう。

...前略...
        if ( $param->{popup} && $param->{popup_asset_id} ) {
            my $popup = MT::Asset->load( $param->{popup_asset_id} )
              || return $asset->error(
                MT->translate(
                    "Can't load image #[_1]",
                    $param->{popup_asset_id}
                )
              );
            my $link =
              $thumb
              ? sprintf(
                '<img src="%s" %s title="%s" alt="%s" %s />',
                MT::Util::encode_html( $thumb->url ),   $dimensions,
                MT::Util::encode_html( $asset->description ),
                MT::Util::encode_html( $asset->label ), $wrap_style
              )
              : MT->translate('View image');
            $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,
            );
        }
        else {
            if ( $param->{thumb} ) {
                $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,
                );
            }
            else {
                $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,
                );
            }
        }
...後略...

Movable Type 4.2 で、ブログ記事の「画像の挿入」を使ってアップロード画像を本文や追記に埋め込む場合の、img 要素のalt 属性や title 属性の出力内容をカスタマイズする方法です。

１．「説明」フィールドの内容を alt 属性に挿入する

アップロード時の「説明」フィールドの内容を alt 属性に反映させるカスタマイズです。

デフォルトの状態では、次のようにアップロード時のオプションを設定した場合、

埋め込まれる img 要素の alt 属性には、このように「ファイルオプション」の「名前」フィールドの内容が反映されます。

下に示す、１項のカスタマイズを行えば、埋め込まれる img 要素の alt 属性には、このように「ファイルオプション」の「説明」フィールドの内容が反映されます。

ただし、デフォルトの動作（alt 属性に「名前」フィールドの内容を反映）は適切と思われます。
alt 属性の目的が画像の代替文字列を表示させるためのものであり、代替文字列に対応するのは「名前」フィールドが妥当です。つまり、「名前」フィールドを適切な内容に書き換えてアップロードすればいいわけです。「名前」フィールドを書き換えてもファイル名が変更される訳ではありません。

が、「説明」フィールドの内容を alt 属性値として使いたい場合は、後述するカスタマイズを行ってください。

次の内容をパッチとして使ってください。パッチの実施方法は下記のエントリーを参考にしてください。

• パッチをあてる（その1：適用方法）
• patchコマンドの-pオプションについて

--- lib/MT/Asset/Image.pm.bak   Wed Aug 27 00:39:40 2008
+++ lib/MT/Asset/Image.pm       Wed Aug 27 00:36:14 2008
@@ -324,7 +324,7 @@
                 $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( $asset->description ),
                     MT::Util::encode_html( $thumb->url ),
                     $dimensions,
                     $wrap_style,
@@ -333,7 +333,7 @@
             else {
                 $text = sprintf(
                     '<img alt="%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,
                 );

パッチが分からない方は、lib/MT/Asset/Image.pm をダウンロードして任意のエディタで開き、322行目あたりにある下記の赤色部分を、青色の内容に書き換えてください。変更後、元のディレクトリにアップロードすれば完了です。
作業前にファイルのバックアップをとっておくと良いでしょう。

変更前

...前略...
        else {
            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,
                );
            }
            else {
                $text = sprintf(
                    '<img alt="%s" src="%s" %s %s />',
                    MT::Util::encode_html( $asset->label ),
                    MT::Util::encode_html( $asset->url ),
                    $dimensions, $wrap_style,
                );
            }
...後略...

変更後

...前略...
        else {
            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->description ),
                    MT::Util::encode_html( $thumb->url ),
                    $dimensions,
                    $wrap_style,
                );
            }
            else {
                $text = sprintf(
                    '<img alt="%s" src="%s" %s %s />',
                    MT::Util::encode_html( $asset->description ),
                    MT::Util::encode_html( $asset->url ),
                    $dimensions, $wrap_style,
                );
            }
...後略...

２．「説明」フィールドの内容を title 属性に挿入する

画像を挿入したときに、img 要素に title 属性を追加し、「説明」フィールドの内容を title 属性の内容に反映させるカスタマイズです。

１項と同様、次の内容をパッチとして使ってください。

--- lib/MT/Asset/Image.pm.bak   Wed Aug 27 00:39:40 2008
+++ lib/MT/Asset/Image.pm       Wed Aug 27 01:17:48 2008
@@ -322,9 +322,10 @@
         else {
             if ( $param->{thumb} ) {
                 $text = sprintf(
-                    '<a href="%s"><img alt="%s" src="%s" %s %s /></a>',
+                    '<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,
@@ -332,8 +333,9 @@
             }
             else {
                 $text = sprintf(
-                    '<img alt="%s" src="%s" %s %s />',
+                    '<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,
                 );

パッチが分からない方は、lib/MT/Asset/Image.pm をダウンロードして任意のエディタで開き、322行目あたりに、下記の青色部分の内容を追加してください。変更後、元のディレクトリにアップロードすれば完了です。
作業前にファイルのバックアップをとっておくと良いでしょう。

...前略...
        else {
            if ( $param->{thumb} ) {
                $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,
                );
            }
            else {
                $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,
                );
            }
...後略...

以上です。

今回、プラグインが使えそうになかったので、久しぶりに力技のカスタマイズになってしまいました。エレガントな変更方法がありましたらご教示ください。

ブログ記事の投稿で、記事内に画像ファイル等を挿入する場合、ファイルの表示位置を指定しないオプションがありません（下）。

このプラグインでは表示位置を指定しないラジオボタンを追加します。

このプラグインは、crema さんの記事を元に作成したものです。

• El diario de la diseñadora viviendo en tokio：Movable Type4で画像挿入するときの位置設定とか。

が、やや先に Junnama さんがよりリッチなプラグインを投稿されていました。

• Junnama Online (Mirror)：MT4で画像挿入の際にclassやstyleが付くのが嫌! なあなたに。

私の作成したプラグインは簡素なので、style 属性が設定されなくなるだけです。class 属性の設定は残ります。

１．プラグインのダウンロード

下記のリンクより、プラグイン InsertAssetWithoutStyle をダウンロードしてください。

InsertAssetWithoutStyle.zip

２．プラグインのアップロード

アーカイブを解凍し、解凍した内容を plugins ディレクトリおよびスタティックディレクトリに、それぞれ下記のように配置してください。

mt-static/
　　plugins/
　　　　InsertAssetWithoutStyle/
　　　　　　images/
　　　　　　　　align_none.gif
　　　　　　styles/
　　　　　　　　app.css
plugins/
　　InsertAssetWithoutStyle.pl

システムメニュー→プラグインで「InsertAssetWithoutStyle 0.0x」が表示されていればOKです。

３．利用方法

画像の表示位置を指定したくない場合、冒頭のスクリーンショットのように、位置欄より「なし」を選択します。「設定を記憶」をチェックすれば選択状態を保存することができます。

Movable Type 4 のデフォルトテンプレートでは、ブログ記事にアップロードした画像のサムネイルの一覧を表示する「Photos」がサイドバーにあります（下）。

ただし、Perlモジュールの Image::Magick がインストールされていない環境では、MTAssetThumbnailURL タグが正常に動作しないようで、「Photos」にサムネイルが表示されません。

レンタルサーバをご利用であればこのような事象に遭遇することはないと思いますが、もし表示されない場合は、モジュールテンプレートの「サイドバー(2カラム)」または「サイドバー(3カラム)」の下記の赤色部分

<MTIf name="main_index">
    <MTIfNonZero tag="AssetCount">
        <MTAssets type="image" lastn="10">
            <MTAssetsHeader>
        <div class="widget-assets widget">
            <h3 class="widget-header">Photos</h3>
            <div class="widget-content">
                <ul class="widget-list"></MTAssetsHeader>
                <li class="item"><a class="asset-image" href="<$MTAssetURL$>"><img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a></li>
            <MTAssetsFooter></ul>
            </div>
        </div>
            </MTAssetsFooter>
        </MTAssets>
    </MTIfNonZero>
</MTIf>

を、下の青色の内容に変更してください。

<MTIf name="main_index">
    <MTIfNonZero tag="AssetCount">
        <MTAssets type="image" lastn="10">
            <MTAssetsHeader>
        <div class="widget-assets widget">
            <h3 class="widget-header">Photos</h3>
            <div class="widget-content">
                <ul class="widget-list"></MTAssetsHeader>
                <li class="item"><a class="asset-image" href="<$MTAssetURL$>"><img src="<$MTAssetURL$>" width="70" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" /></a></li>
            <MTAssetsFooter></ul>
            </div>
        </div>
            </MTAssetsFooter>
        </MTAssets>
    </MTIfNonZero>
</MTIf>

とりあえず、これでサムネイルっぽく表示されるようになります。