CMS(シーエムエス)

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

今日は朝から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>タグへのサイズ指定の部分を削除して、

修正は完了です。

 

0
この記事を書いている人
株式会社ディープ

名前ダッチ

メールアドレスadachi@deep-deep.jp

Twitterはこちら >>

  • コメント: 0

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

最近の記事

  1. WP:WordPress(ワードプレス)
  2. WP:WordPress(ワードプレス)
  3. WP:WordPress(ワードプレス)
  4. 文系と理系のメリットとデメリット
  5. 東京駅
  6. 残業
  7. プログラマーになるのに年齢は関係ある?
  8. 年収(収入)
  9. income(収入)
  10. プログラマーになろう

Twitter

ダッチ@職業ブロガー兼プログラマー
@gatsu0000

アーカイブ

PAGE TOP