Trabalhando com Thumbnails ( ImageMagick / PaperClip ) no ruby on rails

Fonte: http://patrickespake.wordpress.com/2008/12/18/instalando-e-usando-o-plugin-paperclip-no-ruby-on-rails/

O plugin paperClip do Ruby on Rails é muito bacana, agiliza muito a vida, com ele é possível fazer upload de imagens e já gerar várias dimensões da imagem.

Vou explicar como instalar e como usar.

Instalação:

Faça o download do paperClip: http://github.com/tarballs/thoughtbot-paperclip-18c0246c11c51dafa77b6367ddaf730684d0e752.zip

Descompacte o arquivo e renomei o diretório extraído para paperclip.

Coloque esse diretório dentro de seu_projeto/vendor/plugins/paperclip.

Você vai precisar do imageMagick, através dele o paperClip faz o resize nas imagens. Para instalar no Ubuntu 8.04 faça:

1. sudo apt-get install imagemagick

sudo apt-get install imagemagick

Configuração:

Para o paperClip funcionar você vai precisar que exista 4 novas colunas na sua tabela são elas: image_file_name, image_content_type, image_file_size, image_updated_at.

Esse nome image_… pode ser qualquer outra coisa por exemplo: avatar_…, foto_…

Seguindo essa ideia você poderia ter um migrate mais ou menos assim:

1. class CreateTournaments < ActiveRecord::Migration
2. def self.up
3. create_table :tournaments do |t|
4. t.column :name, :string, :limit => 100, :null => false
5. t.column :description, :text, :null => true
6. t.column :image_file_name, :string
7. t.column :image_content_type, :string
8. t.column :image_file_size, :integer
9. t.column :image_updated_at, :timestamp
10. t.column :is_active, :boolean, :null => false, :default => false
11. t.column :start_date, :date, :null => false
12. t.column :end_date, :date, :null => false
13. t.column :created_at, :timestamp, :null => false
14. t.column :updated_at, :timestamp, :null => false
15. end
16. end
18. def self.down
19. drop_table :tournaments
20. end
21. end

class CreateTournaments < ActiveRecord::Migration   def self.up     create_table :tournaments do |t|       t.column :name,               :string,    :limit => 100, :null => false       t.column :description,        :text,      :null => true       t.column :image_file_name,    :string       t.column :image_content_type, :string       t.column :image_file_size,    :integer       t.column :image_updated_at,   :timestamp       t.column :is_active,          :boolean,   :null => false, :default => false       t.column :start_date,         :date,      :null => false       t.column :end_date,           :date,      :null => false       t.column :created_at,         :timestamp, :null => false       t.column :updated_at,         :timestamp, :null => false     end   end    def self.down     drop_table :tournaments   end end

Agora é necessário informar o seu model que existirá anexos e que formatos são aceitos:

1. class Tournament < ActiveRecord::Base
2. has_attached_file :image,
3. :styles => {:large => ‘600×600>’, :medium => ‘300×300>’, :small => ‘150×150>’, :thumb => ‘50×50>’},
4. :path => “:rails_root/public/images/:class/:id/:style_:basename.:extension”,
5. :url => “/images/:class/:id/:style_:basename.:extension”
7. validates_uniqueness_of :name
8. validates_presence_of   :name, :start_date, :end_date
9. validates_attachment_content_type :image, :content_type => ['image/jpeg', 'image/png', 'image/gif']
10. end

class Tournament < ActiveRecord::Base   has_attached_file :image,                     :styles => {:large => '600x600>', :medium => '300x300>', :small => '150x150>', :thumb => '50x50>'},                     :path => ":rails_root/public/images/:class/:id/:style_:basename.:extension",                     :url => "/images/:class/:id/:style_:basename.:extension"    validates_uniqueness_of :name   validates_presence_of   :name, :start_date, :end_date   validates_attachment_content_type :image, :content_type => ['image/jpeg', 'image/png', 'image/gif'] end

O interessante da linha abaixo, é que posso definir todos os tamanhos de imagens que desejo gerar em cima da imagem original, nesse trecho de código eu também alterei o path de armazenamento das imagens, fiz as imagens ficarem no diretório public_html/images/tournaments/id_do_banco_de_dados/imagens_em_diversas_dimensões:

1. has_attached_file :image,
2. :styles => {:large => ‘600×600>’, :medium => ‘300×300>’, :small => ‘150×150>’, :thumb => ‘50×50>’},
3. :path => “:rails_root/public/images/:class/:id/:style_:basename.:extension”,
4. :url => “/images/:class/:id/:style_:basename.:extension”

  has_attached_file :image,                     :styles => {:large => '600x600>', :medium => '300x300>', :small => '150x150>', :thumb => '50x50>'},                     :path => ":rails_root/public/images/:class/:id/:style_:basename.:extension",                     :url => "/images/:class/:id/:style_:basename.:extension"

A linha seguinte informa os tipos de mime types aceitos:

1. validates_attachment_content_type :image, :content_type => ['image/jpeg', 'image/png', 'image/gif']

  validates_attachment_content_type :image, :content_type => ['image/jpeg', 'image/png', 'image/gif']

Agora você precisa definir que o seu formulário de cadastro trabalha com multipart, para enviar dados binários:

1. <% form_for :tournament, @tournament, :url => { :action => ‘create’ }, :html => { :multipart => true } do |form| %>
2. <%= render :partial => ‘form’, :locals => { :form => form } %>
3. <div class=“submit”><%= submit_tag “Criar” %></div>
4. <% end %>

  <% form_for :tournament, @tournament, :url => { :action => 'create' }, :html => { :multipart => true } do |form| %>     <%= render :partial => 'form', :locals => { :form => form } %>     <div class="submit"><%= submit_tag "Criar" %></div>   <% end %>

No código acima eu chamo o partial _form.rhtml, segue o seu conteúdo abaixo:

1. <%= error_messages_for ‘tournament’ %>
3. <!–[form:tournament]–>
4. <p><label for=“tournament_name”>Nome</label>
5. <%= form.text_field :name %></p>
7. <p><label for=“tournament_description”>Descrição</label>
8. <%= form.text_area :description %></p>
10. <p><label for=“tournament_image”>Imagem</label>
11. <%= form.file_field :image %></p>
13. <p><label for=“tournament_is_active”>Ativo</label>
14. <%= form.check_box :is_active %>
16. <p><label for=“tournament_start_date”>Data de início</label>
17. <%= form.date_select(:start_date,  <img src=“http://s.wordpress.com/wp-includes/images/smilies/icon_surprised.gif” alt=“:o” class=“wp-smiley”> rder => [:day, :month, :year], :use_month_numbers => true) %></p>
19. <p><label for=“tournament_end_date”>Data de término</label>
20. <%= form.date_select(:end_date,  <img src=“http://s.wordpress.com/wp-includes/images/smilies/icon_surprised.gif” alt=“:o” class=“wp-smiley”> rder => [:day, :month, :year], :use_month_numbers => true)  %></p>
21. <!–[eoform:tournament]–>

<%= error_messages_for 'tournament' %>  <!--[form:tournament]--> <p><label for="tournament_name">Nome</label> <%= form.text_field :name  %></p>  <p><label for="tournament_description">Descrição</label> <%= form.text_area :description  %></p>  <p><label for="tournament_image">Imagem</label> <%= form.file_field :image %></p>  <p><label for="tournament_is_active">Ativo</label> <%= form.check_box :is_active  %>  <p><label for="tournament_start_date">Data de início</label> <%= form.date_select(:start_date,   rder => [:day, :month, :year], :use_month_numbers => true) %></p>  <p><label for="tournament_end_date">Data de término</label> <%= form.date_select(:end_date,   rder => [:day, :month, :year], :use_month_numbers => true)  %></p> <!--[eoform:tournament]-->

Nesse partial _form.rhtml é declarado o campo para upload da imagem:

1. <%= form.file_field :image %>

<%= form.file_field :image %>

Perceba que na tabela do banco de dados não existe a coluna chamada image, mas sim aquelas 4 que criei no migrate. Aqui que entra a mágica do paperClip juntamente com o model, ele consegue fazer o upload da imagem e definir os valores para os 4 campos no model.

Para exibir as imagens e suas diversas proporções use:

1. <%= image_tag @tournament.image.url(:thumb)  %>
2. <%= image_tag @tournament.image.url(:small)  %>
3. <%= image_tag @tournament.image.url(:medium)  %>
4. <%= image_tag @tournament.image.url(:large)  %>

<%= image_tag @tournament.image.url('/d3i/:thumb')  %> <%= image_tag @tournament.image.url('/d3i/:small')  %> <%= image_tag @tournament.image.url('/d3i/:medium')  %> <%= image_tag @tournament.image.url('/d3i/:large')  %>

Pronto! Depois de pegar o jeito com o paperClip você vai dar risada a toa.

Fonte: http://patrickespake.wordpress.com/2008/12/18/instalando-e-usando-o-plugin-paperclip-no-ruby-on-rails/