Tutoriais Rails Girls

Criando thumbnails com Carrierwave

Criado por Miha Filej, @mfilej
Traduzido por Maujor, site do Maujor

INSTRUTOR(A): Explicar qual o efeito de se definir a largura de uma imagem na marcação HTML como explicado no final do passo 4, constante do tutorial Tutorial para criação da app Rails Girls.

1. Instalando ImageMagick

INSTRUTOR(A): Explique o que é ImageMagick e qual a diferença para outras bibliotecas/gems que já usamos anteriormente?

Abra Gemfile no seu projeto e acrescente o seguinte:

gem 'mini_magick'

logo após a linha

gem 'carrierwave'

No Terminal rode:

bundle

2. Dizendo para a app criar um thumbnail quando uma imagem for enviada ao servidor

Abra app/uploaders/picture_uploader.rb e encontre a linha conforme mostrada a seguir:

  # include CarrierWave::MiniMagick

Remova o sinal #.

INSTRUTOR(A): Explicar o uso e finalidades da inserção de comentários nos códigos.

Logo após a linha que você acabou de descomentar acrescente o seguinte:

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

A partir de agora as imagens enviadas ao servidor serão redimensionadas para criar thumbnails, contudo aquelas já existentes no servidor não serão afetadas. Edite uma das ideas já existentes e reenvie a imagem para o servidor.

3. Mostrando thumbnails

Para verificar se uma imagem enviada ao servidor foi redimensionada abra app/views/ideas/index.html.erb. Altere a linha

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

para

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

Dê uma olhada na lista das ideas, no navegador, para verificar se o thumbnail está ali.

Outros Guias