显示使用PaperClip在网格中上传的图像拇指

时间:2017-05-19 07:17:36

标签: html css ruby-on-rails ruby

我正在尝试以网格类型的方式显示使用PaperClip上传的六个图像。

无论我尝试什么,图像只显示在一行中。如果我将课程更改为gallery,则每行显示一个图像。

我也试过#each_slice没有运气,使用index是我的最后一次尝试。

index.html.erb

<div class="page-header"><h1>My Work</h1></div>
  <div class="media">
    <% @documents.in_groups_of(3, false).each_with_index do |document_group, index| %>
      <% document_group.each do |document| %>
        <div class="media-left">
          <% if index < 3 %>
          <%= link_to image_tag(document.doc.url, class: 'media-object', size:"108x152"), document.doc.url, target: '_blank' %>
          <%= link_to 'Remove', document_path(document), class: 'btn btn-danger', method: :delete, data: {confirm: 'Are you sure?'} %>
        </div>
        <div class="media-body">
          <h4 class="media-heading"><%= document.title %></h4>
        </div>
        <% end %>
      <% end %>
    <% end %>  
  </div>
</div>

documents_controller.rb

class DocumentsController < ApplicationController
  def index
    @documents = Document.order('created_at')
  end
end

1 个答案:

答案 0 :(得分:0)

用Ruby解决这个问题确实不是问题。你的拇指是固定的宽度吗?如果是这样的话,你可以将它们放在3x的div中{拇指宽度+任何边距,需要填充},在任何一行只允许三个空间。

或者,您可以使用nth child选择器吗?