Image_Tag and Link_To Helpers

All websites face a common problem–how do you refer to different pages and different images?

You can hard-code paths (eg. img src="http://www.google.ca/images/logo.gif" ); but what happens if you move your image or page? Then everything breaks.

Or you can try a relative path (eg. img src="../images/logo.gif" ); but this becomes a problem if you have lots of pages in different folders linking to the same thing, and frequently, you have to use trial and error to figure out the exact relative path to enter (does it have a slash before it or not? What’s the “current” path it’s searching from?).

Rails provides you with a convenient abstraction (based on convention) to deal with this problem in the form of two helpers–link_to and image_tag.

Image_tag takes only one parameter–the name of the image (eg. image_tag "logo.jpg"). You can use this helper from any view. It searches your Rails application’s /public/images folder for the image, and includes it. You can use this helper from any view, and you don’t need to worry about paths ever again! (Similar helpers also exist for stylesheet files and javascript snippets.)

Link_to takes a couple of parameters–some link text (or HTML), and a hash of parameters that specify what you’re linking to. You can specify :action and :controller to link to a specific controller action (eg. link_to "Log Out", {:action => :logout, :controller => :user}). Like image_tag, you don’t need to worry about paths or files!

What if you want to combine them–link to an image? You can do it easily, like so:

link_to image_tag "logo-small.png", {:action => :home}

…and voila! Your logo is there–albeit with an ugly blue border–and linked to your home action. Can we do better? How about removing the border?

The answer is to specify the attribute border=0 in the image tag. But how do we do that? Fortunately, the image_tag helper takes a second parameter–a hash of attributes. You can also specify a string of HTML attributes, and when Rails generates the corresponding HTML, the anchor tag will contain those attributes. So we can do this:

image_tag "logo_small.png", "border=0"

And the corresponding HTML is this:

As perfect as you could please! You can look up more details on these two helpers (and other, similar helpers) in the Rails API.