Movable Type で画像挿入をきれいにする「StylelessImage」

Movable Type4では画像挿入を使いFTPなどを使わずに画像をアップロードできるのですが、これがちょっと曲者です。

画像挿入に挿入されるHTMLソースは以下のような感じになります。

<form mt:asset-id="1" class="mt-enclosure mt-enclosure-image"> <img alt="画像挿入" src="http://blog.webcreativepark.net/img/20071023_01.jpg" width="500" height="361" class="mt-image-left" style="float: left; margin: 0 20px 20px 0;"/> </form>

デフォルトですとimg要素にclassが自動的に挿入されます。

MT4のプラグイン「StylelessImage」を利用すると、このclassが挿入されなくなります。
(「Web2.0言うな」で有名なJunnamaさんが作成されています。)

設置方法はダウンロードしたStylelessImage.pl.zipを解凍、生成されたStylelessImage.plディレクトリ内のStylelessImage.plをMovable Type を設置しているディレクトリ内のpluginsディレクトリに置くだけです。

このプラグインの素敵な所に、画像アップ時の配置設定に「左」、「中央」、「右」に「なし」を追加してくれます。

これはちょっと便利

form要素!?

画像挿入時に自動的に挿入されるform要素。最初は毎回、手動で消していたのですが実は意味があるようです

参考:画像を挿入したときにformタグがつく理由

アイテムとエントリーを関連付けるために使用されており、『MTEntryAssets』というタグを使用するときに、その効力を発揮するようです。

しかも、再構築の際にspan要素に置き換えられるようです。

StylelessImageは、置き換えられる要素をspan要素以外にも設定することができます。

MTEntryBodyのassetelement属性で置き換える要素であったり、class名を設定できます。またnを設定することにより空の要素と置き換えるようになります。

<$MTEntryBody assetelement="p"$>
　　　　　　　　　↓
<p><img alt="foo" src="bar" width="n" height="n" /></p>

<$MTEntryBody assetelement="p,photo"$>
　　　　　　　　　↓
<p class="photo"><img alt="foo" src="bar" width="n" height="n" /></p>

<$MTEntryBody assetelement="div,thumb"$>
　　　　　　　　　↓
<div class="thumb"><img alt="foo" src="bar" width="n" height="n" /></div>

<$MTEntryBody assetelement="0"$>
　　　　　　　　　↓
<img alt="foo" src="bar" width="n" height="n" /></code>

if (align == 'none') {
    tag = tag.replace(/style=.*?>/, '/>');
    tag = tag.replace('class="mt-image-none" ', '');
    tag = tag.replace(/<form mt:asset-id="[0-9]+" class="mt-enclosure mt-enclosure-image">/, '');
    tag = tag.replace('</form>', '');
}