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

Question

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>

Staelen · Accepted Answer · 2016-04-22T16:22:13.083

147

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)

the first parameter is the string to be shown (or it can be an image_tag as well)
the second is the parameter for the url of the link
the last item is the optional parameter for declaring the html tag, e.g. class, onchange, etc.

hope it helps! =)

edited Apr 22 '16 at 16:22

answered Jan 22 '10 at 05:41

Staelen

7,691
5
34
30

Thanks for the detailed answer. I'll accept your answer but let me know if you know how to achieve this with link_to tag as well.. `Search` I've added a span tag before closing `` tag – Omnipresent Jan 22 '10 at 05:55
it's actually the same concept, so you need to find ways to squeeze both the image_tag and the span into parameter "name". you can try this, not the full code but i think you can do it yourself =) =link_to "#{image_tag}Search", ... can you see what i'm trying to do? – Staelen Jan 22 '10 at 06:17
ah got it. yeah I wanted to squeez it in name parameter. but was not aware of #{}. fun times with rails – Omnipresent Jan 22 '10 at 06:25
This might be helpful to others: If you just want to add an image next to the link's text you just do <%= link_to image_tag('image_path') + "link text", the_path %> – Nick Res Aug 19 '15 at 02:16

Starkers · Answer 2 · 2014-04-22T12:21:05.837

35

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.

edited Apr 22 '14 at 12:21

answered Apr 04 '14 at 17:30

Starkers

10,273
21
95
158

I didn't need the extra stuff that comes before the link. If you get rid of href you can just be directed to the url. – Jngai1297 Sep 10 '14 at 22:46
This was the best answer for me. Thanks! – newUserNameHere Dec 13 '14 at 18:07
@newUserNameHere No worries! :) – Starkers Dec 13 '14 at 19:21

score 18 · Answer 3 · edited Nov 07 '11 at 22:36

18

Best will be:

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

edited Nov 07 '11 at 22:36

Christian Specht

35,843
15
128
182

answered Nov 07 '11 at 14:04

Ravinesh

181
1
2

This is the cleanest solution. – Raidspec Jan 21 '17 at 05:43
The best solution, clean and without any unnecessary loop. – Lucas Andrade Oct 20 '17 at 18:27

score 11 · Answer 4 · answered Mar 10 '15 at 21:58

11

this is my solution:

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

answered Mar 10 '15 at 21:58

Jack Daniel

2,397
8
33
58

score 7 · Answer 5 · answered Jan 22 '10 at 05:25

7

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.

answered Jan 22 '10 at 05:25

Toby Hede

36,755
28
133
162

I had tried that but adding it there makes it a parameter for the string. please see my update – Omnipresent Jan 22 '10 at 05:32
Yeah, I even wrote that the second param is the url, but then deleted it for no reason :P – Toby Hede Jan 22 '10 at 11:47

score 3 · Answer 6 · answered Aug 17 '17 at 18:00

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 %>

score 2 · Answer 7 · answered Jan 22 '10 at 05:57

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>

score 2 · Answer 8 · edited May 23 '17 at 12:18

2

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") %>

Ruby on Rails using link_to with image_tag

Also, I'm using Rails 4.

edited May 23 '17 at 12:18

Community

1
1

answered Sep 28 '14 at 07:01

vandoona

21
1

score 0 · Answer 9 · answered Sep 25 '13 at 19:46

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!

score 0 · Answer 10 · edited Sep 17 '14 at 03:44

0

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

edited Sep 17 '14 at 03:44

Krypton

3,337
5
32
52

answered Sep 17 '14 at 02:59

Vivek Kapoor

1
1

1

Will you please explain some details about our answer ? – Nilesh Sep 17 '14 at 03:31
1

My ans will show output like this: Search – Vivek Kapoor Sep 24 '14 at 17:48

score 0 · Answer 11 · answered Jan 06 '17 at 03:25

0

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

answered Jan 06 '17 at 03:25

ksan

163
1
6

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

11 Answers11

Linked