I'm trying to re-write the code below so that it will use an image_tag. I know how to apply a class attribute, but how do I apply a custom attribute like "data-dark-logo"?
I'm learning how to develop and am building an application that has the following HTML:
<div id="logo">
<a href="index.html" class="standard-logo" data-dark-logo="external_assets/images/logo-dark.png">
<img src="external_assets/images/logo.png" alt="Canvas Logo">
</a>
<a href="index.html" class="retina-logo" data-dark-logo="external_assets/images/logo-dark#2x.png">
<img src="external_assets/images/logo#2x.png" alt="Canvas Logo">
</a>
</div>
I'm trying to rewrite this so it will function in my Rails app.
Just pass the data attributes as a hash.
<%= link_to '/link', class: 'standard-logo', data: {'dark-logo' => 'external_assets/....' do %>
<%= image_tag ('external_assets/...') %>
<% end %>
Like this?
<div id="logo">
<%= link_to("index.html", class: "standard-logo", data-dark-logo: "external_assets/images/logo-dark.png") do %>
<%= image_tag("external_assets/images/logo.png", alt: "Canvas Logo") %>
<% end %>
<%= link_to("index.html", class: "retina-logo", data-dark-logo: "external_assets/images/logo-dark#2x.png") do %>
<%= image_tag("external_assets/images/logo#2x.png", alt: "Canvas Logo") %>
<% end %>
</div>
Edit:
To make the data-dark-logo pull your asset from the asset pipeline, try using the asset_path helper:
<%= link_to("index.html", class: "standard-logo", data-dark-logo: asset_path("external_assets/images/logo-dark.png")) do %>
The solution I came up with looks like this:
<div id="logo">
<%= link_to welcome_index_path, class: 'standard-logo', data: {'dark-logo' => asset_path("front/logo-dark.png") } do %>
<%= image_tag("front/logo.png") %>
<% end %>
<%= link_to welcome_index_path, class: 'retina-logo', data: {'dark-logo' => asset_path("front/logo-dark#2x.png") } do %>
<%= image_tag("front/logo#2x.png") %>
<% end %>
</div>
But I'm not sure if this complies with Rails best practices
Related
I want to make a link in my nav bar. The problem is that I want an image as the clickable link. So (click on image -> next Site)
this is the code I use now for linking with the site.
<a class="nav" <%= link_to "Home", posts_path %> </a>
You can provide a block to link_to
<%= link_to posts_path do %>
<%= image_tag "image" %>
<% end %>
<%=link_to(image_tag("the_best_image_path.jpg", class: "img_class_goes_here"), posts_path, class: "navbar-brand"%>
<a class="navbar-brand" href="/" style="float:none">
<%= image_tag "yourlogo.png", width:150 %>
</a>
If you're using Active Storage on Rails, you could do this:
Say, you have a model named Product and an attributed named image:
For the Index page
<%= link_to product do %>
<%= image_tag(product.image, class: 'product-image__img') if product.image.attached? %>
<% end %>
OR
<%= link_to(product) do %>
<%= image_tag(product.image, class: 'product-image__img') if product.image.attached? %>
<% end %>
For the Show page
<%= image_tag(#product.image, class: 'product-image__img') if #product.image.attached? %>
I've been following a tutorial Follower Tutorial and I keep getting the error undefined method `find_by_username' for the line.
<%= render '/components/follow_button', :user => User.find_by_username(params[:id]) %>
show.html.erb
<%= render '/components/follow_button', :user => User.find_by_username(params[:id]) %>
<div class="panel panel-default">
<div class="panel-body">
<h5 style="color: grey; font-size: 125%;">Who to follow</h5>
<% for #u in #toFollow do %>
<p style="font-weight: bold; opacity: 0.85;" ><%= #u.username %></p>
<% end %>
</div>
</div>
user.rb
def unfollow(other)
active_relationships.find_by(followed_id: other.id).destroy
_follow_button.html.erb
<% if current_user.id != user.id %>
<div class="panel panel-default">
<div class="panel-body">
<center>
<% if !current_user.following?(user) %>
<%= form_for(current_user.active_relationships.build) do |f| %>
<div><%= hidden_field_tag :followed_id, user.id %></div>
<%= f.submit "Follow", class: "btn btn-primary" %>
<% end %>
<% else %>
<%= form_for(current_user.active_relationships.find_by(followed_id: user.id),
html: { method: :delete }) do |f| %>
<%= f.submit "Unfollow", class: "btn" %>
<% end %>
<% end %>
</center>
</div>
</div>
I've been messing around for ages now and can't work it out. Any help would be appreciated. Feel free to ask for more code etc.
In newer version of rails you should use following code:
Inside controller:
#user = User.find_by(username: username)
In Rails 4 onwards the find_by_... methods are deprecated therefore your User.find_by_username will not work for Rails 4 and higher. You should be able to use either:
User.find(id)
or
User.where(:username=> username)
am on rails 5 and my categories have images. i want to use those images as backround images but when i set in the styling the url do not change
<div class="grid-category">
<% #servicescategories.each do |category| %>
<%= link_to servicecategories_path(slug: category.slug ), :style=>'background-image: asset-data-url("category.category_image");', class: "category-item" do %>
<h3> <%= category.name %></h3>
<% end %>
<% end %>
</div>
what am i doing wrong here
You need to interpolate the value of category.category_image
<%= link_to servicecategories_path(slug: category.slug ),
class: "category-item" do %>
<div style="background-image: url(<%= asset_path('category.category_image') %>)">
<h3> <%= category.name %></h3>
</div>
<% end %>
You seems to have the incorrect syntax to use the rails interpolation inside the style attribute,
Try this,
<%= link_to servicecategories_path(slug: category.slug ),
:style=>"background-image: <%= asset-data-url(category.category_image) %>",
class: "category-item" do %>
this works
<%= link_to servicecategories_path(slug: category.slug ),
class: "category-item" do %>
<div style="background-image: <%= asset_path('category.category_image') %>">
<h3> <%= category.name %></h3>
</div>
<% end %>
I have a form called cattle finances, in this form, i use collection select to input the batch number, i have other form columns shown in the _form.html.erb code below
<%= simple_form_for #cattle_finance, remote: true do |f| %>
<% if #cattle_finance.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(#cattle_finance.errors.count, "error") %> prohibited this cattle_finance from being saved:</h2>
<ul>
<% #cattle_finance.errors.full_messages.each do |message| %>
<li><%= message %></li>
<% end %>
</ul>
</div>
<% end %>
<br>
<%= f.collection_select :batch_number, CattleList.all, :batch_number, :batch_number, :prompt => "please select Batch Number" %></br>
<%= f.input :total_litres_of_batch, as: :integer %>
<%= f.input :total_income, as: :integer %>
<%= f.input :gross_income, as: :integer %>
<%= f.input :total_expenses, as: :integer %>
<%= f.input :net_income, as: :integer %>
<%= f.input :date, as: :date %>
<%= f.button :submit %>
<% end %>
My index.html.erb code is
<div class="row">
<div class="col-md-5 col-md-offset-1">
<h2>Cattle Finances</h2>
</div>
<div class"btn-group menu2" align = right>
<%= link_to raw("<span class=''></span> Creditors"), cattle_creditors_path, :class=>"btn btn-default" %>
<%= link_to raw("<span class=''></span> Debtors"), cattle_debtors_path, :class=>"btn btn-default" %>
<%= link_to raw("<span class=''></span> Cattle"), cattles_path, :class=>"btn btn-default" %>
<%= link_to "Home", root_path, :class=>"btn btn-default" unless current_page?(root_url) %>
</div>
<div class="col-md-2 col-md-offset-4">
<%= link_to new_cattle_finance_path, remote: true do %>
<button class="btn btn-default">New</button>
<% end %>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-2" id="cattle_finance-form" style="display:none;"></div>
</div>
<div class="row">
<div class="" id="cattle_finances"><%= render #cattle_finances %></div>
</div>
So what is need help with is the way in which i can select a particular batch_number and automatically all other fields are populated, or picked from the database from the corresponding database tables and filled in respectively. Any help his highly appreciated coz am stuck, although
i know what i want to do, I have no idea of how i can start.
I am building a panel with a partial, but I'd like to customise the inside of the panel with some html. Is there any way to write some HTML for a hash value?
I have a custom partial _panel_builder.html.erb that I takes as argument pclass, heading, body, etc., that I would like to use like this :
(The below syntax is bad, but I don't really understand how I could do something nice..)
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
# For the body param, I'd like to be able to use some HTML with occasional <%=...%> for variables, like :
body: (%>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<%).html_safe,
collapsable: true %>
<% end %>
EDIT : An idea of what my _panel_builder partial looks like :
<%
collapsable ||= false
pclass ||= "default"
footer ||= false
%>
<div class="panel panel-<%= pclass %> <%= if collapsable then "panel-collapsable " end %>">
<div class="panel-heading">
<%= heading %>
<% if collapsable %>
<span class="pull-right"><i class="glyphicon glyphicon-chevron-down"></i></span>
<% end %>
</div>
<div class="panel-body <%= if collapsable then "collapse" end %>">
<%= body %>
</div>
<% if footer %>
<div class="panel-footer <%= if collapsable then "collapse" end %>">
<%= footer %>
</div>
<% end %>
</div>
Okay so I was actually looking for the capture helper :
<% #etudes.each_with_index do |etude, i| %>
<%= render 'shared/panel_builder',
pclass: panel_color_rotation(i),
heading: etude.name,
body: capture do %>
<p><%=etude.description %></p>
<ul>
<%etude.competences.each do |comp| %>
<li><strong><%= competence.name %></strong> : <%=competence.level %>
<br><small><%=competence.why %></small>
</li>
<% end %>
</ul>
<% end %>,
collapsible: true %>
<% end %>
Note : in some cases, I also want to pass a complex HTML block as the header of footer, so I can't just have a helper that takes a block.
Note2 : My panel is a HTML template made for generic data. I cannot pass it a Ruby object