1 2 3
<%= 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.
Helper method
1 2 3
def links_to(labels, options = {}, html_options = nil) labels.collect{|label| link_to(label, options, html_options)}.join end
Actual call from the template
1 2
<%= 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.
1 2 3
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
1
<%= link_to "#{image_tag("go_back.png")}Go Back", user_path(@user) %>
rjspotter
August 6, 2008, August 06, 2008 19:45, permalink
alternate suggestion
1 2 3 4 5
<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
1 2 3 4
<% 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.
view
1 2
<%= link_to "Go back", path_to_go_back, { :class => "prev", :title => "Previous page" } %>
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<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>
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.