Take the 2-minute tour ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.

What is the most elegant and readable way to in include (potentially long) image_tag calls inside of link_to?

Example

<%= link_to image_tag('buckminsterfullerene.png', width: '210', height: '60', alt: 'Molecular structure of Buckminsterfullerene'), 'some_long_path.html', title: 'Buckminsterfullerene', rel: 'tooltip', relative: true %>
share|improve this question
add comment

3 Answers

up vote 4 down vote accepted

I'd write:

<%= link_to('some_long_path.html', title: 'Buckminsterfullerene', 
            rel: 'tooltip', relative: true) do %>
  <%= image_tag('buckminsterfullerene.png', width: '210', height: '60', 
        alt: 'Molecular structure of Buckminsterfullerene') %>
<% end >
share|improve this answer
    
Like this most as it keeps the code under 80 columns and is a clean approach without too much overhead –  cseelus Jan 23 '13 at 20:30
1  
Keeping code inside 80 chars and saying that it makes it better, is like dancing with tam-tam, saying u gonna call the rain. –  Nakilon Jan 24 '13 at 6:39
1  
@Nakilon: I am not sure I get the analogy. Keeping lines under a certain width (80, 90, 100, whatever) improves readibility, which is one of the many points to take care when writing code (since you are communicating with people as much as you are communicating with the computer). –  tokland Jan 24 '13 at 14:35
    
@tokland it improves readability as much as writing it italic, red or with CAPSLOCK. –  Nakilon Jan 24 '13 at 17:01
add comment

You could create a helper to keep your views less bloated. For example:

app/helpers/application_helper.rb

...
def image_link_to(image_path, url, image_tag_options = { }, link_to_options = { })
  link_to url, link_to_options do
    image_tag image_path, image_tag_options
  end
end
...

app/views/pages/show.html.haml

...
= image_link_to "buckminsterfullerene.png", my_url_helper, { size: '210x60', alt: 'Molecular structure of Buckminsterfullerene' }, { title: 'Buckminsterfullerene', rel: 'tooltip', relative: true }
...
share|improve this answer
add comment
<%= link_to 'some_long_path.html', title: 'Buckminsterfullerene', rel: 'tooltip', relative: true do %>
  <%= image_tag 'buckminsterfullerene.png', size: '210x60', alt: 'Molecular structure of Buckminsterfullerene' %>
<% end >
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.