MovableType 画像回り込み改造

実際にモノになるかどうかはさておき、メインのサイトの方で、MovableTypeをインストールして実験している、今のところ非公開だが。 で、MTでアップロードした画像について、テキストの回りこみを自動で行う改造はあちこちで行われているが、大概一律に左寄せである。でもって、画像アップロード時にこれを選択できないかと思い、いじってみた。

tmpl/cms/upload_complete.tmpl 209行あたりから

	<td align="right" valign="top" colspan="3"><font class="instructional"><input type="checkbox" name="constrain" value="1" checked> <MT_TRANS phrase="Constrain proportions"></td>
	</tr>
	</table>

てな感じになっている部分を以下のように変える

	<td align="right" valign="top" colspan="3"><font class="instructional"><input type="checkbox" name="constrain" value="1" checked> <MT_TRANS phrase="Constrain proportions"></td>
	</tr>
	<tr>
	<td>Image floating:</td>
	<td ><select name="ifloat" class="menu" >
	<option value="left" selected>left
	<option value="right" >right
	<option value="none">none
	</select></td>
	</tr>
	</table>

その下のほうに

<input class="button-big" type="button" onClick="doClick(this.form, 'popup=1&width=<TMPL_VAR NAME=WIDTH>&height=<TMPL_VAR NAME=HEIGHT>&image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Popup Image">">
<input class="button-big" type="button" onClick="doClick(this.form, 'nclude=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 class="button-big" type="button" onClick="doClick(this.form, 'imgfloat='+this.form.ifloat.value+'&popup=1&width=<TMPL_VAR NAME=WIDTH>&height=<TMPL_VAR NAME=HEIGHT>&image_type=<TMPL_VAR NAME=IMAGE_TYPE>')" value="<MT_TRANS phrase="Popup Image">">
<input class="button-big" 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について sub _process_post_upload の中ほど

    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(
                    "Invalid basename '[_1]'", $base));
            }

のあたりを

	my $imgclass;
	if ($q->param('imgfloat') eq 'left') {
		$imgclass = " class='l' ";
	}elsif ($q->param('imgfloat') eq 'right') {
		$imgclass = " class='r' ";	
	}else {
		$imgclass = '';
	}
    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(
                    "Invalid basename '[_1]'", $base));
            }

ってな感じで。 さらに、

        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" border="0" /></a>
HTML
        } else {
            return <<HTML;
<img alt="$fname" $imgclass src="$url" width="$width" height="$height" border="0" />

の部分を

        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" border="0" /></a>
HTML
        } else {
            return <<HTML;
<img alt="$fname" $imgclass src="$url" width="$width" height="$height" border="0" />

という風に変える。 これで画像アップロード後、サムネール作成時に左寄せ、右寄せ、なしを選択できるようになる。 ただ、これだけではimgタグにクラスをつけただけなので、styles-site.cssに以下のような行を付け加える必要がある。

	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;
	}