ファイルのアップデート時に、テキストの画像への回りこみ指定を出来るようにした。
プルダウンメニューで選べるので、直感的でCMSとして使う場合も非常に便利。
初心者にも優しいね。
*--- 2007.04.17 MT3.35-ja向けに改変 ---*
●tmpl/cms/upload_complete.tmpl
143行目（MT3.35-ja）
<p><label><input type="checkbox" name="constrain" value="1" checked="checked"> <MT_TRANS phrase="Constrain proportions"></p></blockquote>
</TMPL_IF>
の下に。
<h4>画像へのテキスト回り込み設定</h4> <p> <select name="ifloat" class="menu" > <option value="none" selected>回り込みなし</option> <option value="left" >画像が左、テキストが右</option> <option value="right">画像が右、テキストが左</option> </select> </p>日本語を使う場合は、MT設置時に指定した文字コードでファイル保存すること。 文字コードが違うと、文字化けの原因になります。
すぐ下の
<TMPL_IF NAME=IS_IMAGE> <input 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 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&width=<TMPL_VAR NAME=WIDTH>&height=<TMPL_VAR NAME=HEIGHT>&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>へ変更。
●lib/MT/App/CMS.pm
4752行目（MT3.35-ja）
『$q->param('popup')』にて検索するとよい。
if ($q->param('popup')) {
require MT::Template;
if (my $tmpl = MT::Template->load({ blog_id => $blog_id,
type => 'popup_image' })) {
(my $rel_path = $q->param('fname')) =~ s!\.[^.]*$!!;
if ($rel_path =~ 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 = ''; }を追加。
ここで、$imgclassという変数に、クラス名「l」、「r」を代入している。
class名変えたいなら、ここのclass='l'、class='r'を変更すればよい。
4803行目付近（MT3.35-ja）
『my $link』で検索するとよい。my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" alt="" />) : q{<MT_TRANS phrase="View image">}; return $app->translate_templatized(<<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')) { if ($thumb) { return <<HTML; <a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" /></a> HTML } else { return <<HTML; <img alt="$fname" src="$url" width="$width" height="$height" /> HTML }ここの<img>タグ3個所にクラス名「 $imgclass 」を追記。
my $link = $thumb ? qq(<img src="$thumb" width="$thumb_width" height="$thumb_height" alt="" $imgclass />) : q{<MT_TRANS phrase="View image">}; return $app->translate_templatized(<<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')) { if ($thumb) { return <<HTML; <a href="$url"><img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" $imgclass /></a> HTML } else { return <<HTML; <img alt="$fname" src="$url" width="$width" height="$height" $imgclass /> HTML }最後にスタイルシートに設定したclassを定義してあげる。
img.r { float:right; margin:0 0 15px 15px; vertical-align:top; }img.l {
float:left;
margin:0 15px 15px 0;
vertical-align:top;
}
このように、イメージとテキストの間隔は、cssのmarginで設定してやるとよい。
文章が読みやすいように、各自好きな値にするとよいでしょう。
