How do I add a photo to correct the index in a Ruby on Rails application?

I currently have a Ruby on Rails application where I can upload a photo and number.

<%= 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 %>


When uploading photos, it goes into an unordered list of items.

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


However, I want it to have a grid of 4 lines and 5 images per line. I would like the image to load at the correct index of the number in li. I'm not sure how to do this. I need to make 20 predefined li and then match the index number with the chunk number?

I am assuming that I need to define an index in the model. However, I am not sure if I will make the predefined faces.

  # do I need to make predetermined li's?

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


Then I assume that in the controller I need to write an if else statement similar to this one. I just made an example for the first 3.

  def create
    @masterpiece =

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


Rails v 4.1.4. Using paperclip and aws-sdk to upload photos as a note.


source to share

2 answers

In my question, I think I could be clearer that I needed to have 20 predefined boxes in the grid. These predefined fields will be filled in by default. When the user uploads a photo to one of the grids, it will cycle through each photo. For this question and answer, I will focus solely on customizing the grid.

The default image in this case is just "foo".

I have set the hash file image_urls. For now, the default image will just be "foo" as I didn't want to add links to my s3 bucket on Stackoverflow.

Then I go through all the pieces of the masterpiece. In this loop, I grind the image into a predefined hash, depending on the key hash value, which directly correlates with the chunk number.


  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)

    @image_urls = image_urls


In the view, I continue to use the each_slice method.

  <% @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>
    <% end %>
  <% end %>




Do I need to do 20 predefined li and then match the index number to the chunk number?

Looking at your question, I think all num_pieces are unique and fixed (20), so to show them in grids you can do something like this:

and. Order your caps recordings piece by piece:

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


b. In your index action, cut your records by 5 and show them:

<% @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 %>
<% end %>




All Articles