Movable Type 備忘録

 画像を挿入で出力されるタグをカスタマイズ

こんばんわ^^

ここ最近ずっとドライアイで家に帰ってもパソコンを使わない生活を送ってる bzbell です。
訪問者さんからのコメントやメルフォのお返事だけパソコンとにらめっこしてます (; ̄∇ ̄A

目の調子が悪いので、サクサクっと記事を書いちゃいますね。
今回はエントリ投稿時の「画像を挿入」で出力されるタグのカスタマイズについてです。

さきほど、訪問者さんからのご質問でエントリ投稿時の「画像を挿入」で出力されるタグを、シンプルなものにできないですか・・・という内容だったので、他の人でも同じようなこと考えるかなと思って投稿しておきますね。

「画像を挿入」で出力されるタグは以下のようになります。

  1. <form mt:asset-id="5" class="mt-enclosure mt-enclosure-image"><img alt="ajax-loader.gif" src="http://bizcaz.com/images/ajax-loader.gif" width="100" height="100" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></form>

青い字の <form>~</form> タグで囲われます。
これを上記赤い字の部分のみ出力するようにするカスタマイズです。

カスタマイズ

具体的には mt/lib/MT/Asset/Image.pm 内にある as_html というファンクション内で画像を貼り付けたい <img> タグを作成して、mt/lib/MT/Asset.pm 内の enclose というファンクションに作成した <img> タグの文字列を渡すことで、<form ・・・>~</form> で囲って出力されるようになっています。

ですので、mt/lib/MT/Asset.pm 内の enclose というファンクションを使わないようにすれば、上記例で示した、赤い字の部分だけが出力されるようになります ( ̄∇ ̄)b

具体的には以下の行を変更します。

mt/lib/MT/Asset/Image.pm

  1. #return $asset->enclose($text);
  2. return $text;

赤い字のようにコメントにして、青い字のように変更します。
以上で、<img> タグだけが出力されるようになります。

ただし注意することは、上記ファイルは Movable Type のアップグレードの度に上記のようなカスタマイズをする必要があります。

まぁ、人それぞれ好みがありますので、「わたしもシンプルなタグがいいっ(●>∀<●)/」って人はお試しあれ ( ̄∇ ̄)/

- 2007.09.24 追記 -

わたし勘違いしてました。てか、「画像を挿入」という機能をまだまともに使ってなかったので、てっきり「画像を挿入」で出力される <form> タグがそのまま出力されるものとばかり思ってました。
でも、実際には再構築すれば <spna> に変換されて、(X)HTML 的にも問題ありませんでした。

たぶん、訪問者さんが聞きたかったことをわたし取り違えて説明しちゃったんだと思います。すいません。

結論を言うと、デフォルトのまま enclose() を実行するようにしてあげた方がよいです。

- 2007.09.19 追記 -

何かね、<form> タグ中に含まれる mt:asset-id="アイテム番号" を出力しないようにしちゃうと、<MTEntryAssets> タグが使用できなくなるようです。
たとえば、<MTEntryAssets> タグを使用して以下のようなアイテム一覧を出力したい場合に影響するみたい (´・д・`)

  1. <MTEntries>
  2.     <MTEntryAssets><$MTAssetFileName$></MTEntryAssets>
  3. </MTEntries>

asset-id をキーワードに探すみたいで、<MTEntryAssets> タグ機能が使えなくなることを確認しました。
また、<img> 中に mt:asset-id="アイテム番号" を含めれば、<MTEntryAssets> タグが使用できることも確認しました。

ですので、以下のようなカスタマイズをすれば <MTEntryAssets> タグも使用できて、目的の出力もできました。

mt/lib/MT/Asset/Image.pm

  1. #return $asset->enclose($text);
  2. $text =~ s/img/img mt:asset-id="%d"/;
  3. $text = sprintf("$text", $asset->id);
  4. return $text;

赤い時をコメントにして、青い字 3 行のように修正します。
どうしても <form> タグが出力されるのが嫌な人は上記のようにすれば良さそうです (●´∀`●)

 Trackback Pings(1)

from KUMA TYPE

記事がWYSIWYGで編集できて簡単に画像も挿入できる様になるとやっぱりLigh...

 Comments(19)

#1: Posted by 哲やん @ September 19, 2007 [REPLY]
user-pic

Lightbox2の導入を試みていたのですが、「画像を挿入」で出力されるタグを「Lightbox2」用にカスタマイズが可能かといろいろと試していたのですが、記事内の記載通りに書き換えたものの、こちらの環境では<form>タグで囲まれたままとなってしまいました。

sub enclose {}内の以下の部分の
return qq{<form mt:asset-id="$id"あたりを

Lightbox用に以下のように書き換えたのですが画像データの場所を特定する方法がわかりません。
return qq{<a href="画像データの場所(URL)">$html</a>};

記事とは無関係かと思いましたが、別の場所をカスタマイズすることで何とかなりそうな気がするのですが、ご教示いただけないでしょうか。

#2: Posted by bzbell @ September 19, 2007 [REPLY]
user-pic

>>1 哲やん さん

こんにちわ^^

mt/lib/MT/Asset.pm 内の enclose というファンクションは他でも使用されてますので、そこを変更してしまうと他で影響がでてしまいます。

ですので、Lightbox2 の出力をさせたい場合には mt/lib/MT/Asset/Image.pm 内にある as_html というファンクション内で処理させるのがベターかと思います ( ̄∇ ̄)b

動作確認してませんが、mt/lib/MT/Asset/Image.pm 内にある as_html というファンクション内を以下のように変更すれば OK かなと思います。

246行目
変更前
'<a href="%s"><img alt="%s" src="%s" %s %s/></a>',
変更後
'<a href="%s" rel="lightbox"><img alt="%s" src="%s" %s %s/></a>',

家に帰ったら動作確認してみます♪

#3: Posted by TAEKO @ September 19, 2007 [REPLY]
user-pic

こんにちは。
せっかくなのにすみませんが、このタグは削除しては駄目です。

実はこの<form mt:asset-id="5"…という部分で、エントリーとそのエントリーに所属する画像の関連付けが行われているのです。asset-id="5"というのがその画像のID番号です。そのため、<form …>の部分を消してしまうと、MTのシステムがエントリーに所属する画像を探し出せなくなってしまいます。

具体的にはエントリーアーカイブ及び<MTEntries>内で使用する<MTEntryAssets>タグが機能しなくなってしまいます。

ですので、どうしても削除したければ、MTの機能に不具合が生じるのを承知の上で自己責任で…ということになると思います。よろしくです。

#4: Posted by 哲やん @ September 19, 2007 [REPLY]
user-pic

>>2 bzbell さん

早々のご返信ありがとうございました。
Lightbox2仕様はこちらでも検証したいのですが、その前に下記内容のカスタマイズが反映していないのはサーバーに依存するものなのでしょうか。
なかなか考えにくいものですが、うまく動作しませんでした(残念)

272. #return $asset->enclose($text);
273. return $text;


#5: Posted by 哲やん @ September 19, 2007 [REPLY]
user-pic

いろいろ試してみましたが、Asset.pmではなく、Image.pm内を以下のように改変したところ、ご紹介いただいたようにformタグが取り払われました。

mt/lib/MT/Asset/Image.pm

#return $asset->enclose($text);
return $text;

Lightbox2関係はいまだにうまく動作していませんが、こちらでもいろいろと検証してみます。

#6: Posted by bzbell @ September 19, 2007 [REPLY]
user-pic

>>3 TAEKO さん

こんばんわ^^

> 具体的にはエントリーアーカイブ及び<MTEntries>内で使用する<MTEntryAssets>タグが機能しなくなってしまいます。

コメントありがとうございます♪
確認してみます (●´∀`●)

#7: Posted by bzbell @ September 19, 2007 [REPLY]
user-pic

>>4 哲やん さん
>>5 哲やん さん

こんばんわ^^

> いろいろ試してみましたが、Asset.pmではなく、Image.pm内を以下のように改変したところ、ご紹介いただいたようにformタグが取り払われました。

あっ!! すいません。
修正するファイル名まちがってますね (; ̄∇ ̄A
正しくは、哲やん さんが言われるように Image.pm 内で OK です。

#8: Posted by 哲やん @ September 21, 2007 [REPLY]
user-pic

Lightbox2対応のカスタマイズができました。
私のスキルではここまでなので、今後この手のプラグインができることを期待して・・・

Image.pm 内の229行目あたりを以下のようにして

#'<img src="%s" %s alt="%s" %s />',
'<a href="http://画像の設置アドレス/%s" rel="lightbox"><img alt="%s" src="http://画像の設置アドレス/"%s"></a>',
#'<img src="%s" %s alt="%s" %s />',

247行目、257行目あたりを以下のように

'<a href="http://画像の設置アドレス/%s" rel="lightbox"><img src="%s" width="%d",height="%d"></a>',

このくらいしかできませんでしたが何とか稼働しています。

できましたら加筆、修正をお願いいたします。

#9: Posted by 哲やん @ September 21, 2007 [REPLY]
user-pic

すみません。タグが全部カットされてしまいました。

mt/lib/MT/Asset/Image.pm 内の229行目あたりを以下のようにして<br />
<br />
<blockquote>#'&lt;img src=&quot;%s&quot; %s alt=&quot;%s&quot; %s /&gt;',<br />
'&lt;a href=&quot;http://画像の設置アドレス/%s&quot; rel=&quot;lightbox&quot;&gt;&lt;img alt=&quot;%s&quot; src=&quot;http://画像の設置アドレス/&quot;%s&quot;&gt;&lt;/a&gt;',<br />
</blockquote>
<br />
247行目、257行目あたりを以下のように<br />
<br />
<blockquote> '&lt;a href=&quot;http://画像の設置アドレス/%s&quot; rel=&quot;lightbox&quot;&gt;&lt;img src=&quot;%s&quot; width=&quot;%d&quot; height=&quot;%d&quot;&gt;&lt;/a&gt;',</blockquote>

#10: Posted by bzbell @ September 22, 2007 [REPLY]
user-pic

>>8 哲やん さん
>>9 哲やん さん

こんばんわ^^

ありがとうございます (●´∀`●)

> できましたら加筆、修正をお願いいたします。

はい。記事の方追記します ( ̄∇ ̄)/

#11: Posted by oscar @ September 23, 2007 [REPLY]
user-pic

こんにちは、ドライアイの方どうですか?

> $text =~ s/img/img mt:asset-id="%d"/;
> $text = sprintf("$text", $asset->id);
> return $text;

の部分ですが、2個ほど気になる事が。

IMGタグの属性に「mt:asset-id」追加すると、XHTMLとしてはNGになりませんか?
すでにFORMの時点でNGなのかな?

もひとつは、$textに何がセットされてるか理解してないんで、ヤマカンですが、もしかしてファイル名が`img`含んでいたり、パスやALT属性に`img`が含まれてると、そこまで置換対象になりませんか?

`

#12: Posted by bzbell @ September 23, 2007 [REPLY]
user-pic

>>11 oscar さん

こんばんわ^^

> こんにちは、ドライアイの方どうですか?

あまり調子良くないんです (´Д`;)

> IMGタグの属性に「mt:asset-id」追加すると、XHTMLとしてはNGになりませんか?
> すでにFORMの時点でNGなのかな?

はい。
NG です。でも、デフォルトでそのような使われ方してるのでやむを得ずってとこでしょうか (´・д・`)

> ヤマカンですが、もしかしてファイル名が`img`含んでいたり、パスやALT属性に`img`が含まれてると、そこまで置換対象になりませんか?

するどいですね!!
oscar さんが言われるように $text にはイメージファイルのパスが含まれます。
でも、置換対象は最初に見つかった img でして、ここでいう最初とは '<img>' になりますので大丈夫だと思います ( ̄∇ ̄)b

#13: Posted by TAEKO @ September 24, 2007 [REPLY]
user-pic

こんにちは。XHTMLでNGという話題が出ていたので便乗して…。

デフォルトの状態なら<form>部分は頁出力時に<span>に置き換わるので、上のタグ例だと実際に出力された頁では以下のようになってformもmt:asset-idも消えますよね。

<span class="mt-enclosure mt-enclosure-image"><img alt="ajax-loader.gif" src="http://bizcaz.com/images/ajax-loader.gif" width="100" height="100" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/></span>

この件では自分の頁でも書いてますのでよろしければご覧下さい。
http://taeko.w-museum.com/wing/200709200024.html

これならXHTMLで問題ないし<form>も消えてるので、Validを最優先したい場合はどこもいじらずデフォルトのままにしておくのもいいのではと思うのですが…。

それとも質問者さんの意図は<form …>ではなくて頁出力された時の<span class="mt-enclosure mt-enclosure-image"></span>を無くしたいということなのかな?と思いました。

#14: Posted by bzbell @ September 24, 2007 [REPLY]
user-pic

>>13 TAEKO さん

こんばんわ^^

> デフォルトの状態なら<form>部分は頁出力時に<span>に置き換わるので、上のタグ例だと実際に出力された頁では以下のようになってformもmt:asset-idも消えますよね。

あっ!! ホントだ!!
<form> は画像挿入時に表示されてるだけで再構築後は変換されてますね。
知りませんでした。ありがとうございます (●´∀`●)

> これならXHTMLで問題ないし<form>も消えてるので、Validを最優先したい場合はどこもいじらずデフォルトのままにしておくのもいいのではと思うのですが…。

わたし的にはここで紹介したことはやってないのですが、変換してくれるなら問題ないですね。
急遽調べたことだったので、てっきり<form>が表示されるものだと思ってました。

> それとも質問者さんの意図は<form …>ではなくて頁出力された時の<span class="mt-enclosure mt-enclosure-image"></span>を無くしたいということなのかな?と思いました。

う~ん・・・だとしたら、わたしの勘違いですね。
わたしは画像挿入時の<form>を出力させたくない・・・と思い込んでしまったので (; ̄∇ ̄A
申し訳ないことしちゃったかな (つω-`。)

#15: Posted by isono @ January 22, 2008 [REPLY]
user-pic

はじめまして。
画像の挿入について質問をさせてください。

全然何もわかってないので、ここでお聞きするのが
正しいのかもわからないのですが…
画像を左寄せで挿入すると、画像の下に文字を
書こうとしても、必ず画像の右になってしまい困っています。

<form>タグ、<img>の中のclass,styleを削除すれば
所望の通りに自由な位置に文字を書けるのですが、
毎回これをやるのも面倒ですし、記事を拝見させて頂くと
<form>は削除しちゃいけないようですし、
どのようにすれば良いでしょうか?

いまは、画像の最後に<a style="CLEAR: both"></a>
と付け足すことで、IEではうまくいくのですが、
FireFoxでは全然レイアウトが崩れてしまいます。
(これも、付け足した内容が何かわかってないのですが…)

ちなみに、みなさん<form>は<span>に置換されると
おっしゃっていますが、どこで確認できるのでしょうか?
再構築後の記事内容を見ても、Webページのソースを
表示させても、<form>のままになっており、<span>は
確認できませんでした。

#16: Posted by isono @ January 22, 2008 [REPLY]
user-pic

すいません。質問して早速ですが、
だいたい自己解決しました。

<form>が<span>に置換されなかったのは、
フォーマットを「改行を変換」にして、再度画像挿入し直したら
<span>に置換されるようになりました。
「リッチテキスト」がいけなかったか、もしくは途中で
フォーマットを行き来して変更したのがいけなかったようです。

文字の位置に関しては、<img>内のclass,styleを
削除することで所望の通りになりました。
毎度やらないといけないという手間はありますが。。

お騒がせしました。

#17: Posted by Author Profile Page bzbell @ January 22, 2008 [REPLY]
user-pic

>>15 isono さん
>>16 isono さん

こんにちわ^^

img 内の class は残しておいて、style だけを削除してはどうでしょうか。
そうすれば CSS から画像の制御ができるようになると思いますうぅ~ん

#18: Posted by palayo @ November 24, 2008 [REPLY]
user-pic

突然の質問で、すみません!
エントリの概要を表示する際に、
<$MTEntryExcerpt remove_html="1" ltrim="1"$>
というタグを指定しています。remove_html="1" でタグを全て除去してくれるのですが、
imgタグのalt属性だけを残したいのです。
このような方法をご存知でしたら教えていただけないでしょうか?

#19: Posted by Author Profile Page bzbellからpalayoへの返信 @ November 24, 2008 [REPLY]
user-pic

>>18 palayo さん

こんにちわ^^

remove_html グローバルモディファイアを使うなら無理ですね。
でも regex_replace グローバルモディファイアを使えば可能ですブイブイ
ただしある程度決まった法則である必要があります。

たとえば、各記事の概要欄には以下のような記述があったとします。
テスト:<img src="aaaa" width="20" height="20" border="0" alt="ああああ" />いいいいううう。
これを alt 属性の中味は残す場合、regex_replace を使って以下のようにします。
<$MTEntryExcerpt regex_replace="/(<img .*)(alt=".*")(.*/>)/","$2" regex_replace='/alt="(.*)"/',"$1"$>
最初の regex_replace で alt 属性を抽出します。 次の regex_replace で alt 属性の中味を取り出します。 ただし、上記は先ほどもいったように決まった法則にのっとってます。
  1. alt 属性は他の属性( src、width など )より後( 一番最後 )に記述されていること。
    要するに alt 属性の後に border や src などがあってはダメということです。
  2. alt 属性が必ず含まれていて、且つ何らかのテキストを含んでいること。
    要するに alt 属性の中味を必ず含めてくださいということです。
といったかんじです。 ご確認くださいぺこり

 Post a Comment

 

コメント用フィード