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.