View Helpers in Rails 5


Javascript include tag view helpers.

 > helper.javascript_include_tag 'main'
 => "<script src=\"/javascripts/main.js\"></script>" 
 > helper.javascript_include_tag 'main', 'columns'
 => "<script src=\"/javascripts/main.js\"></script>\n<script src=\"/javascripts/columns.js\"></script>" 
 > helper.javascript_include_tag ''
 => "<script src=\"\"></script>" 
 > helper.javascript_include_tag 'main', '/photos/columns'
 => "<script src=\"/javascripts/main.js\"></script>\n<script src=\"/photos/columns.js\"></script>" 

RSS Auto Discovery

RSS autodiscovery is a technique that makes it possible for browsers and other software to automatically find a site's RSS feed. You will see the RSS feed icon in the browser bar.

 > helper.auto_discovery_link_tag(:rss, '', {title: 'RubyPlus Podcast RSS Feed'})
 => "<link rel=\"alternate\" type=\"application/rss+xml\" title=\"RubyPlus Podcast RSS Feed\" href=\"\" />" 

You can install RSS Feed Reader Chrome plugin to verify that auto discovery link tag is working.


You can specify stylesheets using stylesheet_link_tag.

 > helper.stylesheet_link_tag 'main'
 => "<link rel=\"stylesheet\" media=\"screen\" href=\"/stylesheets/main.css\" />" 

Multiple stylesheets can be specified.

 > helper.stylesheet_link_tag 'main', 'columns'
 => "<link rel=\"stylesheet\" media=\"screen\" href=\"/stylesheets/main.css\" />\n<link rel=\"stylesheet\" media=\"screen\" href=\"/stylesheets/columns.css\" />" 
 > helper.stylesheet_link_tag 'main', 'photos/columns'
 => "<link rel=\"stylesheet\" media=\"screen\" href=\"/stylesheets/main.css\" />\n<link rel=\"stylesheet\" media=\"screen\" href=\"/stylesheets/photos/columns.css\" />" 

You can point to an URL for the stylesheet.

 > helper.stylesheet_link_tag ''
 => "<link rel=\"stylesheet\" media=\"screen\" href=\"\" />" 

You can specify stylesheet to be used for printing.

 > helper.stylesheet_link_tag 'main_print',media: 'print' 
 => "<link rel=\"stylesheet\" media=\"print\" href=\"/stylesheets/main_print.css\" />" 


You must specify the extension of the image. It will work in development but will break in production.

 > helper.image_tag 'header.png'
 => "<img src=\"/images/header.png\" alt=\"Header\" />" 

The images in app/assets/images/icons/delete.gif can be specified like this:

 > helper.image_tag 'icons/delete.gif'
 => "<img src=\"/images/icons/delete.gif\" alt=\"Delete\" />" 

You can specify the height.

 > helper.image_tag 'icons/delete.gif', {height: 45}
 => "<img height=\"45\" src=\"/images/icons/delete.gif\" alt=\"Delete\" />" 

You can specify the alt tag that displays a string when the image cannot be displayed.

 > helper.image_tag 'home.gif', alt: 'Home'
 => "<img alt=\"Home\" src=\"/images/home.gif\" />" 

You can specify the size as a dimension.

 > helper.image_tag 'home.gif', size: '50x20'
 => "<img src=\"/images/home.gif\" alt=\"Home\" width=\"50\" height=\"20\" />" 

You can specify the class.

 > helper.image_tag 'home.gif', alt: 'Go Home', id: 'HomeImage', class: 'nav_bar'
 => "<img alt=\"Go Home\" id=\"HomeImage\" class=\"nav_bar\" src=\"/images/home.gif\" />"  

The tags for audio and video must have the extension.

 > helper.video_tag 'movie.ogg'
 => "<video src=\"/videos/movie.ogg\"></video>" 
 > helper.video_tag ['trailer.ogg', 'movie.ogg']
 => "<video><source src=\"/videos/trailer.ogg\" /><source src=\"/videos/movie.ogg\" /></video>" 
 > helper.audio_tag 'music.mp3'
 => "<audio src=\"/audios/music.mp3\"></audio>" 
 > helper.audio_tag 'music/first_song.mp3'
 => "<audio src=\"/audios/music/first_song.mp3\"></audio>"


In this article, you learned how to use the view helpers in Rails 5 apps.


RSS Board

Related Articles

Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.