2017-05-19 5 views
0

Ich versuche, sechs Bilder mit PaperClip in einer Raster-Art hochgeladen anzuzeigen.Anzeigen Bild Thumbs hochgeladen mit PaperClip in einem Raster

Was auch immer ich versuche, die Bilder nur in einer Zeile angezeigt werden soll. Wenn ich die Klasse zu gallery ändere, zeigt es stattdessen ein Bild pro Zeile an.

Ich habe auch #each_slice ohne Glück versucht, und mit index war mein letzter Versuch.

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 
+0

Haben Sie sich Flexbox angesehen? https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

Antwort

0

Das Ruby gelöst nicht wirklich ein Problem werden. Sind deine Daumen eine feste Breite? Wenn ja, könnten Sie sie in ein div von 3x {Daumenbreite + was auch immer Ränder, Polsterung benötigt wird}, so dass Platz für nur drei auf jeder Linie.

Oder könnten Sie nth child Wähler vielleicht benutzen?