link_to tag immagine. come aggiungere una classe a un tag


90

Sto usando il tag link_to img come segue

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

Il che si traduce nel seguire html

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

Voglio che class = "dock-item" vada al <a>tag invece che al tag img.

Come posso cambiarlo?

Aggiornare:

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

risultati in

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

Risposte:


137

ciao puoi provare a farlo

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

o anche

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

nota che la posizione delle parentesi graffe è molto importante, perché se le perdi, i binari presumeranno che formino un singolo parametro hash (leggi di più su questo qui )

e secondo l' API per link_to :

link_to(name, options = {}, html_options = nil)
  1. il primo parametro è la stringa da mostrare (oppure può essere anche un image_tag)
  2. il secondo è il parametro per l'url del collegamento
  3. l'ultimo elemento è il parametro opzionale per dichiarare il tag html, ad esempio class, onchange, ecc.

spero che sia d'aiuto! =)


Grazie per la risposta dettagliata. Accetto la tua risposta, ma fammi sapere se sai come ottenere questo risultato anche con il tag link_to .. <a href="https://stackoverflow.com/pages/search" class="dock-item"><img alt="Search" border="0" src="/images/Search.png?1264132800" /><span>Search</span></a>Ho aggiunto un tag span prima di chiudere il <a>tag
Onnipresente

in realtà è lo stesso concetto, quindi è necessario trovare modi per comprimere sia image_tag che span nel parametro "name". puoi provare questo, non il codice completo ma penso che tu possa farlo da solo =) = link_to "# {image_tag} <span> Cerca </span>", ... riesci a vedere cosa sto cercando di fare?
Staelen

ah capito. sì, volevo comprimerlo nel parametro del nome. ma non era a conoscenza di # {}. momenti divertenti con i binari
Onnipresente

Questo potrebbe essere utile per gli altri: se vuoi solo aggiungere un'immagine accanto al testo del link devi solo fare <% = link_to image_tag ('image_path') + "link text", the_path%>
Nick Res

27

Aggiungendo solo che puoi passare al link_tometodo un blocco:

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

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

Questo mi ha salvato la vita quando il designer mi ha fornito collegamenti complessi con fantasiosi effetti di roll-over CSS3.


Non avevo bisogno delle cose extra che vengono prima del collegamento. Se ti sbarazzi di href puoi semplicemente essere indirizzato all'URL.
Jngai1297

Questa è stata la risposta migliore per me. Grazie!
newUserNameHere

@newUserNameHere Nessun problema! :)
Starkers

17

Il migliore sarà:

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

Questa è la soluzione più pulita.
Raidspec

La soluzione migliore, pulita e senza inutili loop.
Lucas Andrade

9

questa è la mia soluzione:

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

6

Facile:

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

Il primo parametro del link_to è il text / html per collegamento (all'interno del un tag). Il prossimo insieme di parametri sono le proprietà dell'URL e gli attributi del collegamento stessi.


L'avevo provato ma aggiungendolo lì diventa un parametro per la stringa. si prega di consultare il mio aggiornamento
Onnipresente

Sì, ho anche scritto che il secondo parametro è l'URL, ma poi l'ho cancellato senza motivo: P
Toby Hede

2

Per rispondere alla tua domanda aggiornata, secondo http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html ...

Fai attenzione quando usi il vecchio stile di argomento, poiché è necessario un hash letterale extra:

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

Lasciando fuori l'hash si ottiene il collegamento sbagliato:

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

2

Il tutto :action =>, :controller => che ho visto spesso in giro non ha funzionato per me.

Ho passato ore a scavare e questo metodo ha sicuramente funzionato per me in un ciclo.

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

Ruby on Rails utilizzando link_to con image_tag

Inoltre, sto usando Rails 4.


1

Ho provato anche questo e funziona molto bene:

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

Ehi ragazzi, questo è un buon modo di collegamento con l'immagine e ha molti oggetti di scena nel caso in cui vogliate sostituire l'attributo css per esempio "alt" o "titolo" ecc ..... includendo anche una restrizione logica (?)

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

Spero che questo ti aiuti!


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

Puoi spiegare alcuni dettagli sulla nostra risposta?
Nilesh

Il mio ans mostrerà un output come questo: <a href="https://stackoverflow.com/pages/search"> <img alt = "Search" border = "0" class = "dock-item" src = "/ images / Search.png? 1264132800" /> </a> <span> Cerca </span> </a>
Vivek Kapoor

0

Puoi anche provare questo

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

Dove "metas-logo" è una classe CSS con un'immagine di sfondo

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.