A Few Gems

Learn how to enhance your Rails app by integrating RubyGems like Paperclip for file uploads. Set up gems, migrations, and image attachments easily.

Introduction to RubyGems

RubyGems is Ruby's package management system that allows you to quickly add functionality to your Rails applications. In this guide, we'll implement:

Paperclip for file attachments
Sass for advanced CSS
Asset Pipeline for managing static files

Adding Paperclip for File Uploads

Installation

Add to your Gemfile:

gem "paperclip"

Then run:

bundle install

Database Setup

Generate a migration:

rails generate migration add_paperclip_fields_to_article

Edit the migration file:

class AddPaperclipFieldsToArticle < ActiveRecord::Migration
  def change
    add_column :articles, :image_file_name,    :string
    add_column :articles, :image_content_type, :string
    add_column :articles, :image_file_size,    :integer
    add_column :articles, :image_updated_at,   :datetime
  end
end

Run the migration:

rake db:migrate

Model Configuration

In app/models/article.rb:

has_attached_file :image
validates_attachment_content_type :image, 
  :content_type => ["image/jpg", "image/jpeg", "image/png"]

Update strong parameters in your controller:

def article_params
  params.require(:article).permit(:title, :body, :tag_list, :image)
end

Form Setup

In app/views/articles/_form.html.erb:

<%= form_for(@article, html: {multipart: true}) do |f| %>

<p>
  <% if @article.image.exists? %>
    <%= image_tag @article.image.url %><br/>
  <% end %>
  <%= f.label :image, "Attach an Image" %><br />
  <%= f.file_field :image %>
</p>

Displaying Images

In app/views/articles/show.html.erb:

<% if @article.image.exists? %>
  <p><%= image_tag @article.image.url %></p>
<% end %>

Advanced Paperclip Features

To enable image resizing:

has_attached_file :image, 
  styles: { medium: "300x300>", thumb: "100x100>" }

Then display with:

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

Note: Requires ImageMagick to be installed.

Working with Sass

Example Sass file (app/assets/stylesheets/styles.css.scss):

$primary_color: #AAA;

body {
  background-color: $primary_color;
  font: {
    family: Verdana, Helvetica, Arial;
    size: 14px;
  }
}

a {
  color: #0000FF;
  img {
    border: none;
  }
}

#container {
  width: 75%;
  margin: 0 auto;
  background: #fff;
  padding: 20px 40px;
  border: solid 1px black;
  margin-top: 20px;
}

Understanding Layouts

The default layout (app/views/layouts/application.html.erb) wraps all views:

<!DOCTYPE html>
<html>
<head>
  <title>Blogger</title>
  <%= stylesheet_link_tag "application", media: "all" %>
  <%= javascript_include_tag "application" %>
  <%= csrf_meta_tags %>
</head>
<body>
  <%= yield %>
</body>
</html>

Asset Pipeline

The asset manifest (app/assets/stylesheets/application.css):

/*
 *= require_self
 *= require_tree .
*/

This automatically includes all stylesheets in the directory.

Final Steps

Commit your changes:

git add .
git commit -m "added a few gems"
git push

Now your application has:

File upload capabilities
Advanced CSS with Sass
Efficient asset management

A Few Gems

On this page