Tutoriais Rails Girls

Upload de imagens e miniaturas

Criado por Myriam Leggieri, @iammyr para Rails Girls Galway

*Traduzido por Rafael Vianna, @RFerreiraVianna

Os guias básicos que foram mesclados e adaptados são os Ruby on Rails Tutorial, o basic RailsGirls app e os tutoriais são: creating thumbnails, authenticating users, adding design, deploying to OpenShift e adding comments.

Nós precisamos instalar uma nova Gem que nos permita fazer upload de arquivos no Rails.

Abra Gemfile na sua pasta do projeto usando seu editor de texto e adicione:

gem 'carrierwave'

No terminal execute:

bundle

Agora podemos gerar o código para a execução do upload. No terminal, execute:

rails generate uploader Picture

Nesse momento você irá precisar reiniciar o servidor do Rails no terminal.

Precione Ctrl+C no terminal para parar o servidor. Uma vez parado, você pode apertar a seta pra cima no seu teclado para encontrar o último comando executado, então pressione o enter para iniciar o servidor novamente.

Isso é necessário para que o app carregue a biblioteca adicionada.

Abra app/models/place.rb e adicione:

mount_uploader :picture, PictureUploader

Abra app/views/places/_form.html.erb e mude:

<%= f.text_field :picture %>

para:

<%= f.file_field :picture %>

Algumas vezes você pode obter um TypeError: can’t cast ActionDispatch::Http::UploadedFile to string.

Se isso acontecer, no arquivo app/views/places/_form.html.erb mude a linha:

<%= form_for(@place) do |f| %>

para:

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

Agora, se você executar o seu servidor e tentar adicionar um novo local com uma imagem, você notará que a imagem não parece bonita porque mostra apenas um caminho para o arquivo. Vamos consertar isso.

Abra app/views/places/show.html.erb e mude:

<%= @place.picture %>

para:

<%= image_tag(@place.picture_url, :width => 600) if @place.picture.present? %>

Agora recarregue seu navegador para ver a mudança.

Instrutor(a): Fale um pouco sobre HTML.

Instrutor(a): Explique o que especifica a largura da imagem em HTML no final da etapa 4 e como ele difere do redimensionamento de imagens no servidor.

Instalando ImageMagick

Instrutor(a): O que é ImageMagick e o que difere das bibliotecas usadas anteriormente?

Abra Gemfile no projeto e adicione:

gem 'mini_magick', '3.5.0'

No terminal execute:

bundle

Fazendo nosso app criar miniaturas quando uma imagem é adicionada

Abra app/uploaders/picture_uploader.rb e ache a seguinte linha:

# include CarrierWave::MiniMagick

Remova o #.

Instrutor(a): Explique o conceito de comentários no código..

Abaixo da linha que você acabou de alterar, adicione:

version :thumb do
  process :resize_to_fill => [50, 50]
end

As imagens carregadas a partir de agora serão redimencionadas, mas as imagens que já foram feitas não serão afetadas. Então, edite um dos lugares existentes e volte a adicionar uma imagem.

Mostrando as thumbnails

Para ver se a imagem carregada foi redimencionada abra, app/views/places/index.html.erb. Mude a linha:

<td><%= place.picture %></td>

para:

<td><%= image_tag place.picture_url(:thumb) if place.picture? %></td>

Dê uma olhada no seu navegador para ver se a miniatura está lá.

Outros Guias