link_to best practice

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) %>&nbsp;<%=
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 << "&nbsp;#{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 <a> 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

-Rob

Rob Biedenharn http://agileconsultingllc.com
Rob@AgileConsultingLLC.com

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) %>&nbsp;<%=
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 << "&nbsp;#{text}"
    link_to(itag, url_for(url), linkoptions)
  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 <a> 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 Biedenharn http://agileconsultingllc.com
Rob@AgileConsultingLLC.com