You're reading the blog of Vincent Cabansag.
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.
You're reading the 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:
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:
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: