How to implement a circular profile image in Rails using CarrierWave and R Magick

What is Carrierwave?

It is a gem that allows you to easily add an image file upload function.

What is RMgick

You can change the size of the image file and crop the center of the image. Even a rectangular image can be made into a beautiful square image. (Because it can be extracted from the center with the specified size)

• There is another gem called ** minimagick ** that allows you to change the size of the image file, but this time we will not handle it.

version

Ruby 2.7.0 Rails 6.0.2.1 carrierwave 2.1.0 rmagick 4.0.0

Step 1 ・ Introduce Carrierwave

First, install the following gem

Gemfile.

gem 'carrierwave'

Then do bundle install. Then create an uploader with rails g uploader image.

Terminal.

＄ bundle install

＄ rails g uploader image

app/uploaders/image_uploader.rb //The file will be created

If you don't have an image column, you have to create one. Since this is a profile image, I will create it in the user model.

Terminal.

$ rails g migration AddImageToUsers image:string

$ rails db:migrate

You now have an image column in your user model.

Next, edit ʻuser.rb of the added user model and describe ʻimage_uploader.

user.rb

class User < ApplicationRecord
  #abridgement

  mount_uploader :image, ImageUploader #add to
end

This completes the introduction of CarrierWave.

Step 2-Introduce R Magic

First of all, the introduction of R Magick is very complicated. Lol However, please be assured that if you do it in order, you can install it without any problems.

First of all, install ImageMagick 6 and pkg-config. Execute the following in order.

Terminal.

$ brew install imagemagick@6

$ brew install pkg-config

Then do the following

Terminal.

$ export PKG_CONFIG_PATH=/usr/local/opt/imagemagick@6/lib/pkgconfig

Finally, use the gem command to install rmagick.

Terminal.

$ gem install rmagick

Now you are finally ready to install the gem. Add the following to Gemfile.

Gemfile.

gem 'rmagick'

Run bundle install

Terminal.

$ bundle install

This completes the introduction of R Magick.

Step 3 ・ Describe in ʻimage_uploader.rb`

Describe the following in the file ʻimage_uploader.rb` created at the beginning

image_uploader.rb

  version :thumb do
    process :resize_to_fill => [width, height, gravity = ::Magick::CenterGravity]
  end

  #Enter the width and height values for width and height, respectively. If you enter the same number, it will be a square.
  #In the case of the example below, it will be a 200px square.
  #[Example]
  #version :thumb do
    #process :resize_to_fill => [２００, ２００, gravity = ::Magick::CenterGravity]
  #end

You can now make the image square.

Next, write a description to prevent image inversion.

image_uploader.rb

class ImageUploader < CarrierWave::Uploader::Base
  #abridgement

  def auto
    manipulate! do|image|
      image.auto_orient
    end
  end

  process :auto

 #abridgement
end

Step 4 ・ Model description

This time it is a profile picture of the user, so I will describe it in the user model.

user.rb

class User < ApplicationRecord
  #abridgement

  mount_uploader :image, ImageUploader
end

The model is now associated.

Step 5 ・ Description of controller

Next, write it in the controller.

users_controller.rb

class UsersController < ApplicationController
  #abridgement

  def show
    @user = User.find(params[:id])
  end

  def edit
    @user = User.find(params[:id])
  end

  def update
    @user = User.find(params[:id])
    if @user.id == current_user.id
      @user.update(user_params)
      flash[:success] = "Your profile has been updated!"
      redirect_to user_path(@user)
    else
      render 'edit'
    end
  end

  private

  def user_params
    params.require(:user).permit(:name, :email, :image)
  end 
end

• Change the strong parameter part according to your own column.

Step 6 ・ Implementation of view

Next, we will implement it in the view.

erb:edit.html.erb

 <% if @user.image? %>
   <%= image_tag @user.image.thumb.url, class: "user-icon" %>
 <% else %>
   <%= image_tag "default.jpg ", alt: "user-icon", size: "200", class: "user-icon" %>
 <% end %>
 <button type="button" class="btn btn-outline-secondary rounded-pill">
   <%= f.file_field :image, accept: 'image/jpeg,image/gif,image/png', class: "image-select-btn" %>
 </button>

• The default image of a 200px square is set to size:" 200 " on the 4th line.

If you have uploaded a profile picture with <% if @ user.image?%>, It will be displayed, otherwise the default image will be displayed. Put the default images in ʻapp / assets / images`.

By the way

erb:edit.html.erb

<%= image_tag "/assets/images/default.jpg ", alt: "user-icon", size: "200", class: "user-icon" %>

Please note that an error will occur if you write.

Return to the explanation of ʻedit.html.erb`.

By writing thumb on the second line, the contents (width and height) described earlier in ʻimage_uploader.rb` will be reflected in the image.

Then use CSS to round the image.

users.scss

.user-icon {
  border-radius: 100px;
}

You have now rounded your profile picture.

If the profile image has not been uploaded, the implementation below is possible.

• The background color is set to make the default image easier to see.

You can upload your profile picture from the "Select File" button above.

When uploaded, it will be circular like the default image.

This is the end of implementation.

Reference material

I wrote it with reference to the following article. Thank you to everyone who posted the article.

Introduce image upload Carrierwave Using RMagick with Rails [Rails] Create thumbnails with Carrier Wave and R Magick Use CarrierWave to set user images.