Tạo thumbnails với Carrierwave

Viết bởi Miha Filej, @mfilej

Coach: Giải thích những quy định cụ thể chiều rộng ảnh trong HTML ở cuối bước 4 và khác như thế nào so với trên server.

1. Cài đặt ImageMagick

• OS X: chạy lệnh trong command brew install imagemagick. Nếu bạn không có brew command, bạn có thể cài đặt Homebrew ở đây
• Windows: tải và chạy ImageMagick installer
• Linux: Trên Ubuntu và Debian, chạy sudo apt-get install imagemagick. Với những bản phân phối linux khác, bạn có thể sử dụng trình quản lý riêng thay cho apt-get.

Coach: ImageMagick là gì và khác với những libraries/gems mà chúng ta sử dụng trước đó như thế nào?

Mở Gemfile trong project và thêm:

gem 'mini_magick', '3.8.0'

ngay bên dưới dòng

gem 'carrierwave'

trong Terminal chạy:

bundle

và nhớ khởi động lại server

2. Tạo thumbnails khi ảnh đã được upload

Mở app/uploaders/picture_uploader.rb và tìm dòng:

# include CarrierWave::MiniMagick

bỏ dấu #

Coach: Giải thích khái niệm comment trong code

Phía dưới dòng mới thay đổi, thêm:

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

Những hình ảnh tải lên từ bây giờ sẽ được thay đổi kích thước, nhưng những ảnh đã tải lên trước đó sẽ không được thay đổi. Chúng ta có thể sửa chúng bằng cách sửa idea và upload lại ảnh.

3. Hiện thị thumbnails

Để thấy được những ảnh đã tải lên được thay đổi kích thước, mở app/views/ideas/index.html.erb

Thay dòng

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

thành

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

Ngay bây giờ, bạn hãy mở trình duyệt lên để thấy được thumbnail ảnh.

Những câu hỏi nâng cao

A Dễ

Hiện thị ảnh thumbnail trong trang app/views/ideas/show.html.erb

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

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

Code mẫu

B Bình thường

Định nghĩa thêm những version khác và sử dụng trong trang app/views/ideas/index.html.erb. Ví dụ: version :small_thumb, from_version: :thumb

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

version :small_thumb, from_version: :thumb do
  process resize_to_fill: [20, 20]
end

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

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

Code mẫu

C Khó

Lưu trữ ảnh trên dịch vụ cloudinary.com sử dụng carrierwave và hiện thị lên trình duyệt trong trang app/views/ideas/index.html.erb.

config/cloudinary.yml

gem "carrierwave"
gem "cloudinary"

bundle install

...
# include CarrierWave::MiniMagick
...
# storage :file
...
# def store_dir
#   "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
# end

class PictureUploader < CarrierWave::Uploader::Base

include Cloudinary::CarrierWave

Code mẫu