如何在Ruby on Rails应用程序中将照片添加到正确的索引？

Question

我目前有一个Ruby on Rails应用程序，我可以上传照片和数字。

<%= form_for(@masterpiece) do |f| %>
  <%= f.label :user_piece %><br>
  <%= f.file_field :user_piece %><br>
  <%= f.label :piece_number %><br>
  <%= f.number_field :piece_number %>
  <%= f.submit %>
<% end %>

照片上传后，会转到无序的项目列表。

  <ul>
    <% @masterpieces.each do |masterpiece| %>
      <li><%=image_tag masterpiece.user_piece.url(:square) %></li>
    <% end %>
  </ul>

但是，我希望每行有一个4行和5个图片的网格。 我想将图片上传到li中正确的数字索引。 我不知道该如何解决这个问题。 我是否需要制作20个预定的li，然后将索引号与件号相匹配？

我的猜测是我需要确定模型中的索引。 但是，我不确定我是否会对预先确定的李。

  # do I need to make predetermined li's?

  def determine_index
    # take the piece_number
    # have piece number correlate to index
  end

然后我在控制器中猜测我需要写一个与此类似的if else语句。 我只为前三个做了一个例子。

  def create
    @masterpiece = Masterpiece.new(masterpiece_params)

    respond_to do |format|
      if @masterpiece.save
        index_placement = @masterpiece.determine_placement
        if index_placement == 1
          # put in the first li
        elsif index_placement == 2
          # putin the second li
        else
          # put in the 3rd li
        end
        format.html { redirect_to masterpieces_url }
      else
        format.html { render :index }
      end
    end
  end

Rails v 4.1.4。 使用paperclip和aws-sdk上传照片作为旁注。

Answer 1

在我的问题中，我想我可以更清楚地知道我需要在网格中有20个预定的盒子。 这些预定的框将填充默认图像。 一旦用户将照片上传到其中一个网格，它就会循环显示每张照片。 在这个问答中，我将专注于建立网格。

在这种情况下，默认图像只是“foo”。

我设置了image_urls的哈希值。 目前，默认图像只是“foo”，因为我不想在Stackoverflow上添加链接到我的s3存储桶。

然后我循环遍历杰作的所有部分。 在这个循环中，我将图像铲入预定的散列，取决于散列的键值，它直接与片段号相关联。

masterpieces_controller.rb

  def index
    image_urls = {
      1 => ["foo"],
      2 => ["foo"],
      3 => ["foo"],
      4 => ["foo"],
      5 => ["foo"],
      6 => ["foo"],
      7 => ["foo"],
      8 => ["foo"],
      9 => ["foo"],
      10 => ["foo"],
      11 => ["foo"],
      12 => ["foo"],
      13 => ["foo"],
      14 => ["foo"],
      15 => ["foo"],
      16 => ["foo"],
      17 => ["foo"],
      18 => ["foo"],
      19 => ["foo"],
      20 => ["foo"],
    }

    Masterpiece.all.each do |masterpiece|
      image_urls[masterpiece.piece_number] << masterpiece.user_piece.url(:square)
    end

    @image_urls = image_urls
  end

在视图中，我将继续使用each_slice方法。

  <ul>
  <% @image_urls.each_slice(5) do |row| %>
    <% row.each do |_, urls| %>
      <li class="square-image" data-urls=<%= urls.to_json %>>
        <span class="user-image"><%= image_tag(urls.sample) %></span>
      </li>
    <% end %>
  <% end %>
  </ul>

Answer 2

我是否需要制作20个预定的li，然后将索引号与件号相匹配？

看看你的问题我认为所有的piece_numbers都是唯一且固定的（20）所以要在网格中显示它们你可以做这样的事情：

一种。 通过piece_number订购您的杰作记录：

@masterpieces = Masterpiece.order("piece_number") #this will order them in ascending order by the piece_number field in your table

湾 在您的索引操作中，将记录切成5并显示出来：

<% @masterpieces.each_slice(5) do |slice| %>
 <ul class="clearfix">
    <% slice.each do |masterpiece| %>
      <li class="pull-left"><%=image_tag masterpiece.user_piece.url(:square) %></li>
    <% end %>
 </ul>
<% end %>