Forum: Ruby on Rails link_to best practice

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
C1b142946c8f689ed252d0bef2d39bba?d=identicon&s=25 Kaps Lok (kapslok)
on 2007-03-28 14:51
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?
Ef3aa7f7e577ea8cd620462724ddf73b?d=identicon&s=25 Rob Biedenharn (Guest)
on 2007-03-28 16:36
(Received via mailing list)
On Mar 28, 2007, at 8:51 AM, kaps lock wrote:

> 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
a :class or :id to the normal link_to

-Rob


Rob Biedenharn    http://agileconsultingllc.com
Rob@AgileConsultingLLC.com
Ef3aa7f7e577ea8cd620462724ddf73b?d=identicon&s=25 Rob Biedenharn (Guest)
on 2007-03-28 17:16
(Received via mailing list)
On Mar 28, 2007, at 10:34 AM, Rob Biedenharn 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 <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
C1b142946c8f689ed252d0bef2d39bba?d=identicon&s=25 Kaps Lok (kapslok)
on 2007-03-28 17:34
> 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

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.
C1b142946c8f689ed252d0bef2d39bba?d=identicon&s=25 Kaps Lok (kapslok)
on 2007-03-31 15:27
Got one more question:

Does the link_to_remote have a class (css) parameter? I can't seem to
get this to work.
C1b142946c8f689ed252d0bef2d39bba?d=identicon&s=25 Kaps Lok (kapslok)
on 2007-03-31 15:38
Kaps Lok 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-cl...
This topic is locked and can not be replied to.