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> 

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! =)


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.


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'

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

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.


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>

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.


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

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!


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

¿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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.