Crie thumbnails com Carrierwave

Criado por Miha Filej, @mfilej

Coach: Explicar qual o efeito de se definir a largura de uma imagem na marcação HTML e qual a diferença para o redimensionamento de imagem no servidor.

Instalando ImageMagick

• OS X: rode: brew install imagemagick

• Windows: faça o download e rode o Instalador do ImageMagick installer (use o primeiro link para download).

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

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

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

Abra app/uploaders/picture_uploader.rb e encontre a seguinte linha de código:

  # include CarrierWave::MiniMagick

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

Mostrando um thumbnail

Para verificar se uma imagem enviada ao servidor foi redimensionada abra app/views/ideas/index.html.erb. Altere a seguinte linha de código:

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