エンジニア足立のコーディング日記

今日は朝からMT（Movable Type）で組んだサイトの修正依頼がありました。

内容は、

カスタムフィールドでアップロードして頂いている画像の表示サイズを、

全て横幅、高さ共に最大で210pxに揃えたいというものです。
※当然アスペクト比率（縦・横の比率）を維持してです。

ただ、

問題は、

修正しようとしているサイトは前任者が組んだものなので、

私がどのように組まれているのか中身を正確に把握していない事です。

そこで、

まずは現状の作りを見てみると、

CSSで横幅210pxになるように統一されていました。

↓こんな感じで

.photoarea img{
width:210px;
height:auto !important;
}

MTのテンプレートのコードは、

<MTIfNonEmpty tag="photo01"><$MTphoto01$></MTIfNonEmpty>

となっていました。

これだと、

横幅210px固定で高さはそれに合わせて自動で縮小されるので、

縦長の画像だと高さ210px以上になってしまいます。

なので、

早速MTのコードを修正することに！！

縮小した画像をクリックすると、

拡大画像が開くようにしたいとのことだったので、

まずは、

MTのコードを以下の様に書き換えてやります。

<MTIf tag="photo01">
<MTphoto01Asset>
<$MTAssetThumbnailLink height="210" width="210"$>
</MTphoto01Asset>
</MTIf>

あとは、

CSSの<img>タグへのサイズ指定の部分を削除して、

修正は完了です。