CODEWITHSUNDEEP
ruby-on-railsrounded-corners
Zurch
Zurch

Reputation: 39

Rounded avatar ruby on rails

I would like to have my avatars that my users upload to be round on my rails app project for Udemy. The image still comes out square the way it was uploaded.

below is my show.html.erb file

<div class="row">
<div class="col-md-3 text-center">
 <div class="avatar"><%= image_tag @user.profile.avatar.url %></div>
</div>
<div class="col-md-6">
  <h1><%= @user.profile.first_name %> <%= @user.profile.last_name %></h1>
  <h3><span class="job_title_icon"><%= job_title_icon %></span> <%= @user.profile.job_title %></h3>
  <div class="well profile-block profile-description">
   <h3>Background</h3>   
   <%= @user.profile.description %>
  </div>

  <% if current_user.plan_id == 2 %>
  <div class="well profile-block contact-info">
    <h3>Contact:</h3>  
    <%= @user.profile.phone_number %><br/>
    <%= @user.profile.contact_email %><br/>
  </div> 
  <% end %>

</div>

Below is my users,css.scss file

<div class="row">
<div class="col-md-3 text-center">
 <div class="avatar"><%= image_tag @user.profile.avatar.url %></div>
</div>
<div class="col-md-6">
  <h1><%= @user.profile.first_name %> <%= @user.profile.last_name %></h1>
  <h3><span class="job_title_icon"><%= job_title_icon %></span> <%= @user.profile.job_title %></h3>
  <div class="well profile-block profile-description">
   <h3>Background</h3>   
   <%= @user.profile.description %>
  </div>

  <% if current_user.plan_id == 2 %>
  <div class="well profile-block contact-info">
    <h3>Contact:</h3>  
    <%= @user.profile.phone_number %><br/>
    <%= @user.profile.contact_email %><br/>
  </div> 
  <% end %>

</div>

Upvotes: 1

Views: 1491

Answers (2)

Andy Harvey
Andy Harvey

Reputation: 12663

It looks as if you might be using Twitter Bootstrap. If so, there is a handy CSS class built in.

Just add class: 'img-circle' to your image_tag

...
#change this line as follows
<div class="avatar"><%= image_tag @user.profile.avatar.url, class: 'img-circle' %></div>
...

This page of the Bootstrap docs has lots of useful info and examples.

Upvotes: 1

Takehiro Mouri
Takehiro Mouri

Reputation: 670

I think setting your avatar class so that the image is round is a better way to approach it.

In your CSS, you define it as such:

.avatar {
  border-radius: 50%;
  // also might be good to set width and height
}

Upvotes: 3

Related Questions