You're reading the blog of Vincent Cabansag.
Profile photoYou're reading the blog of Vincent Cabansag.
Profile photoYou're reading the blog of Vincent Cabansag.

Configuring the Paperclip Gem

I decided that it's time to include photos on this blog. It was looking a bit too minimalistic for my tastes. Although I wanted to handcraft the functionality, I chose to go with the Paperclip gem because I've read good feedback about it. So far, it's working well and it wasn't too difficult to configure.

Also, this blog is hosted on Heroku and, from my understanding, Heroku requires that you have a separate solution for storage. That solution is Amazon's S3 storage service which I'll go over as well.

So let's get started with the first step which is to include the necessary gems for your Rails app. Edit your gem file to include both the paperclip gem and the aws-s3 gem as followed:

#Gemfile
gem 'paperclip'
gem 'aws-s3'

Run a quick bundle to get the gems installed.

bundle

Next step is to create some space in your tables for the image attributes. I created columns in my Post table with the migration command and it looked like this:

rails generate migration AddImageColumnsToPost image_file_name:string image_content_type:string stringimage_file_size:integer image_updated:datetime

Don't forget to migrate your database:

rake db:migrate

Modify the model in which you plan to attach images. In my case, I edited the Post model with the syntax below. It includes styling for different types of image sizes and credentials for connecting to Amazon's S3 services. You will need to create an AS3 account, and get a public and private key. Here's a quick look of my Post model.

class Post < ActiveRecord::Base

  has_attached_file :image, :styles => { :medium => "640x640>" },
                    :storage => :s3,
                    :bucket => 'BUCKET NAME',
                    :s3_credentials => Rails.root.join('config', 's3.yml')
end

Although you can put your S3 keys directly in the model, I found some advice on Stack Overflow that recommends setting up a separate s3.yml file in the config directory of your app with the keys. This will help with discrepancies between your production and development environment. Here's what my s3.yml file looked like:

#config/s3.yml

development:
  access_key_id: AS3 ACCESS KEY
  secret_access_key: AS3 ACCESS KEY
  bucket: BUCKET NAME

production:
  access_key_id: AS3 ACCESS KEY
  secret_access_key: AS3 SECRET KEY
  bucket: BUCKET NAME

Modify your upload form to reference the :image hash.

<% f.file_field :image %>

Also modify your views to include the image method that will call the image stored on AS3 for the given object. My Post object has an attached file which can be called using the image method that I defined in the Post model. It doesn't have to be named image, but it seemed appropriate for a blog.

<%= image_tag @post.image.url(:medium) %>

Push your changes up to Heroku and see if it works. I had to run the following command to get my keys to work.

heroku config:add S3_KEY=abcd S3_SECRET=abcd

If you need additional help check out the following guides which are definitely helpful:

Heroku: Uploading Files to S3

Heroku: Configuration and Config Vars

GitHub: paperclip

Back to all blog posts

Configuring the Paperclip Gem

I decided that it's time to include photos on this blog. It was looking a bit too minimalistic for my tastes. Although I wanted to handcraft the functionality, I chose to go with the Paperclip gem because I've read good feedback about it. So far, it's working well and it wasn't too difficult to configure.

Also, this blog is hosted on Heroku and, from my understanding, Heroku requires that you have a separate solution for storage. That solution is Amazon's S3 storage service which I'll go over as well.

So let's get started with the first step which is to include the necessary gems for your Rails app. Edit your gem file to include both the paperclip gem and the aws-s3 gem as followed:

#Gemfile
gem 'paperclip'
gem 'aws-s3'

Run a quick bundle to get the gems installed.

bundle

Next step is to create some space in your tables for the image attributes. I created columns in my Post table with the migration command and it looked like this:

rails generate migration AddImageColumnsToPost image_file_name:string image_content_type:string stringimage_file_size:integer image_updated:datetime

Don't forget to migrate your database:

rake db:migrate

Modify the model in which you plan to attach images. In my case, I edited the Post model with the syntax below. It includes styling for different types of image sizes and credentials for connecting to Amazon's S3 services. You will need to create an AS3 account, and get a public and private key. Here's a quick look of my Post model.

class Post < ActiveRecord::Base

  has_attached_file :image, :styles => { :medium => "640x640>" },
                    :storage => :s3,
                    :bucket => 'BUCKET NAME',
                    :s3_credentials => Rails.root.join('config', 's3.yml')
end

Although you can put your S3 keys directly in the model, I found some advice on Stack Overflow that recommends setting up a separate s3.yml file in the config directory of your app with the keys. This will help with discrepancies between your production and development environment. Here's what my s3.yml file looked like:

#config/s3.yml

development:
  access_key_id: AS3 ACCESS KEY
  secret_access_key: AS3 ACCESS KEY
  bucket: BUCKET NAME

production:
  access_key_id: AS3 ACCESS KEY
  secret_access_key: AS3 SECRET KEY
  bucket: BUCKET NAME

Modify your upload form to reference the :image hash.

<% f.file_field :image %>

Also modify your views to include the image method that will call the image stored on AS3 for the given object. My Post object has an attached file which can be called using the image method that I defined in the Post model. It doesn't have to be named image, but it seemed appropriate for a blog.

<%= image_tag @post.image.url(:medium) %>

Push your changes up to Heroku and see if it works. I had to run the following command to get my keys to work.

heroku config:add S3_KEY=abcd S3_SECRET=abcd

If you need additional help check out the following guides which are definitely helpful:

Heroku: Uploading Files to S3

Heroku: Configuration and Config Vars

GitHub: paperclip

Back to all blog posts

Configuring the Paperclip Gem

I decided that it's time to include photos on this blog. It was looking a bit too minimalistic for my tastes. Although I wanted to handcraft the functionality, I chose to go with the Paperclip gem because I've read good feedback about it. So far, it's working well and it wasn't too difficult to configure.

Also, this blog is hosted on Heroku and, from my understanding, Heroku requires that you have a separate solution for storage. That solution is Amazon's S3 storage service which I'll go over as well.

So let's get started with the first step which is to include the necessary gems for your Rails app. Edit your gem file to include both the paperclip gem and the aws-s3 gem as followed:

#Gemfile
gem 'paperclip'
gem 'aws-s3'

Run a quick bundle to get the gems installed.

bundle

Next step is to create some space in your tables for the image attributes. I created columns in my Post table with the migration command and it looked like this:

rails generate migration AddImageColumnsToPost image_file_name:string image_content_type:string stringimage_file_size:integer image_updated:datetime

Don't forget to migrate your database:

rake db:migrate

Modify the model in which you plan to attach images. In my case, I edited the Post model with the syntax below. It includes styling for different types of image sizes and credentials for connecting to Amazon's S3 services. You will need to create an AS3 account, and get a public and private key. Here's a quick look of my Post model.

class Post < ActiveRecord::Base

  has_attached_file :image, :styles => { :medium => "640x640>" },
                    :storage => :s3,
                    :bucket => 'BUCKET NAME',
                    :s3_credentials => Rails.root.join('config', 's3.yml')
end

Although you can put your S3 keys directly in the model, I found some advice on Stack Overflow that recommends setting up a separate s3.yml file in the config directory of your app with the keys. This will help with discrepancies between your production and development environment. Here's what my s3.yml file looked like:

#config/s3.yml

development:
  access_key_id: AS3 ACCESS KEY
  secret_access_key: AS3 ACCESS KEY
  bucket: BUCKET NAME

production:
  access_key_id: AS3 ACCESS KEY
  secret_access_key: AS3 SECRET KEY
  bucket: BUCKET NAME

Modify your upload form to reference the :image hash.

<% f.file_field :image %>

Also modify your views to include the image method that will call the image stored on AS3 for the given object. My Post object has an attached file which can be called using the image method that I defined in the Post model. It doesn't have to be named image, but it seemed appropriate for a blog.

<%= image_tag @post.image.url(:medium) %>

Push your changes up to Heroku and see if it works. I had to run the following command to get my keys to work.

heroku config:add S3_KEY=abcd S3_SECRET=abcd

If you need additional help check out the following guides which are definitely helpful:

Heroku: Uploading Files to S3

Heroku: Configuration and Config Vars

GitHub: paperclip

Back to all blog posts