diff --git a/actionview/CHANGELOG.md b/actionview/CHANGELOG.md
index e618183129..5bc93fcb5b 100644
--- a/actionview/CHANGELOG.md
+++ b/actionview/CHANGELOG.md
@@ -1,3 +1,7 @@
+* Add `srcset` option to `image_tag` helper.
+
+ *Roberto Miranda*
+
* Fix issues with scopes and engine on `current_page?` method.
Fixes #29401.
diff --git a/actionview/lib/action_view/helpers/asset_tag_helper.rb b/actionview/lib/action_view/helpers/asset_tag_helper.rb
index c21fe782c6..3a854e82d3 100644
--- a/actionview/lib/action_view/helpers/asset_tag_helper.rb
+++ b/actionview/lib/action_view/helpers/asset_tag_helper.rb
@@ -203,13 +203,15 @@ module ActionView
# ==== Options
#
# You can add HTML attributes using the +options+. The +options+ supports
- # two additional keys for convenience and conformance:
+ # additional keys for convenience and conformance:
#
# * :alt - If no alt text is given, the file name part of the
# +source+ is used (capitalized and without the extension)
# * :size - Supplied as "{Width}x{Height}" or "{Number}", so "30x45" becomes
# width="30" and height="45", and "50" becomes width="50" and height="50".
# :size will be ignored if the value is not in the correct format.
+ # * :srcset - If supplied as a hash or array of [source, descriptor]
+ # pairs, each image path will be expanded before the list is formatted as a string.
#
# ==== Examples
#
@@ -227,16 +229,28 @@ module ActionView
# # =>
# image_tag("/icons/icon.gif", data: { title: 'Rails Application' })
# # =>
+ # image_tag("icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" })
+ # # =>
+ # image_tag("pic.jpg", srcset: [["pic_1024.jpg", "1024w"], ["pic_1980.jpg", "1980w"]], sizes: "100vw")
+ # # =>
def image_tag(source, options = {})
options = options.symbolize_keys
check_for_image_tag_errors(options)
+ skip_pipeline = options.delete(:skip_pipeline)
- src = options[:src] = path_to_image(source, skip_pipeline: options.delete(:skip_pipeline))
+ src = options[:src] = path_to_image(source, skip_pipeline: skip_pipeline)
unless src.start_with?("cid:") || src.start_with?("data:") || src.blank?
options[:alt] = options.fetch(:alt) { image_alt(src) }
end
+ if options[:srcset] && !options[:srcset].is_a?(String)
+ options[:srcset] = options[:srcset].map do |src, size|
+ src_path = path_to_image(src, skip_pipeline: skip_pipeline)
+ "#{src_path} #{size}"
+ end.join(", ")
+ end
+
options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size]
tag("img", options)
end
diff --git a/actionview/test/template/asset_tag_helper_test.rb b/actionview/test/template/asset_tag_helper_test.rb
index 6093a4e660..d1190b1bd7 100644
--- a/actionview/test/template/asset_tag_helper_test.rb
+++ b/actionview/test/template/asset_tag_helper_test.rb
@@ -197,7 +197,10 @@ class AssetTagHelperTest < ActionView::TestCase
%(image_tag("mouse.png", :alt => nil)) => %(),
%(image_tag("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", :alt => nil)) => %(),
%(image_tag("")) => %(),
- %(image_tag("gold.png", data: { title: 'Rails Application' })) => %()
+ %(image_tag("gold.png", data: { title: 'Rails Application' })) => %(),
+ %(image_tag("rss.gif", srcset: "/assets/pic_640.jpg 640w, /assets/pic_1024.jpg 1024w")) => %(),
+ %(image_tag("rss.gif", srcset: { "pic_640.jpg" => "640w", "pic_1024.jpg" => "1024w" })) => %(),
+ %(image_tag("rss.gif", srcset: [["pic_640.jpg", "640w"], ["pic_1024.jpg", "1024w"]])) => %()
}
FaviconLinkToTag = {