<%= link_to image_tag("go_back.png"), user_path(@user) %><%= link_to 'Go Back', user_path(@user) %>
Refactorings
No refactoring yet !
PabloBM
August 6, 2008, August 06, 2008 09:54, permalink
To be honest, I would probably leave it as is in my own code. However, if you want a DRY alternative, you can create the following helper, which you can then reuse for a "go_forward" link (if appropriate) or any other similar repeated links you may have.
def links_to(labels, options = {}, html_options = nil)
labels.collect{|label| link_to(label, options, html_options)}.join
end
<%= links_to([image_tag("go_back.png"), 'Go Back'], user_path(@user)) %>
Ben Hughes
August 6, 2008, August 06, 2008 11:53, permalink
I tend to define helpers for common image-link pairs like this.
def back_link_to(name, options = {}, html_options = {})
link_to(image_tag('go_back.png', options, html_options) + link_to(name, options, html_options)
end
rjspotter
August 6, 2008, August 06, 2008 19:31, permalink
<%= link_to "#{image_tag("go_back.png")}Go Back", user_path(@user) %>
rjspotter
August 6, 2008, August 06, 2008 19:45, permalink
alternate suggestion
<style type="text/css">
a.go_back { background: url(/images/go_back.png) center left no-repeat; padding-left: /*width of go_back.png*/;}
</style>
<%= link_to 'Go Back', user_path(@user), :class => 'go_back' %>
Adam
August 12, 2008, August 12, 2008 18:51, permalink
<% link_to user_path(@user) do %>
<%= image_tag("go_back.png") %>
Go Back
<% end %>
chovy.myopenid.com
October 5, 2008, October 05, 2008 01:58, permalink
The image itself would be a 32px x 96px image with the 3 states (link, active, hover) shifted up 32px for each state. This allows the image to preload and there will be no delay when doing rollovers.
The text is indented offscreen -9999px so it is not visable when the browser supports CSS. If the browser has CSS disabled, and/or images disabled, the user would simply see the text.
The title attribute is added to the link tag to give users a tooltip and assistive devices.
<%= link_to "Go back", path_to_go_back, { :class => "prev", :title => "Previous page" } %>
<style type="text/css" media="screen">
// normal button icon
a.prev:link, a.prev:visited, a.prev:hover, a.prev:active {
display: block; width: 32px; height: 32px; text-decoration: none; text-indent: -9999px;
background: transparent url('/images/icons_prev.png') no-repeat 0 0;
}
// highlighted button
a.prev:hover {
background-position: 0 -32px;
}
// depressed button icon
a.prev:active {
background-position: 0 -64px;
}
</style>
Nathanvda
May 6, 2009, May 06, 2009 11:22, permalink
You can easily combine both the image and the text into one link. If that is the intention, that is. I do like the solution just before mine, just using css.
<%= link_to image_tag("go_back.png") + 'Go Back', user_path(@user) %>
ian
August 27, 2009, August 27, 2009 18:30, permalink
better late than never:
link_to(image_tag("go_back.png") + " Go Back", user_path(@user))
I have two links side by side and they contain a lot of them same code, but im just not sure how to combine them.