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.
- 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-getfor other distributions.
Coach: What is ImageMagick and how is it different from libraries/gems we used before?
Gemfile in the project and add
gem 'mini_magick', '3.5.0'
under the line
In the Terminal run:
Telling our app to create thumbnails when an image is uploaded
app/uploaders/picture_uploader.rb and find the line that looks like
# include CarrierWave::MiniMagick
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.
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>
<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.