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
- macOS: 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). In the installation wizard, make sure you check the checkbox to install legacy binaries.
Linux: On Ubuntu and Debian, run
sudo apt-get install imagemagick. Use the appropriate package manager instead of
apt-getfor other distributions.
Coach: Explain what is ImageMagick and how is it different from libraries/gems we used before?
Gemfile in the project and add
under the line
In the Terminal run:
2. Telling our app to create thumbnails when an image is uploaded
app/uploaders/picture_uploader.rb and find the line that looks like
Coach: Explain the concept of comments in code.
Below the line you just changed, add:
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
Take a look at the list of ideas in the browser to see if the thumbnail is there.
- Handy cheatsheet for Ruby, Rails, console etc.
- Guide 1: Guide to install Rails
- Guide 2: Build Your First App
- Guide 3: Push Your App to GitHub
- Guide 4: Put your app online with…
- Guide 5: Allow Comments on Your App
- Guide 6: Add design using HTML & CSS
- Guide 7: Create thumbnails with Carrierwave (Current page!)
- Guide 8: Add Authentication (user accounts) with Devise
- Guide 9: Add Profile Pics with Gravatar
- Guide 10: Improve your design with HTML and CSS
- Guide 11: Continuous Deployment
- Guide 12: Build a voting app in Sinatra
- Guide 13: Build a diary app in Ruby on Rails
- Guide 14: Add a back-end to your app (admin pages)
- Guide 15: Go through additional explanations for the App