2005年 2月 7日(月)
仏滅
今日は何の日?
エントリ投稿時の画像回り込み改造
Magic White さま のところで拝見した
「イメージ回り込み改造」 という
記事を参考に、というか 丸々真似して、
エントリ投稿時の 画像の 回り込みを
「左寄せ」・「右寄せ」・「回り込みナシ」 の3つから
選択できるように改造しました。
←の図 赤丸で囲んだ部分です。
以下、みよたん のところの ほぼコピーです、
オリジナリティなくてすみません。
まず、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>
同じく
tmpl/cms/upload_complete.tmpl の 145行目付近
<div>
<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 をテキストエディタで開いて、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 = '';
}
同じく
lib/MT/App/CMS.pm の 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 を追加します。赤い字の3箇所です。
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;
最後に スタイルシート
styles.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;
}
以上です。
≪ 続きを隠す
Posted by Caetla at
10:34
| Category :
MTカスタマイズ
|
Comments [16]
|
Trackbacks [3]
|
Clip!!
|
Ranking
Tag :
MovableType
,
カスタマイズ
,
画像回り込み
この記事はどうでしたか?(お気軽に 記事に点数を付けてみてくださいね♪) Bad ← 1 2 3 4 5 → Good
評定平均:(2.9) 総合点:(1875) 投票人数:(642) |
|
1
さえらたん早速見に来てくれてありがと
sbの方もやっているの。
MTの方は、好きなものばかり集めたBlogにしようと思って
この機能も良いねぇ~
写真ばかりUPしそうなので、 今からやってみますっ。
2
>>1 真希さん
真希しゃんもすばやいー
(゜ー☆)(。_☆)(゜-☆)(。_☆)ウンウン
ちょっと修正箇所が多くて 面倒かもだけど、やってみてね~
3
一つ教えてくださーい。
最後に スタイルシート styles.css
のこの上に書いているタグは、
どこに入れ込めば良いんですか?
昼ご飯も食べずに弄っている私
お腹空いたよぉ~
4
ごめんなさい。判りましたぁ~
5
>>4 真希さん
(゜ロ゜) ヒョオォォ! 遅くなってごめんちー。
できたかな?┃電柱┃_・) ジー
6
こんな便利な物があったとは!
さっそくやってみます。わぁーい
7
>>6 rpmさん
( ̄ー ̄(_ _( ̄ー ̄(_ _ ウンウン
いいですよねー、こういうの。ヽ( ̄▽ ̄)ノ
8
こんばんわー
TBありがとうございます
わたしこそオリジナリティないです(汗。
9
>>8 みよたんさん
(( ̄_ ̄ ) (  ̄_ ̄)) いえいえ みよたんは すごいですよー。カスタマイズを自分のものにされてるもん。
いつまでも どこまでも ついてゆきます。ヾ(´▽`;)ゝ ウヘヘ え?いや?o(>▽<)o ウキャキャウキャキャ
10
さえらちゃんありがとねぇ~
ちゃんと回り込み出来ています
11
>>10 真希さん
w(゜o゜)w オーッ よかったですぅ~~~
12
さえらさん、はじめまして。
こちらのエントリーを参考に、というか丸写しで
画像回り込みカスタマイズしたのですが、
にゃぜか「投稿者情報」までもが回り込んでしまいますニャ。
あれこれ検索してみましたが、どこをいじったら良いのかわからず
困っておりますニャ。もしどこか変更しにゃくてはにゃらにゃいようにゃ箇所を
ご存知でしたら、ご助言下さい。よろしくお願いいたしますニャ。
13
さえらさん、何度もすみません。
にゃんとか自己解決・・・というか、よくわからにゃいのですが、
回り込み解除指定タグを入れてやればよいのですね。
・・・ではにゃいかと思うのですが
14
>>12 >>13 るびーにゃん
はじめまして。お返事が遅くなってすみません。
そうですね。あたしも 最後に <br clear="left" /> のように 回り込み解除タグを入れてます。
15
おはようございます!!Σ(||| ▽ |||)私のコメントが「ニャン・・・」「るびーにゃん」!!
すごい、かわいい~っ
一瞬タイプミスかと思いましたが、違うのですね。
きっとこのコメントもかわいい猫語ににゃっているのでしょう。
こちらのブログに、わざわざお越しいただきどうもありがとうございましたニャ。
しばらくは<br/>タグでやってみようと思いますニャ。これまで小さにゃ画像等も左端か、<center>タグ使っていたので、にゃんだか間の抜けた感じがしていたのですが、おかげさまで画像のあるエントリーもいい感じで見られるようににゃりそうですニャ。今後とも、どうぞよろしくお願いいたします
16
>>15 るびーにゃん
かわいいでしょ、ネコ語に変換してくれるプラグインを入れてるんです。
良い解決策がうかばなくてごめんなさい。こちらこそ これからも よろしくお願いします。