画像を複数件保存・表示する

実装したい事

画像実装機能は実装済みで、複数件の写真を保存・表示させる。

1.モデルのアソシエーション変更

変更前

class Scene < ApplicationRecord
  belongs_to :user
  has_one_attached :image

 省略

end

変更後

class Scene < ApplicationRecord
  belongs_to :user
  has_many_attached :images

 省略

end

2.コントローラーの変更

変更前

class ScenesController < ApplicationController

  def new
    @scene = Scene.new
  end

  def create
    @scene = Scene.new(scene_params)
    if @scene.save
      redirect_to root_path
    else
      render :new
    end
  end
  def show
    @scene = Scene.find(params[:id])
  end

  private
  def scene_params
    params.require(:scene).permit(:name, :user_name, :comment, :image).merge(user_id: current_user.id)
  end
end

変更後

class ScenesController < ApplicationController

  def new
    @scene = Scene.new
  end

  def create
    @scene = Scene.new(scene_params)
    if @scene.save
      redirect_to root_path
    else
      render :new
    end
  end
  def show
    @scene = Scene.find(params[:id])
  end

  private
  def scene_params
    params.require(:scene).permit(:name, :user_name, :comment, image: []).merge(user_id: current_user.id)
  end
end

3.ビューの変更

投稿ページ

変更前

  <%= form_with model: @scene, local: true do |f| %>
   <div class="img-upload">
      <div class="weight-bold-text">
        現場画像
        <span class="indispensable">必須</span>
      </div>
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
          <%= f.file_field :image, id:"item-image"%>
      </div>
    </div>
省略
<% end %>

変更後

 <%= form_with model: @scene, local: true do |f| %>
   <div class="img-upload">
      <div class="weight-bold-text">
        現場画像
        <span class="indispensable">必須</span>
      </div>
      <div class="click-upload">
        <p>
          クリックしてファイルをアップロード
        </p>
          <%= f.file_field :image, multiple: true , id:"item-image"%>
      </div>
    </div>
省略
<% end %>

閲覧ページ

変更前

省略
<%= image_tag image %>
省略

変更後

<% @scene.image.each do |image| %>
  <%= image_tag image %>
<% end %>

上記の変更点で、複数件の写真の投稿・表示が可能となりました。

今後について

写真の表示方法が横並びにしているだけなので、間隔を空けながらビューファイルを整理する。