link_to etiqueta de imagen. cómo agregar una clase a una etiqueta

90

Estoy usando la etiqueta link_to img como seguir

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

Lo que resulta en seguir html

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

Quiero que class = "dock-item" vaya a la <a>etiqueta en lugar de la etiqueta img.

Cómo puedo cambiar esto?

Actualizar:

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

resultados en

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

Respuestas:

137

hola puedes intentar hacer esto

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

o incluso

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

tenga en cuenta que la posición de las llaves es muy importante, porque si las pierde, los rieles asumirán que forman un solo parámetro hash (lea más sobre esto aquí )

y de acuerdo con la api para link_to :

link_to(name, options = {}, html_options = nil)
  1. el primer parámetro es la cadena que se mostrará (o también puede ser una etiqueta de imagen)
  2. el segundo es el parámetro de la URL del enlace
  3. el último elemento es el parámetro opcional para declarar la etiqueta html, por ejemplo, class, onchange, etc.

¡Espero eso ayude! =)

Staelen
fuente
Gracias por la respuesta detallada. Aceptaré su respuesta, pero avíseme si sabe cómo lograrlo con la etiqueta link_to también. <a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>Agregué una etiqueta span antes de cerrar la <a>etiqueta
Omnipresente
en realidad es el mismo concepto, por lo que necesita encontrar formas de comprimir tanto la etiqueta de imagen como el intervalo en el parámetro "nombre". puedes probar esto, no el código completo, pero creo que puedes hacerlo tú mismo =) = link_to "# {image_tag} <span> Buscar </span>", ... ¿puedes ver lo que estoy tratando de hacer?
Staelen
lo tengo. sí, quería apretarlo en el parámetro de nombre. pero no estaba al tanto de # {}. tiempos divertidos con rieles
Omnipresente
Esto podría ser útil para otros: si solo desea agregar una imagen junto al texto del enlace, simplemente haga <% = link_to image_tag ('image_path') + "link text", the_path%>
Nick Res
27

Solo agregando que puedes pasar el link_tométodo un bloque:

<%= 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 en:

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

Esto me ha salvado la vida cuando el diseñador me ha proporcionado enlaces complejos con elegantes efectos de sustitución de CSS3.

Starkers
fuente
No necesitaba las cosas adicionales que vienen antes del enlace. Si se deshace de href, simplemente se le puede dirigir a la URL.
Jngai1297
Esta fue la mejor respuesta para mí. ¡Gracias!
newUserNameHere
@newUserNameHere ¡No te preocupes! :)
Starkers
17

Lo mejor será:

link_to image_tag("Search.png", :border => 0, :alt => '', :title => ''), pages_search_path, :class => 'dock-item'
Ravinesh
fuente
Ésta es la solución más limpia.
Raidspec
La mejor solución, limpia y sin bucles innecesarios.
Lucas Andrade
9

esta es mi solución:

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

Fácil:

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

El primer parámetro de link_to es el texto / html para enlace (dentro de la una etiqueta). El siguiente conjunto de parámetros son las propiedades de la URL y los propios atributos del enlace.

Toby Hede
fuente
Lo había intentado, pero agregarlo allí lo convierte en un parámetro para la cadena. por favor vea mi actualización
Omnipresente
Sí, incluso escribí que el segundo parámetro es la URL, pero luego lo eliminé sin ningún motivo: P
Toby Hede
2

Para responder a su pregunta actualizada, de acuerdo con http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

Tenga cuidado al usar el estilo de argumento más antiguo, ya que se necesita un hash literal adicional:

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

Dejar el hash desactivado da el enlace incorrecto:

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

Todo lo :action =>, :controller =>que he visto mucho no funcionó para mí.

Pasé horas investigando y este método definitivamente funcionó para mí en un bucle.

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

Ruby on Rails usando link_to con image_tag

Además, estoy usando Rails 4.

vandoona
fuente
1

También probé esto y funciona muy bien:

      <%= 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
fuente
0

Hola chicos, esta es una buena forma de enlace con imagen y tiene muchos accesorios en caso de que desee cambiar el atributo css, por ejemplo, reemplazar "alt" o "título", etc. ... también incluye una restricción 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 esto ayude!

d1jhoni1b
fuente
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
fuente
¿Podría explicar algunos detalles sobre nuestra respuesta?
Nilesh
Mi ans mostrará un resultado como este: <a href="https://stackoverflow.com/pages/search"> <img alt = "Search" border = "0" class = "dock-item" src = "/ images / Search.png? 1264132800" /> </a> <span> Búsqueda </span> </a>
Vivek Kapoor
0

también puedes probar esto

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

Donde "metas-logo" es una clase CSS con una imagen de fondo

ksan
fuente