きっかけ

carrierwaveを使い複数の画像表示をできるようにしました。
詳細ページへもDBからデータを取ってくるためにif文を使用し表示もできていたのですが
メンターから指示のあったif文での書き直しが全てエラーになり、だったら
eachに書き直せとの切り返しがあったため、泣き泣き変更することとなりました。
もしも、そんな変更を余儀なくされ、必要とされる方がおりましたら、
少しでもこちらの記事が参考になればと思います。

最初の記述

haml

= image_tag "#{@item.images[0].src}"

こんな感じで画像表示されておりました。
以下がif文

haml

.box-photo__thumbnail
          -if @item.images[1].present?
            %div.brand-item
              = image_tag "#{@item.images[1].src}", alt: 'brand-item'
          - else
          -if @item.images[2].present?
            %div.brand-item
              = image_tag "#{@item.images[2].src}", alt: 'brand-item'
          - else
          -if @item.images[3].present?
            %div.brand-item
              = image_tag "#{@item.images[3].src}", alt: 'brand-item'
          - else
          .box-photo__thumbnail__bottom
          -if @item.images[4].present?
            %div.brand-item
              = image_tag "#{@item.images[4].src}", alt: 'brand-item'
          - else
          -if @item.images[5].present?
            %div.brand-item
              = image_tag "#{@item.images[5].src}", alt: 'brand-item'
          - else
          -if @item.images[6].present?
            %div.brand-item
              = image_tag "#{@item.images[6].src}", alt: 'brand-item'
          - else
          -if @item.images[7].present?
            %div.brand-item
              = image_tag "#{@item.images[7].src}", alt: 'brand-item'
　　　　　　　#以下略

まあ綺麗ではないですよね。笑
ただこれ以外のelsif　else ifの記述はエラーになったり１件しか表示されなかったりと不備があったためこちらを使用しておりました。

eachも考えましたが配列を含む書き方をいくら調べても見つからず諦めておりました
が
配列無視して、scssで画像サイズを整えるという神がかった方法を教えてくださった方がいました。
本当にありがとうございます(>_<)

each文への書き換え

haml

.box-photo__photo
  - @item.images.each_with_index do |image, i|
    = image_tag "#{image.src}"

配列無視で、全部を表示されるようにしました。
でも表示したい画像の１つ目はサイズを変えたい。
そこでscssで修正を行うことにしました。

scssでの修正

scss

.box-photo{
      box-sizing: border-box;
      width: 300px;
      height: 420px;
      margin-right: 20px;
      &__photo{
        width: 300px;
        height: 420px;
        font-size: 0;
        img:nth-child(1){
          width: 300px;
          height: 300px;
        }
        img{
        @include item;
        }
      }
    }

中の様子はおおよそわかるかと思いますが、一部説明しますと
img:nth-child(1){の記述がどの画像サイズを変えますとの定義をしている部分です。
詳細は参考ページをご覧ください。

余白を消す方法
 nyh-childについて
 足掻いていた時に見ていたeachに関するページ

終わりに

最後までご覧いただきありがとうございます。
初学者のため、不備や謝りなどございましたら
お手数ですがご指摘等いただけますと幸いです。

どうぞ宜しくお願いします。