tag de imagem link_to. como adicionar classe a uma tag

90

Estou usando a tag link_to img como seguir

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

O que resulta no seguinte html

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

Eu quero que class = "dock-item" vá para a <a>tag em vez da tag img.

Como posso mudar isso?

Atualizar:

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

resulta em

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

Respostas:

137

oi você pode tentar fazer isso

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

ou mesmo

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

note que a posição das chaves é muito importante, porque se você perdê-las, o rails assumirá que elas formam um único parâmetro hash (leia mais sobre isso aqui )

e de acordo com a api para link_to :

link_to(name, options = {}, html_options = nil)
  1. o primeiro parâmetro é a string a ser mostrada (ou também pode ser uma image_tag)
  2. o segundo é o parâmetro para a url do link
  3. o último item é o parâmetro opcional para declarar a tag html, por exemplo, class, onchange, etc.

espero que ajude! =)

Staelen
fonte
Obrigado pela resposta detalhada. Aceitarei sua resposta, mas deixe-me saber se você sabe como fazer isso com a tag link_to também. <a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>Eu adicionei uma tag span antes de fechar a <a>tag
Onipresente
é na verdade o mesmo conceito, então você precisa encontrar maneiras de espremer a image_tag e a extensão no parâmetro "nome". você pode tentar isso, não o código completo, mas acho que você mesmo pode fazer =) = link_to "# {image_tag} <span> Pesquisar </span>", ... você pode ver o que estou tentando fazer?
Staelen
ah entendi. sim, eu queria comprimi-lo no parâmetro de nome. mas não estava ciente de # {}. momentos divertidos com trilhos
Onipresente
Isso pode ser útil para outros: Se você deseja apenas adicionar uma imagem ao lado do texto do link, basta fazer <% = link_to image_tag ('image_path') + "link text", the_path%>
Nick Res
27

Apenas adicionando isso você pode passar link_toum bloco ao método:

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

resulta em:

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

Isso salvou minha vida quando o designer me deu links complexos com efeitos de rolagem css3 sofisticados.

Starkers
fonte
Não precisei do material extra que vem antes do link. Se você se livrar do href, poderá ser direcionado para o url.
Jngai1297 de
Essa foi a melhor resposta para mim. Obrigado!
newUserNameAqui
@newUserNameHere Não se preocupe! :)
Starkers
17

O melhor será:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'
Ravinesh
fonte
Esta é a solução mais limpa.
Raidspec de
A melhor solução, limpa e sem laços desnecessários.
Lucas Andrade
9

esta é a minha solução:

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

Fácil:

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

O primeiro param de link_to é o text / html para o link (no interior da uma tag). O próximo conjunto de parâmetros são as propriedades do url e os próprios atributos do link.

Toby Hede
fonte
Eu tentei isso, mas adicioná-lo lá o torna um parâmetro para a string. veja minha atualização
Onipresente
Sim, eu até escrevi que o segundo parâmetro é o url, mas o apaguei sem motivo: P
Toby Hede
2

Para responder à sua pergunta atualizada, de acordo com http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

Tenha cuidado ao usar o estilo de argumento mais antigo, pois um hash literal extra é necessário:

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

Deixar o hash desligado fornece o link errado:

  link_to "WRONG!", :controller => "articles", :id => "news", :class => "article"
  # => <a href="https://stackoverflow.com/articles/index/news?class=article">WRONG!</a>
Randy Simon
fonte
2

A coisa toda :action =>, :controller =>que eu tenho visto muito não funcionou para mim.

Passei horas cavando e esse método definitivamente funcionou para mim em um loop.

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

Ruby on Rails usando link_to com image_tag

Além disso, estou usando o Rails 4.

Vandoona
fonte
1

Eu também tentei isso e funciona muito bem:

      <%= 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 %>
Daniel Guzmán
fonte
0

Olá pessoal, esta é uma boa forma de link com imagem e tem muitos adereços no caso de você querer css atributo por exemplo substituir "alt" ou "título" etc ..... também incluindo uma restrição lógica (?)

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

Espero que isto ajude!

d1jhoni1b
fonte
0
<%= link_to root_path do %><%= image_tag("Search.png",:alt=>'Vivek',:title=>'Vivek',:class=>'dock-item')%><%= content_tag(:span, "Search").html_safe%><% end %>
Vivek Kapoor
fonte
Você poderia explicar alguns detalhes sobre nossa resposta?
Nilesh
Meu ans mostrará uma saída como esta: <a href="https://stackoverflow.com/pages/search"> <img alt = "Search" border = "0" class = "dock-item" src = "/ images / Search.png? 1264132800" /> </a> <span> Pesquisa </span> </a>
Vivek Kapoor
0

Você também pode tentar isso

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

Onde "metas-logo" é uma classe css com uma imagem de fundo

ksan
fonte