Create thumbnails with Carrierwave

Created by Miha Filej, @mfilej

Coach: Explain what specifying the image width in HTML at the end of Step 4 does and how it differs from resizing images on the server.

1.Installing ImageMagick

• OS X: run brew install imagemagick. If you don’t have the brew command, you can install Homebrew here.
• Windows: download and run the ImageMagick installer (use the first download link).

• Linux: On Ubuntu and Debian, run sudo apt-get install imagemagick. Use the appropriate package manager instead of apt-get for other distributions.

Coach: What is ImageMagick and how is it different from libraries/gems we used before?

Open Gemfile in the project and add

gem 'mini_magick', '3.8.0'

under the line

gem 'carrierwave'

In the Terminal run:

bundle

2.Telling our app to create thumbnails when an image is uploaded

Open app/uploaders/picture_uploader.rb and find the line that looks like this:

  # include CarrierWave::MiniMagick

Remove the # sign.

Coach: Explain the concept of comments in code.

Below the line you just changed, add:

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

The images uploaded from now on should be resized, but the ones we already have weren’t affected. So edit one of the existing ideas and re-add a picture.

3.Displaying the thumbnails

To see if the uploaded picture was resized open app/views/ideas/index.html.erb. Change the line

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

to

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

Take a look at the list of ideas in the browser to see if the thumbnail is there.