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

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

Open Gemfile in the project and add

gem 'mini_magick'

under the line

gem 'carrierwave'

In the Terminal run:


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_fit => [50, 50]

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

<%= image_tag idea.picture_url, width: '100%' if idea.picture.present? %>


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

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