Link_to best practice

Rails
1

I’m looking for best practice for creating a hyperlink which has both an
icon and text.

I am currently using this in my view:

<%= link_to image_tag(‘icons/add.png’, { :align => ‘absmiddle’, :border
=> 0, :size => ‘16x16’, :alt => ‘New education record’, :title => ‘New
education record’ }), new_education_path(@consultant) %> <%=
link_to ‘New education record’, new_education_path(@consultant) %>

… but it feels really really unDRY!

Anyone got a DRYer solution please?

2

On Mar 28, 2007, at 8:51 AM, kaps lock wrote:

education record’ }), new_education_path(@consultant) %> <%=
link_to ‘New education record’, new_education_path(@consultant) %>

… but it feels really really unDRY!

Anyone got a DRYer solution please?

Add this to your helper class:

def link_to_image_with_caption image, text, url, img_options={},
link_options={}
itag = image_tag(image,
{ :align => ‘absmiddle’,
:border => 0, :size => ‘16x16’,
:alt => text, :title => text }.merge
(img_options))
itag << " #{text}"
link_to(itag, url_for(url), linkoptions)
end

<%= link_to ‘icons/add.png’, ‘New education record’,
new_education_path(@consultant) %>

If you don’t want the :align, :border, and :size to be defaults, take
them out of the helper and use:

<%= link_to ‘icons/add.png’, ‘New education record’,
new_education_path(@consultant), :align => ‘absmiddle’, :border =>
0, :size => ‘16x16’ %>

If you need to add options to the link (i.e., the HTML of the
tag) such as a class, then:

<%= link_to ‘icons/add.png’, ‘New education record’,
new_education_path(@consultant), { :align => ‘absmiddle’, :border =>
0, :size => ‘16x16’ }, :class => ‘addlink’ %>

You could also consider adding the image with CSS and just adding
a :class or :id to the normal link_to

-Rob

Rob B. http://agileconsultingllc.com
[email protected]

3

On Mar 28, 2007, at 10:34 AM, Rob B. wrote:

<%= link_to image_tag(‘icons/add.png’, { :align =>
Add this to your helper class:
end

<%= link_to_image_with_caption ‘icons/add.png’, ‘New education
record’, new_education_path(@consultant) %>

If you don’t want the :align, :border, and :size to be defaults,
take them out of the helper and use:

<%= link_to_image_with_caption ‘icons/add.png’, ‘New education
record’, new_education_path(@consultant), :align =>
‘absmiddle’, :border => 0, :size => ‘16x16’ %>

If you need to add options to the link (i.e., the HTML of the
tag) such as a class, then:

<%= link_to_image_with_caption ‘icons/add.png’, ‘New education
record’, new_education_path(@consultant), { :align =>
‘absmiddle’, :border => 0, :size => ‘16x16’ }, :class => ‘addlink’ %>

You could also consider adding the image with CSS and just adding
a :class or :id to the normal link_to

-Rob

Of course, I forgot to change the call from link_to to the new helper
link_to_image_with_caption. I hope that was obvious.

I might as well show the CSS to accomplish almost the same thing:

   .addlink {
   background: #fcc url(/images/icons/add.png) 0 50% no-repeat;
   padding-left: 20px;
   }

The padding gives a 4px space between the 16x16 image and the
following content.

<%= link_to ‘New education record’, new_education_path
(@consultant), :class => ‘addlink’ %>

Yes, really just ‘link_to’ and no helper needed, just the CSS.

-Rob

Rob B. http://agileconsultingllc.com
[email protected]

4

Got one more question:

Does the link_to_remote have a class (css) parameter? I can’t seem to
get this to work.

5

I might as well show the CSS to accomplish almost the same thing:

   .addlink {
   background: #fcc url(/images/icons/add.png) 0 50% no-repeat;
   padding-left: 20px;
   }

The padding gives a 4px space between the 16x16 image and the
following content.

<%= link_to ‘New education record’, new_education_path
(@consultant), :class => ‘addlink’ %>

Yes, really just ‘link_to’ and no helper needed, just the CSS.

-Rob

Rob B. http://agileconsultingllc.com
[email protected]

Thanks so much Rob, I like both solutions, but I’m kind of leaning
towards the CSS version. It’s rather elegant. I hadn’t thought of using
CSS - doh! I was under the impression that something like this would
have already been thought of and added to the rails framework, but after
checking the Rails manual couldn’t find anything. Thanks heaps.

6

Kaps L. wrote:

Got one more question:

Does the link_to_remote have a class (css) parameter? I can’t seem to
get this to work.

Never mind, I found this which shows how to do it:

http://macdiggs.com/index.php/2006/11/27/adding-class-parameter-to-link_to_remote-in-rails/