MovableType 正方形サムネイルを無理やり拡大したいのですが...

2011年6月26日 by Sachio Maruyama

こんにちは。丸山です。
今回はMovable Typeの正方形サムネイルについてです。

画像アイテムのサムネイル表示に使うAssetThumbnailLink、AssetThumbnailURLタグでは「square」モディファイアに「1」を設定することで、サムネイルを正方形にすることができます。
MTAssetThumbnailLink
MTAssetThumbnailURL

例:以下のような2種類の画像があった場合。(画像は以前の記事より)
mt-thumbnail_img01.png

<$mt:AssetThumbnailLink square='1' width='100' regex_replace='/<a.*?>(.*)</a>/','$1'$>

と記述することで、サムネイルが正方形になります。
mt-thumbnail_img02.png

上記指定時には width='100' と指定しましたが、これを「元画像の短辺」より大きいサイズに指定した場合、「square」モディファイア自体が拡大には対応していないため、指定サイズでサムネイルが生成されることはありません。

<$mt:AssetThumbnailLink square='1' width='250' regex_replace='/<a.*?>(.*)</a>/','$1'$>

と記述しても・・・
mt-thumbnail_img03.png

もしこれを無理やりにでも対応したい場合、「square」モディファイアを指定しなければ画像は拡大生成されますので、「square」指定無し + CSSで強引に正方形表示をさせます。

まず<img>タグをトリミング用のタグで包み、そのタグにはCSSで正方形サイズとoverflow:hiddenを指定してオーバーした部分をカット。<img>タグ自体にもCSSで、(画像長辺サイズ - 正方形サイズ) ÷ 2 の値を長辺へマイナスmargin指定します。
mt-thumbnail_img04.png

テンプレート例

<mt:Ignore>正方形にしたい画像サイズを変数へ</mt:Ignore>
<$mt:SetVar name="size" value="250"$>

<mt:EntryAssets type="image">

<$mt:AssetProperty property="image_width" setvar="width"$>
<$mt:AssetProperty property="image_height" setvar="height"$>

<mt:If name="width" gt="$height">
<mt:Ignore>横型画像の場合</mt:Ignore>
<$mt:AssetThumbnailLink height='$size' regex_replace='/^.*width="(.*?)".*$/','$1' setvar="imgWidth"$>
<$mt:Var name="imgWidth" op="-" value="$size" setvar="imgWidth"$>
<mt:SetVarBlock name="style">alt="" style="margin-left:-<$mt:Var name="imgWidth" op="/" value="2"$>px;"</mt:SetVarBlock>
<span><$mt:AssetThumbnailLink height='$size' regex_replace='/<a.*?>(.*)</a>/','$1' regex_replace='/alt=""/','$style'$></span>

<mt:Else>
<mt:Ignore>縦型画像の場合</mt:Ignore>
<$mt:AssetThumbnailLink width='$size' regex_replace='/^.*height="(.*?)".*$/','$1' setvar="imgHeight"$>
<$mt:Var name="imgHeight" op="-" value="$size" setvar="imgHeight"$>
<mt:SetVarBlock name="style">alt="" style="margin-top:-<$mt:Var name="imgHeight" op="/" value="2"$>px;"</mt:SetVarBlock>
<span><$mt:AssetThumbnailLink width='$size' regex_replace='/<a.*?>(.*)</a>/','$1' regex_replace='/alt=""/','$style'$></span>
</mt:If>

</mt:EntryAssets>

CSS例

span {
	display: block;
	width: 250px;
	height: 250px;
	overflow:hidden;
}

実行結果
mt-thumbnail_img05.png

サムネイルとは(Wikipediaより)

サムネイル(thumbnail)とは、画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと。親指(thumb)の爪(nail)のように小さく簡潔であるという意味から来ている。

...とのことなので、元画像より拡大している時点でサムネイルじゃないんですけどね ( ;∀;)

  • Index
  • Back
  • Index
  • Back
  • スマートフォンサイト構築

スタッフ

  • 平竹仁士
  • 河西裕一
  • 柳澤健一
  • 小林秀太郎
  • 丸山幸男