How to attach an URL to an image - html

I tried different ways to display a picture in my rails app,and when the user clicks on that he should be redirected to the URL i specify.
I tried this method,"rails method"
<li <%= link_to new_gig_path %><%= image_tag 'v.png' %></li>
and just the image was showing,but the image wasn't clickable.
than i tried this"HTML method" <img src="link to an image"/>
And it worked as i wanted,the image appeared,and when i clicked on it,it redirected where i wanted.The problem is that it is wrapped in <a></a> tags,but i need the code to be wrapped in <li></li> tags,
note:I also tried to wrap the <a></a> tags in <li></li> tags but it destroyed my design,i do need it to be just in <li> tags
looking into my navigation bar,you see that my nav-bar is structured in <li>tags
#instead of this comment I want to put the code,i am asking help with
<li><%= link_to '+Add Box', new_gig_path, id: "addgig" %></li>
<li><%= link_to 'Edit Profile',edit_user_registration_path, id: "menu-overwritten" %></li>
<li><%= link_to "Log out", destroy_user_session_path, :method => :delete, id: "menu-overwritten"%></li>
More info:
Also i tried this method
<li><img src="a link to an image" height="30" width="159" ></li>
This time it worked as well,but i don't think it is gonna be responsive if i leave this method.This is definitely not the rails way.
Thank you.

<li>
<%= link_to new_gig_path do %>
<%= image_tag 'v.png', class: 'your-class' %>
<% end %>
</li>

Related

Links in navbar with Rails and Bootstrap

Say I have a navbar:
<ul class="nav navbar-nav">
<li><%= link_to 'Item 1', item1_path %>
<li><%= link_to 'Item 2', item2_path %>
...
But this way current menu item is also a link. How do I make it into a span, preserving appearance? Which doesn't look like a good options, since in this case I need to duplicate bootstrap's styles. Or make it look like a menu item without it pointing to any page?
A link_to method will always render an <a> tag, but you can render a <span> inside of the <a> tag if you use link_to ... do
This is an example taken from this documentation
<%= link_to(#profile) do %>
<strong><%= #profile.name %></strong> -- <span>Check it out!</span>
<% end %>
<!-- which renders -->
<a href="/profiles/1">
<strong>David</strong> -- <span>Check it out!</span>
</a>
I came up with the following helper:
module ApplicationHelper
def menu_item(name, path)
if current_page? path
content_tag('a', name)
else
link_to name, path
end
end
end
With that we've just got to replace link_to with menu_item in original code.

Unaccounted for element link in Ruby Integration test

I am running a simple integration test trying to make sure the links I have set up are working properly. The test keeps returning 1 failure saying that it "expected exactly 2 elements matching 'a[href="/"]'" (which is my root path to my home page) but the test keeps finding 3. There is only two places where I have referenced the root path via links, and it is in my _header.html.erb and for the life of my I cannot figure out where the 3rd element could be popping up from.
Here is my _header.html.erb code:
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
<%= link_to "sample app", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<li><%= link_to "Home", root_path %></li>
<li><%= link_to "Help", help_path %></li>
<li><%= link_to "Log In" '#' %></li>
</ul>
</nav>
</div>
</header>
and my routes:
Rails.application.routes.draw do
get 'users/new'
root "static_pages#home"
get 'help' => "static_pages#help"
get 'about' => "static_pages#about"
get 'contact' => "static_pages#contact"
get 'signup' => "users#new"
end
Any help would be appreciated, I a newbie.
Thanks!
I'm not sure if it's the only error, but this line:
<li><%= link_to "Log In" '#' %></li>
should have a comma between "Log In" and "#", like this:
<li><%= link_to "Log In", '#' %></li>

How to link_to an html anchor tag

I have been trying to make a number of lists where after clicking each list its content gets edited. I'am using twitter bootstrap, embedded HTML in this Ruby on Rails app.
<div class="list-group">
<% #statuses.each do |status| %>
<%= status.content %>
<% end %>
</div>
Here i did not get how to get these <%= link_to to get connected with each <a href="" URL's of the status.
<%= link_to 'Edit', edit_status_path(status) %>
Please help i m totally confused.
Thanks in advance.
If you want the entire status to actually be a link, like you did with a manual anchor tag in your example, then try:
<div class="list-group">
<% #statuses.each do |status| %>
<%= link_to status.content, edit_status_path(status), class: "list-group-item" %>
<% end %>
</div>
Also see http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-link_to.

how to highlight current link in rails 3

I am trying to highlight curent link. I used this question for ideas here
I have simple menu, that is based on this structure:
<li>
<%= #waste_root.name %>
<ul>
<% #wast_child_ids.each do |it| %>
<li><%= link_to it.name, products_path(:category => it.name), class: "#{cp(products_path)} additional_class" %>
</li>
<%end%>
</ul>
</li>
In Aplication helper:
def cp(path)
"current" if current_page?(path)
end
In CSS file:
.current {
color:red;
}
What I get is all links are in red color. I don't get it. For others it worked just fine.
I think your path in view should look like this:
<li>
<%= #waste_root.name %>
<ul>
<% #wast_child_ids.each do |it| %>
<li><%= link_to it.name, products_path(:category => it.name), class: "#{cp(products_path(:category => it.name))} additional_class" %>
</li>
<%end%>
</ul>
</li>
Because, you're passing a param category in products_path and hence current_page? isn't able to judge the correct relative path. Also, it'd be better if you use the _url(complete path) instead of relative path. It'll be much clear to cross check and to understand as well.
You need to pass the category.
<%= link_to it.name, products_path(:category => it.name), class: "#{cp(products_path(:category => it.name))} additional_class" %>
They're all on the products path because you're just differentiating based on parameters. So just passing the products path they all return true, you need to differentiate based on the parameters by passing them too as you've done in your link

Using "link_to" inside other HTML tags

I'm using Bootstrap 3 and I can do most links, but have problems when the "link_to" function is contained in something else.
These work
<li><%= link_to "Contact", contact_path %></li>
<li><%= link_to "Sign Up", register_path %></li>
I don't know how to use "link_to" for these
<a class="navbar-brand" href="#">Project</a>
Where the path for project is root_path
Resources<b class="caret"></b>
Where the path for resources is resources_path
You can do this:
<%= link_to "Project", root_path , class: 'navbar-brand' %>
<%= link_to resources_path, class: 'dropdown-toggle', data: {toggle:'dropdown'} do %>
Resources <b class="caret"></b>
<% end %>
You don't have to use the link_to helper in cases it isn't actually helpful for you, but you can easily create the desired links using the helper like so:
link_to 'Project', '#', class: 'navbar-brand'
link_to '#', class: 'dropdown-toggle', data: { toggle: 'dropdown' } do
Resources <b class="caret"></b>
end