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.
<ul>
<% @masterpieces.each do |masterpiece| %>
<li><%=image_tag masterpiece.user_piece.url(:square) %></li>
<% end %>
</ul>
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
end
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 = 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. Using paperclip and aws-sdk to upload photos as a note.
source to share
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.
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
In the view, I continue to use the each_slice method.
<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>
source to share
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 %>
</ul>
<% end %>
source to share