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>
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
}
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.
Related
implementing a <%= render #booking_types %> partial in my home#dashboard view, Why is rails not looking into app/views/booking_types folder for a partial named _booking_type.html.erb and renders it as a looped instance?
app/views/home/dashboard.html.erb
<div class="flex items-center justify-between pb-6 border-b">
<h1 class="font-extrabold text-3xl">Dashboard</h1>
<%= link_to "Create booking type", new_booking_type_path, class: button_class(theme: "primary") %>
</div>
<div class="py-10 grid grid-cols-3 gap-6">
<%= render #booking_types %>
</div>
</div>
the partial
app/views/booking_types/_booking_type.html.erb
<div id="<%= dom_id booking_type %>">
<%= link_to edit_booking_type_path(booking_type), class: "p-6 border shadow-xl rounded-xl block hover:shadow-lg transition ease-in duration-300 relative overflow-hidden" do %>
<div class="h-1 w-full absolute top-0 left-0 right-0" style="background-color: <%= booking_type.color %>">
</div>
<h3 class="font-medium text-2xl"><%= booking_type.name %></h3>
<p class="text-gray-500">View booking page</p>
<p><%= duration(booking_type) %></p>
<% if booking_type.payment_required? %>
<div class="mt-3 pt-3 border-t">
<p>
<strong>Payment required</strong>
</p>
<p>
<strong>Price:</strong>
<%= number_to_currency(booking_type.price) %>
</p>
</div>
<% end %>
<% end %>
</div>
Error Output by better-errors gem after changing rendering partial from <%= render #booking_types %> to this way
<%= render "booking_types/booking_type" %>
I'm trying to customize a Rails Gem with the default CRUD-Views.
app/views/new.html.erb:
<div class="wishlist">
<div class="row">
<div class="small-12 medium-10 large-8 small-centered columns">
<h1><%= Spree.t(:creating_wishlist) %></h1>
<%= form_for #wishlist do |f| %>
<p><%= f.label :name, Spree.t(:name) %>: <%= f.text_field :name %></p>
<p><%= f.check_box :is_private %> <%= f.label :is_private, Spree.t(:is_private) %></p>
<%= f.submit Spree.t(:create) %>
<% end -%>
</div>
</div>
</div>
I want to avoid the same div containers .wishlist .row etc. in all the other views.
How can i achieve something like:
# gem application layout:
<div class="wishlist">
<div class="row">
<div class="small-12 medium-10 large-8 small-centered columns">
<%= yield %>
</div>
</div>
</div>
When i save it as app/views/layouts/application.html.erb and render it in the gem controller with layout 'application' then the view of the main Rails Application Layout will be overwritten.
But I just want only the Gem CRUD views to get yield.
I could solve it with a partial that i render outside a do/end-block of the CRUD Views:
partial in app/views/base/_layout.html.erb
<div class="wishlist">
<div class="row">
<div class="hide-for-small medium-1 large-2 columns"></div>
<div class="small-12 medium-10 large-8 small-centered columns">
<%= yield %>
</div>
<div class="hide-for-small medium-1 large-2 columns"></div>
</div>
</div>
and in my CRUD Views:
<%= render :layout => 'base/layout' do %>
# content
<% end -%>
Rails: Need help looping through model array to link to the show page. I want to show the name, but link to the path. Seems like it should be simple but I have been coding all night and my brain is fried! please help.
<div class="container">
<div class="row">
<% #bars.each do |bar| %>
<div class="col-xs-6 something">
<div class="firstBar">
<%= link_to bars_path %>
<% end %>
</div>
</div>
</div>
</div>
This should work:
<div class="container">
<div class="row">
<% #bars.each do |bar| %>
<div class="col-xs-6 something">
<div class="firstBar">
<%= link_to bar.name, bar %>
</div>
</div>
<% end %>
</div>
</div>
You could also do <%= link_to bar.name, bars_path(bar) %>, but is prettier to just give the object. Rails will know which Url helper to use given a specific object.
Take a look at the UrlHelper documentation
Try this
<div class="container">
<div class="row">
<% #bars.each do |bar| %>
<div class="col-xs-6 something">
<div class="firstBar">
<%= link_to bar.name, bar_path(bar) %>
</div>
</div>
<% end %>
</div>
</div>
Here is part of my index.html
<div class="col-md-8">
<% #books.each do |book| %>
<div class="row">
<div class="col-md-4">
<%= image_from_amazon(book.amazon_id) %>
</div>
<div class="col-md-8">
<h3 class = "text-info">
<%= book.title %>
</h3>
<br>
<em class ="text-muted">
written by <%= book.author %>
</em>
<br>
<br>
<p>
<%= book.description %>
</p>
<% book.genres.each do |genres| %>
<span class="label label-primary">
<%= genres.name %>
</span>
 
<% end %>
</div>
</div>
<% end %>
</div>
Basically, it will display 3 books, and it works fine.
Then, I move that code into _book.html.erb and edit above code into
<%= render #books %>
However, it repeat 3 times, that is, it display 9 books. And the sequence is [1st,2nd,3rd] [1st,2nd,3rd] [1st,2nd,3rd] like this picture.
Update
update index.html.erb
<div class="clearfix">
<div class="col-md-12">
<%= render #books %>
<div class="col-md-4">
<h3>Genre (Click to filter books)</h3>
<br>
<li>
<span class = 'label label-danger'>
<%= link_to "No filter" ,books_path, style: 'color:#FFFFFD' %>
</span>
<br>
<br>
</li>
<% #genres.each do |genres| %>
<li>
<span class = 'label label-primary' style="color:#FFFFFD">
<%= link_to genres.name ,books_path(filter: genres.name),style: 'color:#FFFFFD' %>
</span>
</li>
<br>
<% end %>
</div>
</div>
<!-- clearfix -->
</div>
Try the following:
<div class="col-md-8">
<%= render #books %>
</div>
And make sure <% #books.each do |book| %> and its <% end %> tag aren't in the partial.
Rendering Collections Docs
Edit
#index.html.erb
<div class="col-md-8">
<%= render #books %>
</div>
# _book.html.erb
<div class="row">
<div class="col-md-4">
<%= image_from_amazon(book.amazon_id) %>
</div>
<div class="col-md-8">
<h3 class = "text-info">
<%= book.title %>
</h3>
<br>
<em class ="text-muted">
written by <%= book.author %>
</em>
<br>
<br>
<p>
<%= book.description %>
</p>
<% book.genres.each do |genres| %>
<span class="label label-primary">
<%= genres.name %>
</span>
 
<% end %>
</div>
</div>
i have invoice and invoice_items models in my application. and i have used cocoon gem for nested models.i am using rails 4.2. it is working properly when i am creating new invoice, but when i am clicking on my edit button i am getting "template missing error" though i have _invoice_item_fields.html.erb file in my application.
this is my _form.html.erb file
<div class=" form">
<%= form_for(#invoice,:html=>{:class=>"cmxform form-horizontal tasi-form",:novalidate=>"novalidat"}) do |f| %>
<% if #invoice.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#invoice.errors.count, "error") %> prohibited this invoice from being saved:</h2>
<ul>
<% #invoice.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="form-group ">
<%= f.label :billing_address ,:class=>"control-label col-lg-2" %>
<div class="col-lg-6">
<%= f.text_area :billing_address,:class=>"form-control" %>
</div>
</div>
<div class="form-group ">
<%= f.label :shipping_address ,:class=>"control-label col-lg-2" %>
<div class="col-lg-6">
<%= f.text_area :shipping_address,:class=>"form-control" %>
</div>
</div>
<div class="form-group ">
<%= f.label :company_id ,:class=>"control-label col-lg-2" %>
<div class="col-lg-6">
<%= f.number_field :company_id,:class=>"form-control" %>
</div>
</div>
<div class="form-group ">
<%= f.label :invoice_date ,:class=>"control-label col-lg-2" %>
<div class="col-lg-6">
<%= f.date_select :invoice_date,:class=>"form-control" %>
</div>
</div>
<div class="form-group ">
<%= f.label :status ,:class=>"control-label col-lg-2" %>
<div class="col-lg-6">
<%= f.number_field :status,:class=>"form-control" %>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<section class="panel">
<header class="panel-heading">
Invoice Items
<span class="pull-right">
<%= link_to_add_association 'Add Item', f, :invoice_items,:class=>"btn btn-default"%>
</span>
</header>
<div class="panel-body">
<div class="adv-table">
<%= f.fields_for :invoice_items do |item| %>
<%= render '_invoice_item_fields', :f => item %>
<% end %>
</div>
</div>
</section>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<%= f.submit "Save",:class=>"btn btn-danger"%>
</div>
</div>
<% end %>
</div>
this is my _invoice_item_fields.html.erb file
This...
<%= render '_invoice_item_fields', :f => item %>
must be
<%= render 'invoice_item_fields', :f => item %>
You do not use a leading _ in your Rails render call to render a partial. The underscore goes on the filename on disk only.