MovableType のイメージ回り込み改造

こちらの記事を参考にしてイメージ回り込みがMT3.11でも可能になるようパッチを当ててみました。

• tmpl/cms/upload_complete.tmpl

- プルダウンメニュー部分

プルダウンメニュー部分135行付近にある、　

<p>
<label><input type="checkbox" name="constrain" value="1" checked="checked"> <MT_TRANS phrase="Constrain proportions">
</p>

の下に

<p> Image floating:<select name="ifloat" class="menu" >
<option value="left" selected>left
<option value="right" >right
<option value="none">none
</select>
</p>

を追加
- ボタンに引数追加

　145行目付近にある

<div>
<TMPL_IF NAME=IS_IMAGE>
<input type="button" onclick="doClick(this.form, 'popup=1&amp;width=<TMPL_VAR NAME=WIDTH>&amp;height=<TMPL_VAR NAME=HEIGHT>&amp;image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Popup Image">" />
<input type="button" onclick="doClick(this.form, 'include=1&width=<TMPL_VAR NAME=WIDTH>&height=<TMPL_VAR NAME=HEIGHT>&image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Embedded Image">" />
<TMPL_ELSE>
<input type="button" onclick="doClick(this.form, 'link=1')" value="<MT_TRANS phrase="Link">" />
</TMPL_IF>
</div>

を

<div>
<TMPL_IF NAME=IS_IMAGE>
<input type="button" onclick="doClick(this.form, 'imgfloat='+this.form.ifloat.value+'&popup=1&amp;width=<TMPL_VAR NAME=WIDTH>&amp;height=<TMPL_VAR NAME=HEIGHT>&amp;image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Popup Image">" />
<input type="button" onclick="doClick(this.form, 'imgfloat='+this.form.ifloat.value+'&include=1&width=<TMPL_VAR NAME=WIDTH>&height=<TMPL_VAR NAME=HEIGHT>&image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Embedded Image">" />
<TMPL_ELSE>
<input type="button" onclick="doClick(this.form, 'link=1')" value="<MT_TRANS phrase="Link">" />
</TMPL_IF>
</div>

と、doClick関数の第２引数の頭にimgfloagとthis.form.ifloat.valueを追加する diffの結果です。

- diff

136a137,142
> <p> Image floating:<select name="ifloat" class="menu" >
> <option value="left" selected>left
> <option value="right" >right
> <option value="none">none
> </select>
> </p>
145,146c151,152
< <input type="button" onclick="doClick(this.form, 'popup=1&amp;width=<TMPL_VAR NAME=WIDTH>&amp;height=<TMPL_VAR NAME=HEIGHT>&amp;image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Popup Image">" />
< <input type="button" onclick="doClick(this.form, 'include=1&width=<TMPL_VAR NAME=WIDTH>&height=<TMPL_VAR NAME=HEIGHT>&image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Embedded Image">" />
---
> <input type="button" onclick="doClick(this.form, 'imgfloat='+this.form.ifloat.value+'&popup=1&amp;width=<TMPL_VAR NAME=WIDTH>&amp;height=<TMPL_VAR NAME=HEIGHT>&amp;image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Popup Image">" />
> <input type="button" onclick="doClick(this.form, 'imgfloat='+this.form.ifloat.value+'&include=1&width=<TMPL_VAR NAME=WIDTH>&height=<TMPL_VAR NAME=HEIGHT>&image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Embedded Image">" />

• lib/MT/App/CMS.pm

　このファイルはかわってなかったです。しかし寿庵さんの変更前の記述と変更後の記述が同一なのでちょっと気をつけないと行けません。
- classを付ける

1889行あたりの下記のコードの

if ($q->param('popup')) {
require MT::Template;
if (my $tmpl = MT::Template->load({ blog_id => $blog_id,
type => 'popup_image' })) {
(my $base = $q->param('fname')) =~ s!\.[^.]*$!!;
if ($base =~ m!\.\.|\0|\|!) {
return $app->error($app->translate(

前に

my $imgclass;
if ($q->param('imgfloat') eq 'left') {
$imgclass = " class='l' ";
}elsif ($q->param('imgfloat') eq 'right') {
$imgclass = " class='r' ";
}else {
$imgclass = '';
}

を追加。

- HTMLコード追加

1931行目あたりのこのあたり

my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" border="0" />) : "View image";
return <<HTML;
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>
HTML
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
HTML
} else {
return <<HTML;

の各 img タグ内に $imgclass を追記する。

my $link = $thumb ? qq(<img $imgclass src="$thumb" width="$thumb_width" height="$thumb_height" border="0" />) : "View image";
return <<HTML;
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0'); return false">$link</a>
HTML
} elsif ($q->param('include')) {
(my $fname = $url) =~ s!^.*/!!;
if ($thumb) {
return <<HTML;
<a href="$url"><img $imgclass alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
HTML
} else {
return <<HTML;
<img alt="$fname" $imgclass src="$url" width="$width" height="$height" />
HTML
}
} elsif ($q->param('link')) {
return <<HTML;

- diff

1889a1890,1898
> my $imgclass;
> if ($q->param('imgfloat') eq 'left') {
> $imgclass = " class='l' ";
> }elsif ($q->param('imgfloat') eq 'right') {
> $imgclass = " class='r' ";
> }else {
> $imgclass = '';
> }
>
1931c1940
< my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" border="0" />) : "View image";
---
> my $link = $thumb ? qq(<img $imgclass src="$thumb" width="$thumb_width" height="$thumb_height" border="0" />) : "View image";
1939c1948
< <a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
---
> <a href="$url"><img $imgclass alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a>
1943c1952
< <img alt="$fname" src="$url" width="$width" height="$height" />
---
> <img alt="$fname" $imgclass src="$url" width="$width" height="$height" />

• スタイルシート

img.r {
float: right;
border: none;
margin-right:4px;
margin-top:4px;
vertical-align:top;
}
img.l {
float: left;
border: none;
margin-right:4px;
margin-top:4px;
vertical-align:top;
}