module ActionView::Helpers::AssetTagHelper
def audio_tag(*sources)
audio_tag("sound.wav", "sound.mid")
# =>
audio_tag("sound.wav", autoplay: true, controls: true)
# =>
audio_tag("sound.wav")
# =>
audio_tag("sound")
your public audios directory.
The +source+ can be full path or file that exists in
Returns an HTML audio tag for the +source+.
def audio_tag(*sources) multiple_sources_tag('audio', sources) end
def auto_discovery_link_tag(type = :rss, url_options = {}, tag_options = {})
auto_discovery_link_tag(:rss, "http://www.example.com/feed.rss", {title: "Example RSS"})
# =>
auto_discovery_link_tag(:rss, {controller: "news", action: "feed"})
# =>
auto_discovery_link_tag(:rss, {action: "feed"}, {title: "My RSS"})
# =>
auto_discovery_link_tag(:rss, {action: "feed"})
# =>
auto_discovery_link_tag(:atom)
# =>
auto_discovery_link_tag
==== Examples
* :title - Specify the title of the link, defaults to the +type+
* :type - Override the auto-generated mime type
* :rel - Specify the relation of this link, defaults to "alternate"
==== Options
+url_options+. You can modify the LINK tag itself in +tag_options+.
:atom. Control the link options in url_for format using the
an RSS or Atom feed. The +type+ can either be :rss (default) or
Returns a link tag that browsers and feed readers can use to auto-detect
def auto_discovery_link_tag(type = :rss, url_options = {}, tag_options = {}) if !(type == :rss || type == :atom) && tag_options[:type].blank? raise ArgumentError.new("You should pass :type tag_option key explicitly, because you have passed #{type} type other than :rss or :atom.") end tag( "link", "rel" => tag_options[:rel] || "alternate", "type" => tag_options[:type] || Mime::Type.lookup_by_extension(type.to_s).to_s, "title" => tag_options[:title] || type.to_s.upcase, "href" => url_options.is_a?(Hash) ? url_for(url_options.merge(:only_path => false)) : url_options ) end
def extract_dimensions(size)
def extract_dimensions(size) if size =~ %r{\A\d+x\d+\z} size.split('x') elsif size =~ %r{\A\d+\z} [size, size] end end
def favicon_link_tag(source='favicon.ico', options={})
favicon_link_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png'
The following call would generate such a tag:
will be used if you add the page to the home screen of an iOS device.
Mobile Safari looks for a different link tag, pointing to an image that
# =>
favicon_link_tag 'myicon.ico'
# =>
favicon_link_tag
respectively:
to override their defaults, "shortcut icon" and "image/x-icon"
defaults to "favicon.ico", and also supports +:rel+ and +:type+ options
The helper gets the name of the favicon file as first argument, which
using this helper to generate its corresponding link tag.
their favicon storing the file under app/assets/images, and
To have better control applications may let the asset pipeline manage
request succeeds. If the favicon changes it is hard to get it updated.
ask for /favicon.ico automatically, and cache the file if the
If a page has no link like the one generated by this helper, browsers
Returns a link tag for a favicon managed by the asset pipeline.
def favicon_link_tag(source='favicon.ico', options={}) tag('link', { :rel => 'shortcut icon', :type => 'image/x-icon', :href => path_to_image(source) }.merge!(options.symbolize_keys)) end
def image_alt(src)
image_alt('underscored_file_name.png')
# => Hyphenated file name
image_alt('hyphenated-file-name.png')
# => Rails
image_alt('rails.png')
==== Examples
string.
replaces them with spaces, returning a space-separated, titleized
if any. It also removes hyphens and underscores from file names and
The method removes the basename of the file path and the digest,
The +src+ argument is meant to be an image file path.
Returns a string suitable for an HTML image tag alt attribute.
def image_alt(src) File.basename(src, '.*').sub(/-[[:xdigit:]]{32,64}\z/, '').tr('-_', ' ').capitalize end
def image_tag(source, options={})

image_tag("/icons/icon.gif", class: "menu_icon")
# =>

image_tag("/icons/icon.gif", height: '32', width: '32')
# =>

image_tag("/icons/icon.gif", size: "16")
# =>

image_tag("icon.png", size: "16x10", alt: "Edit Entry")
# =>

image_tag("icon.png")
# =>
image_tag("icon")
==== Examples
:size will be ignored if the value is not in the correct format.
width="30" and height="45", and "50" becomes width="50" and height="50".
* :size - Supplied as "{Width}x{Height}" or "{Number}", so "30x45" becomes
+source+ is used (capitalized and without the extension)
* :alt - If no alt text is given, the file name part of the
two additional keys for convenience and conformance:
You can add HTML attributes using the +options+. The +options+ supports
==== Options
path or a file.
Returns an HTML image tag for the +source+. The +source+ can be a full
def image_tag(source, options={}) options = options.symbolize_keys src = options[:src] = path_to_image(source) unless src =~ /^(?:cid|data):/ || src.blank? options[:alt] = options.fetch(:alt){ image_alt(src) } end options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size] tag("img", options) end
def javascript_include_tag(*sources)
javascript_include_tag "http://www.example.com/xmlhr.js"
# =>
javascript_include_tag "http://www.example.com/xmlhr"
#
# =>
javascript_include_tag "common.javascript", "/elsewhere/cools"
# =>
javascript_include_tag "xmlhr.js"
# =>
javascript_include_tag "template.jst", extname: false
# =>
javascript_include_tag "xmlhr"
source, and include other JavaScript or CoffeeScript files inside the manifest.
When the Asset Pipeline is enabled, you can pass the name of your manifest as
last argument.
You can modify the HTML attributes of the script tag by passing a hash as the
appended to the path extname: false can be set on the options.
When passing paths, the ".js" extension is optional. If you do not want ".js"
root. Relative paths are idiomatic, use absolute paths only when needed.
to assets/javascripts, full paths are assumed to be relative to the document
Sources may be paths to JavaScript files. Relative paths are assumed to be relative
Returns an HTML script tag for each of the +sources+ provided.
def javascript_include_tag(*sources) options = sources.extract_options!.stringify_keys path_options = options.extract!('protocol', 'extname').symbolize_keys sources.uniq.map { |source| tag_options = { "src" => path_to_javascript(source, path_options) }.merge!(options) content_tag(:script, "", tag_options) }.join("\n").html_safe end
def multiple_sources_tag(type, sources)
def multiple_sources_tag(type, sources) options = sources.extract_options!.symbolize_keys sources.flatten! yield options if block_given? if sources.size > 1 content_tag(type, options) do safe_join sources.map { |source| tag("source", :src => send("path_to_#{type}", source)) } end else options[:src] = send("path_to_#{type}", sources.first) content_tag(type, nil, options) end end
def stylesheet_link_tag(*sources)
# =>
stylesheet_link_tag "random.styles", "/css/stylish"
# =>
stylesheet_link_tag "style", media: "print"
# =>
stylesheet_link_tag "style", media: "all"
# =>
stylesheet_link_tag "http://www.example.com/style.css"
# =>
stylesheet_link_tag "style.css"
# =>
stylesheet_link_tag "style"
apply to all media types.
to "screen", so you must explicitly set it to "all" for the stylesheet(s) to
For historical reasons, the 'media' attribute will always be present and defaults
You can modify the link attributes by passing a hash as the last argument.
you don't specify an extension, .css will be appended automatically.
Returns a stylesheet link tag for the sources specified as arguments. If
def stylesheet_link_tag(*sources) options = sources.extract_options!.stringify_keys path_options = options.extract!('protocol').symbolize_keys sources.uniq.map { |source| tag_options = { "rel" => "stylesheet", "media" => "screen", "href" => path_to_stylesheet(source, path_options) }.merge!(options) tag(:link, tag_options) }.join("\n").html_safe end
def video_tag(*sources)
video_tag(["trailer.ogg", "trailer.flv"], size: "160x120")
# =>
video_tag(["trailer.ogg", "trailer.flv"])
# =>
video_tag("trailer.ogg", "trailer.flv")
# =>
video_tag("/trailers/hd.avi", height: '32', width: '32')
# =>
video_tag("/trailers/hd.avi", size: "16")
# =>
video_tag("/trailers/hd.avi", size: "16x16")
# =>
video_tag("trailer.m4v", size: "16x10", poster: "screenshot.png")
# =>
video_tag("trailer.ogg", controls: true, autobuffer: true)
# =>
video_tag("trailer.ogg")
# =>
video_tag("trailer")
==== Examples
:size will be ignored if the value is not in the correct format.
width="30" and height="45", and "50" becomes width="50" and height="50".
* :size - Supplied as "{Width}x{Height}" or "{Number}", so "30x45" becomes
before the video loads. The path is calculated like the +src+ of +image_tag+.
* :poster - Set an image (like a screenshot) to be shown
two additional keys for convenience and conformance:
You can add HTML attributes using the +options+. The +options+ supports
==== Options
directory.
+sources+ can be full paths or files that exists in your public videos
tag with nested source tags for each source will be returned. The
a single video tag will be returned. If +sources+ is an array, a video
Returns an HTML video tag for the +sources+. If +sources+ is a string,
def video_tag(*sources) multiple_sources_tag('video', sources) do |options| options[:poster] = path_to_image(options[:poster]) if options[:poster] options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size] end end