refile로 여러 개의 그림을 투고하고 싶습니다!

2667 단어 Rails
이번에는 refile로 그림을 많이 투고할 수 있는 기능을 만들었습니다.
조사할 때 여러 개의 이미지 투고에서gem'carrierwave'를 사용했다는 보도가 많았지만 순조롭지 못해 이번에는 refile로 설치를 시도했다.

이미지 게시 테이블 만들기


이미지 투고만 하면 대상 모델에 이미지 열을 추가하면 되지만 여러 장이면 표를 따로 만들어야 한다.
나는pet_새 이미지 모델이 생성되었습니다.
 create_table "pet_images", force: :cascade do |t|
    t.integer "pet_id"
    t.string "image_id"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["pet_id"], name: "index_pet_images_on_pet_id"
  end

관계를 맺다


1:N의 관계성을 갖도록 합니다.
pet.rb
 has_many :pet_images, dependent: :destroy
 accepts_attachments_for :pet_images, attachment: :image
pet_image.rb
 belongs_to :pet
 attachment :image

컨트롤러 편집


pet.controller.rb

 private
 def pet_params
    params.require(:pet).permit(:name, :birthday, :gender, :introduction, :genre_id, :prefecture_id, :age, :is_active, :image,  pet_images_images:[] )
  end

새 게시물 양식 편집


pet.new.html
<%= form_with model: @pet, url: pets_path, method: :post, local: true do |f| %>
  <%= f.attachment_field :pet_images_images, multiple: true %>
<% end %>

애완동물 일람에 이미지 한 장만 표시하고 싶어서 다음과 같이 기술합니다.


pet.index.html
  <% pet.pet_images.first(1).each do |image| %>
   <%= attachment_image_tag image, :image, size: '200x200' %>
  <% end %>

여러 장의 그림을 표시하고 싶은 곳↓


pet.show.html
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
 <div id="slider">
   <% @pet.pet_images.each do |image| %>
      <%= attachment_image_tag image, :image, size: '350x350', class: "rounded mt-4" %>
   <% end %>
 </div>

슬라이드 쇼 포함


application.html
<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css"/>
</head>
application.js
$(function() {
  $('#slider').slick({
      dots: true, 
      autoplay: true, 
      autoplaySpeed: 4000, 
  });
});
application.css
.slick-next {
    right: 10px 
    z-index: 100;
 }

.slick-prev {
    left: 10px 
  z-index: 100;
 }
이상입니다!!
푸시 달력에서 시간표 설정을 사용하지 않는 방법 랜덤 순서 푸시 달력에서 시간표 설정을 사용하지 않는 방법 랜덤 순서
Gatsby와 Netlify로 블로그를 구축하는 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage