[RUBY] Enregistrer et afficher plusieurs images

Ce que vous souhaitez mettre en œuvre

La fonction de montage d'image a déjà été implémentée et plusieurs photos peuvent être enregistrées et affichées.

1. Modifier l'association de modèle

Changer avant

class Scene < ApplicationRecord
  belongs_to :user
  has_one_attached :image

réduction

end

Après le changement

class Scene < ApplicationRecord
  belongs_to :user
  has_many_attached :images

réduction

end

2. Changer de contrôleur

Changer avant

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

Après le changement

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. Changer de vue

Page de publication

Changer avant

  <%= form_with model: @scene, local: true do |f| %>
   <div class="img-upload">
      <div class="weight-bold-text">
Image du site
        <span class="indispensable">Obligatoire</span>
      </div>
      <div class="click-upload">
        <p>
Cliquez pour télécharger le fichier
        </p>
          <%= f.file_field :image, id:"item-image"%>
      </div>
    </div>
réduction
<% end %>

Après le changement

 <%= form_with model: @scene, local: true do |f| %>
   <div class="img-upload">
      <div class="weight-bold-text">
Image du site
        <span class="indispensable">Obligatoire</span>
      </div>
      <div class="click-upload">
        <p>
Cliquez pour télécharger le fichier
        </p>
          <%= f.file_field :image, multiple: true , id:"item-image"%>
      </div>
    </div>
réduction
<% end %>

Page de navigation

Changer avant

réduction
<%= image_tag image %>
réduction

Après le changement

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

Avec les modifications ci-dessus, il est désormais possible de publier et d'afficher plusieurs photos.

À propos du futur

Comme les photos sont affichées côte à côte, les fichiers de vue sont organisés à intervalles.