【Rails】CarrierWave+MiniMagickでユーザーアイコンを作る

CarrierWave + MiniMagickでユーザーアイコンを作ります。

バージョン情報

• rails 5.2.3
• ruby 2.6.3

ユーザーアイコンを作る

元画像を切り抜く

width 100px, height 100pxで切り抜き、第三引数で切り抜きを行う際の中心点を指定します。

(app/uploaders/icon _uploader.rb)

process resize_to_fill: [100, 100, "Center"]

サムネイルの設定

30×30のサムネイルを設定します。.icon.thumb.urlで呼び出せます。
(app/uploaders/icon _uploader.rb)

version :thumb do
  process resize_to_fit: [30, 30]
end

画像の表示

ヘッダーにはサムネイルを表示します。

(app/views/layouts/appliacation.html.erb)

<%= image_tag current_user.icon.thumb.url, class: 'icon'%>

プロフィールページにはそのまま表示します。

(app/views/users/show.html.erb)

<%= image_tag @user.icon.url, class: 'icon'%>

丸くデザイン

cssで丸くデザインします。

(app/assets/stylesheets/styles.css)

.icon {
  border-radius: 50%;
}

複数のサムネイル

ちなみに、サムネイルは複数設定できます。

(app/uploaders/icon _uploader.rb)

version :thumb30 do
  process resize_to_fit: [30, 30]
end

version :thumb50 do
  process resize_to_fit: [50, 50]
end

それぞれ、.icon.thumb30.url、.icon.thumb50.urlで呼び出すことができます。