Associate photo to album

Before we associate the album and photo model, it would be better to plan the entry point — routes. By doing that, we can have a clear blueprint on how the app should redirect.

Target URL:

/                                   home page
/albums/new                         create album
/albums/:album_id                   show spceific album with photos
/albums/:album_id/photos/new        create photo
/albums/:album_id/photos/:photo_id  show specific photo

Important: Do not underestimate the power of URL design. It acts as the entry point of your web app. Your users bookmark it; They share it; They hack it; And Google indexes it.

Do not under estimate the power of URL design

We want to update the routes.rb file to reflect our URL design.

PhotoGallery::Application.routes.draw do
  resources :albums do
    resources :photos
  end
end

The association starts in the model.

album.rb file.

class Album < ActiveRecord::Base
  attr_accessible :title
  has_many :photo
end

photo.rb file.

class Photo < ActiveRecord::Base
  attr_accessible :title, :file, :album_id
  has_attached_file :file, styles: { medium: "300x300>", thumb: "100x100>" }, default_url: "/images/:style/missing.png"
  belongs_to :album
end

Now photos is nested inside albums. This means all our photo actions will need the @album instance. We can do that by using before_filter (or before_action in rails 4).

In the photos_controller.rb file, add the before_filter line at the beginning and the private methods at the end, before the class end.

before_filter :set_album

private
def set_album
  @album = Album.find params[:album_id]
end

Then we change all the Photo reference to @album.photos because every photos collection querying is bound by the @album.

And before saving the photo, we set the photo to the associated album again.

@photo.album = @album

Note: before_filter means running the given method before running every actions. We can use :only action to run it only in a given list of methods. Or we can use :except for a list of methods that doesn’t run the given method.

Example on using before_filter:

before_filter :authorize, except: [:index, :show]
before_filter :authorize, only: :delete

And here is the full photos_controller.rb file dump, in case you failed to complete the changes:

 class PhotosController < ApplicationController
 
   before_filter :set_album
 
   def show
     @photo = @album.photos.find params[:id]
   end
 
   def new
    @photo = @album.photos.new
  end

  def create
    @photo = @album.photos.new params[:photo]
    @photo.album = @album
    if @photo.save
      redirect_to @album
    else
      render :new
    end
  end

  def edit
    @photo = @album.photos.find params[:id]
  end

  def update
    @photo = @album.photos.find params[:id]

    if @photo.update_attributes params[:photo]
      redirect_to @album
    else
      render :edit
    end
  end

  private
  def set_album
    @album = Album.find params[:album_id]
  end

end

And then the views update.

views/photos/show.html.erb file.

<%= link_to 'Edit', edit_photo_path(@photo) %>

# becomes =>

<%= link_to 'Edit', edit_album_photo_path(@album, @photo) %>

As a bonus, we can also create a breadcrumb when showing the photo:

views/photos/show.html.erb file.

<p>
  <%= link_to @album.title, @album %>
  /
  <%= @photo.file_file_name %>
</p>

Note: As documented in the paperclip gem, we can use <attachment>_file_name to refer to the filename string.

This is how the breadcrumb looks like:

views/photos/_form.html.erb file.

 <%= form_for [@album, @photo], html: { :multipart => true } do |f| %>
 
   ...
 
   <p>
     <%= f.submit 'Upload Photo' %>
     or
     <%= link_to 'Cancel', [@album, @photo] %>
   </p>

<%- end %>

First, we get the @album reference in the albums_controller.rb file.

class AlbumsController < ApplicationController
  def show
    @album = Album.find params[:id]
  end

  ...
end

Now we can list all the photos in the album.

Add the views/albums/show.html.erb file with the following HTML/ERB code

 <h1><%= @album.title %></h1>
 
 <p><%= link_to 'Upload new photo', new_album_photo_path(@album) %></p>
 
 <% @album.photos.each do |photo| %>
   <%= link_to [@album, photo] do %>
     <%= image_tag photo.file.url(:thumb) %>
   <% end %>
 <% end %>

When test the code in browser, the albums list the photos and show the photo after clicking on it.

What’s next? We’re going to take a look at “Introducing asset pipeline”.