Criando thumbnails com Carrierwave

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

Coach: 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

• OS X: rode brew install imagemagick. Se o comando brew não estiver disponível no seu terminal, instale install Homebrew here.
• Windows: faça o download e rode o ImageMagick installer (use o primeiro link do download ).

• Linux: em Ubuntu e Debian, rode sudo apt-get install imagemagick. Use o gerenciador de package apropriado em lugar de apt-get para as demais distribuições Linux.

Coach: 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', '3.8.0'

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 #.

Coach: 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_fill => [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.