画像にテキストを回り込ませる

写真とか画像をアップすると文字がその下に表示されるから意外にページの高さを取ってしまうため、回り込みさせると良い感じ。

/ib/MT/app/の中にあるCMS.pmの赤い文字の部分を加える。


my $link = $thumb ? qq(<img src=”$thumb” width=”$thumb_width” height=”$thumb_height” border=”0″ class=”img_L”/>) : “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" target="_blank"<<img alt="$fname" src="$thumb" width="$thumb_width" height="$thumb_height" border="0" class=”img_L” /></a>
HTML
} else {
return <<HTML; <img alt="$fname" src="$url" width="$width" height="$height" border="0" class=”img_L”/>
HTML
}

そしてcssに下記を書き加える。

.img_L{
float: left;
border: none;
margin-right:8px;
margin-top:4px;
}

これだけ。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です