Merge pull request #29349 from robertomiranda/responsive-images

Add srcset option to image_tag helper

actionview/CHANGELOG.md

+*   Add `srcset` option to `image_tag` helper.
+
+    *Roberto Miranda*
+
 *   Fix issues with scopes and engine on `current_page?` method.
 
     Fixes #29401.

actionview/lib/action_view/helpers/asset_tag_helper.rb

@@ -203,13 +203,15 @@ def favicon_link_tag(source = "favicon.ico", options = {})
       # ==== 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:
       #
       # * <tt>:alt</tt>  - If no alt text is given, the file name part of the
       #   +source+ is used (capitalized and without the extension)
       # * <tt>:size</tt> - Supplied as "{Width}x{Height}" or "{Number}", so "30x45" becomes
       #   width="30" and height="45", and "50" becomes width="50" and height="50".
       #   <tt>:size</tt> will be ignored if the value is not in the correct format.
+      # * <tt>:srcset</tt> - If supplied as a hash or array of <tt>[source, descriptor]</tt>
+      #   pairs, each image path will be expanded before the list is formatted as a string.
       #
       # ==== Examples
       #
@@ -227,16 +229,28 @@ def favicon_link_tag(source = "favicon.ico", options = {})
       #   # => <img alt="Icon" class="menu_icon" src="/icons/icon.gif" />
       #   image_tag("/icons/icon.gif", data: { title: 'Rails Application' })
       #   # => <img data-title="Rails Application" src="/icons/icon.gif" />
+      #   image_tag("icon.png", srcset: { "icon_2x.png" => "2x", "icon_4x.png" => "4x" })
+      #   # => <img src="/assets/icon.png" srcset="/assets/icon_2x.png 2x, /assets/icon_4x.png 4x">
+      #   image_tag("pic.jpg", srcset: [["pic_1024.jpg", "1024w"], ["pic_1980.jpg", "1980w"]], sizes: "100vw")
+      #   # => <img src="/assets/pic.jpg" srcset="/assets/pic_1024.jpg 1024w, /assets/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

actionview/test/template/asset_tag_helper_test.rb

@@ -197,7 +197,10 @@ def url_for(*args)
     %(image_tag("mouse.png", :alt => nil)) => %(<img src="/images/mouse.png" />),
     %(image_tag("data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==", :alt => nil)) => %(<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />),
     %(image_tag("")) => %(<img src="" />),
-    %(image_tag("gold.png", data: { title: 'Rails Application' })) => %(<img data-title="Rails Application" src="/images/gold.png" alt="Gold" />)
+    %(image_tag("gold.png", data: { title: 'Rails Application' })) => %(<img data-title="Rails Application" src="/images/gold.png" alt="Gold" />),
+    %(image_tag("rss.gif", srcset: "/assets/pic_640.jpg 640w, /assets/pic_1024.jpg 1024w")) => %(<img srcset="/assets/pic_640.jpg 640w, /assets/pic_1024.jpg 1024w" src="/images/rss.gif" alt="Rss" />),
+    %(image_tag("rss.gif", srcset: { "pic_640.jpg" => "640w", "pic_1024.jpg" => "1024w" })) => %(<img srcset="/images/pic_640.jpg 640w, /images/pic_1024.jpg 1024w" src="/images/rss.gif" alt="Rss" />),
+    %(image_tag("rss.gif", srcset: [["pic_640.jpg", "640w"], ["pic_1024.jpg", "1024w"]])) => %(<img srcset="/images/pic_640.jpg 640w, /images/pic_1024.jpg 1024w" src="/images/rss.gif" alt="Rss" />)
   }
 
   FaviconLinkToTag = {