link_to best practice

rubyonrails-talk
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) %>&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

2

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