top

サイドバーのサムネイルを全部正方形にする (MT4用)

ちょっとした覚え書き。MT4のデフォルトテンプレのサイドバーにはアップした画像のサムネイルリストが付いてます。これ、可愛くて好きなんですが、1つだけ不満が。

070917_1.jpg

このように縦長の画像がある場合、きれいに真四角なリストになってくれないんですね…。これはデフォルトのタグがサムネイルのサイズを縦幅で統一しているため、縦より横が短い場合、左右が余っちゃうからだと思うんです。そこで画像の縦横サイズを比較して、短い方でサイズを統一して、画像が縦長でも横長でも常に正方形のサムネイルになるようにしてみました。

1.モジュールの変更・修正
モジュールの「サイドバー(3カラム)」「サイドバー(2カラム)」の中にある<MTIf name="main_index"><MTIfNonZero tag="AssetCount">~</MTIfNonZero></MTIf>に以下のような赤字の部分を追加。

<MTIf name="main_index">
<MTIfNonZero tag="AssetCount">
<MTAssets type="image" lastn="10">
<MTSetVarBlock name="imgw"><$MTAssetProperty property="image_width"$></MTSetVarBlock>
<MTSetVarBlock name="imgh"><$MTAssetProperty property="image_height"$></MTSetVarBlock>

<MTAssetsHeader>
<div class="widget-assets widget">
<h3 class="widget-header">Photos</h3>
<div class="widget-content">
<ul class="widget-list"></MTAssetsHeader>
<li class="item">
<a class="asset-image" href="<$MTAssetURL$>">
<MTIf name="imgw" gt="$imgh">
<img src="<$MTAssetThumbnailURL height="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" />
<MTElse>
<img src="<$MTAssetThumbnailURL width="70"$>" class="asset-img-thumb" alt="<$MTAssetLabel$>" title="<$MTAssetLabel$>" />
</MTElse>
</MTIf>

</a></li>
<MTAssetsFooter></ul>
</div>
</div>
</MTAssetsFooter>
</MTAssets>
</MTIfNonZero>
</MTIf>

2.スタイルシートの変更・追加
メインインデックスのbase_theme.cssの.item(最後の方にあります)に以下の赤字の部分を追加。

.item {
display: inline;
float: left;
margin: 0pt 5px 8px;
overflow: hidden;
text-align: center;
vertical-align: middle;
width: 70px;
height: 70px;
}

070917_2.jpg

これで画像が縦長でも横長でもサムネイルは一律真四角になってきれいに揃います。「別にそんなこと気にならない~」な方ならどうでもいいことですけど、そこはまあ個人の好みということで(^^;。

それにしてもMT4の変数機能、便利すぎ。使いまくりです(笑)。