Rails: link_to image tag. how to add class to a tag

Ruby on-Rails

Ruby on-Rails Problem Overview


I am using link_to img tag like following

<%= link_to image_tag("Search.png", :border=>0, :class => 'dock-item'), 
:action => 'search', :controller => 'pages'%><span>Search</span></a>

Which results in following html

<a href="/pages/search"><img alt="Search" border="0" class="dock-item" 
src="/images/Search.png?1264132800" /></a><span>Search</span></a> 

I want the class="dock-item" to go to the <a> tag instead of the img tag.

How can i change this?

Update:

<%= link_to image_tag("Search.png", :border=>0), :action => 'search', 
:controller => 'pages', :class => 'dock-item' %>

results in

<a href="/pages/search?class=dock-item"><img alt="Search" border="0" 
src="/images/Search.png?1264132800" /></a> 

Ruby on-Rails Solutions


Solution 1 - Ruby on-Rails

hi you can try doing this

link_to image_tag("Search.png", border: 0), {action: 'search', controller: 'pages'}, {class: 'dock-item'}

or even

link_to image_tag("Search.png", border: 0), {action: 'search', controller: 'pages'}, class: 'dock-item'

note that the position of the curly braces is very important, because if you miss them out, rails will assume they form a single hash parameters (read more about this here)

and according to the api for link_to:

link_to(name, options = {}, html_options = nil)
  1. the first parameter is the string to be shown (or it can be an image_tag as well)
  2. the second is the parameter for the url of the link
  3. the last item is the optional parameter for declaring the html tag, e.g. class, onchange, etc.

hope it helps! =)

Solution 2 - Ruby on-Rails

Just adding that you can pass the link_to method a block:

<%= link_to href: 'http://www.example.com/' do %>
  	<%= image_tag 'happyface.png', width: 136, height: 67, alt: 'a face that is unnervingly happy'%>
<% end %>

results in:

<a href="/?href=http%3A%2F%2Fhttp://www.example.com/k%2F">
	<img alt="a face that is unnervingly happy" height="67" src="/assets/happyface.png" width="136">
</a>

This has been a life saver when the designer has given me complex links with fancy css3 roll-over effects.

Solution 3 - Ruby on-Rails

Best will be:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'

Solution 4 - Ruby on-Rails

this is my solution:

<%= link_to root_path do %>
   <%= image_tag "image.jpg", class: "some class here" %>
<% end %>

Solution 5 - Ruby on-Rails

Easy:

<%= link_to image_tag("Search.png", :border=>0), :action => 'search', :controller => 'pages', :class => 'dock-item' %>

The first param of link_to is the text/html to link (inside the a tag). The next set of parameters is the url properties and the link attributes themselves.

Solution 6 - Ruby on-Rails

I tried this too, and works very well:

      <%= link_to home_index_path do %>
      <div class='logo-container'>
        <div class='logo'>
          <%= image_tag('bar.ico') %>
        </div>
        <div class='brand' style='font-size: large;'>
          .BAR
        </div>
      </div>
      <% end %>

Solution 7 - Ruby on-Rails

To respond to your updated question, according to http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html...

Be careful when using the older argument style, as an extra literal hash is needed:

  link_to "Articles", { :controller => "articles" }, :id => "news", :class => "article"
  # => <a href="/articles" class="article" id="news">Articles</a>

Leaving the hash off gives the wrong link:

  link_to "WRONG!", :controller => "articles", :id => "news", :class => "article"
  # => <a href="/articles/index/news?class=article">WRONG!</a>

Solution 8 - Ruby on-Rails

The whole :action =>, :controller => bit that I've seen around a lot didn't work for me.

Spent hours digging and this method definitely worked for me in a loop.

<%=link_to( image_tag(participant.user.profile_pic.url(:small)), user_path(participant.user), :class=>"work") %>

https://stackoverflow.com/questions/4643698/ruby-on-rails-using-link-to-with-image-tag

Also, I'm using Rails 4.

Solution 9 - Ruby on-Rails

Hey guys this is a good way of link w/ image and has lot of props in case you want to css attribute for example replace "alt" or "title" etc.....also including a logical restriction (?)

<%= link_to image_tag("#{request.ssl? ? @image_domain_secure : @image_domain}/images/linkImage.png", {:alt=>"Alt title", :title=>"Link title"}) , "http://www.site.com"%>

Hope this helps!

Solution 10 - Ruby on-Rails

<%= link_to root_path do %><%= image_tag("Search.png",:alt=>'Vivek',:title=>'Vivek',:class=>'dock-item')%><%= content_tag(:span, "Search").html_safe%><% end %>

Solution 11 - Ruby on-Rails

You can also try this

<li><%= link_to "", application_welcome_path, class: "navbar-brand metas-logo"    %></li>

Where "metas-logo" is a css class with a background image

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOmnipresentView Question on Stackoverflow
Solution 1 - Ruby on-RailsStaelenView Answer on Stackoverflow
Solution 2 - Ruby on-RailsStarkersView Answer on Stackoverflow
Solution 3 - Ruby on-RailsRavineshView Answer on Stackoverflow
Solution 4 - Ruby on-RailsJack DanielView Answer on Stackoverflow
Solution 5 - Ruby on-RailsToby HedeView Answer on Stackoverflow
Solution 6 - Ruby on-RailsDaniel GuzmánView Answer on Stackoverflow
Solution 7 - Ruby on-RailsRandy SimonView Answer on Stackoverflow
Solution 8 - Ruby on-RailsvandoonaView Answer on Stackoverflow
Solution 9 - Ruby on-Railsd1jhoni1bView Answer on Stackoverflow
Solution 10 - Ruby on-RailsVivek KapoorView Answer on Stackoverflow
Solution 11 - Ruby on-RailsksanView Answer on Stackoverflow