チーム開発 商品一覧表示（TOPページ）2

引き続き商品一覧表示の実装を行いました。

作業内容

完成図

viewの作成

昨日controllerに記述した変数を用い、view内に繰り返し処理を書いていきました。

- @products.first(4).each do |product|

firstメソッドで繰り返し回数を指定

次に画像の表示箇所。
元々cssで画像を指定していたのを、haml内で引っ張ってきてcssでサイズ調整に修正しました。

#haml
= image_tag product.images[0].src.url, class: "XX__list__image__inner"

#css
.XX__list__image {
  text-align: center;

  &__inner {
    height: 150px;
    width: auto;
  }
}

縦横比の固定
height: 指定;　width: auto;
参考：https://www.nishishi.com/css/resize-image-keep-aspect-ratio.html

中央寄せ
text-align: center;

画像パスの指定
XXX.images[0].name.url
紐づく最初の画像のnameカラムをurlで指定

同様にブランド毎の表示も作成

controllerに変数を追加。

@brandProducts = Product.includes(:images).where(buyer_id: nil).where(brand_id: 1).order("id DESC")

whereメソッド　複数条件指定
Model.where(column: XX).where(column: XX)