How difficult would be adding more than one picture to a listing?

I was just thinking how difficult it would be to add more than one pic to a listing. Most of the cases one pic is enough but what if the seller wants more. For sure I need to rethink the show page but the main question is more about the model/controller part.

Posted almost 6 years ago by Szabolcs Toth
Posted almost 6 years ago by Alex Yang

Adding multiple images to a listing can get pretty complex. The simplest way to do it is to just add more images. So you can run 'rails generate paperclip listing image2', run 'rake db:migrate', and restart your server. Now add a second 'has_attached_file' line in your app/models/listing.rb file. Of course, you'll also need to adjust your View pages (e.g. new listing form), but now you'll be able to have two image attachments per listing.

If you want to have a variable number of image attachments, it's a lot more complicated. I'll walk you through all the model and database setup to get you started, and you can look into adjusting your View pages on your own. I'll explain this at a high level for now, but will probably need to make a video in the future to show you directly :-)

With a single image, paperclip can handle a lot of the work for us by just adding the relevant image-related columns to our Listing database. With multiple images, we'll need to create a separate database to store all our image info and which listings they're attached to.

1. First generate a new Picture model (e.g. "rails generate model picture listing_id:integer") that's linked to a specific Listing (that's why we need to have the listing_id column). Run this new migration with "rake db:migrate" and restart your server if necessary.

2. Now let's add the image-related fields to our Picture database. Run "rails generate paperclip picture image", then "rake db:migrate" and restart your server if necessary. Now our Picture database will basically contain information about each image AND the Listing that each image is attached to.

3. Make sure to tell Rails about the relationship between a Listing and a Picture. In this case, a specific Picture belongs to a Listing and a specific Listing can have many attached Pictures. So in app/models/picture.rb, we need to add something like this:

belongs_to :listing
has_attached_file :image, :styles => { :medium => "200x", :thumb => "100x100>" }, :default_url => "default.jpg"
validates_attachment :image, :content_type => { :content_type => %w(image/jpeg image/jpg image/png) }

And then in app/models/listing.rb, we need to add something like this ("dependent: :destroy" will make sure that when a Listing is deleted, any attached Pictures are deleted as well):

has_many :pictures, dependent: :destroy

With the models and database set up, now you'll need to decide how you want to upload and display your attachments. I'll leave that to you to figure out!

Posted about 4 years ago by Alexis Soibelman

Hey there,

I went through all of your steps, but I'm at a loss what to write on my show.html.erb page!

Posted about 4 years ago by Alex Yang

This totally depends on what exactly you want to display on the page, so you should play around and decide what you prefer. For example, if you want to display all the picture images for a specific listing (stored in the @listing variable), you could use the code below:

<% do |picture| %>
<%= image_tag picture.image.url %>
<% end %>

Hope that helps!