TopMovable Typeカスタマイズ画像 > 2008年11月
2008年11月24日

アップロード画像の img 要素の alt 属性・title 属性をカスタマイズする(サムネイル画像編)

November 24,2008 2:22 AM
Tag:[, , , , ]
Permalink

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

1.概要

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

アップロードオプション

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

変更前

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

変更後

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

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

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

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

--- 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,
                );
            }
        }
...後略...
Comments [0] | Trackbacks [1]
Now loading...
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3