Refactor srcset a little

middleman-core/features/asset_hash.feature

@@ -79,9 +79,6 @@ Feature: Assets get a file hash appended to their and references to them are upd
   Scenario: Hashed assets work with Slim
     Given the Server is running at "asset-hash-app"
     When I go to "/slim.html"
-    Then I should see 'href="apple-touch-icon.png"'
-    And I should see 'href="stylesheets/site-50eaa978.css"'
-    And I should see 'src="javascripts/application-1d8d5276.js"'
     And I should see 'src="images/100px-5fd6fb90.jpg"'
     And I should see 'srcset="images/100px-5fd6fb90.jpg 1x, images/200px-c11eb203.jpg 2x, images/300px-59adce76.jpg 3x"'
 

middleman-core/fixtures/asset-hash-app/source/slim.html.slim

@@ -1,617 +1,8 @@
 ---
 directory_index: false
+layout: false
 ---
 
-- content_for :head do
-  title
-    | The Middleman!
-
-h2
-  | Image url:
-
-img src="#{image_path('100px.jpg')}" srcset="#{image_path('100px.jpg')} 1x, #{image_path('200px.jpg')} 2x, #{image_path('300px.jpg')} 3x"
-
-h2
-  | Ignored path:
-
-link rel="apple-touch-icon" href="apple-touch-icon.png"
-
-h2
-  | Autogenerated tests:
-p
-  | images/100px.jpg
-p
-  | /images/100px.jpg
-p
-  | ../images/100px.jpg
-p
-  | ../../images/100px.jpg
-p
-  | ../../../images/100px.jpg
-p
-  | http://example.com/images/100px.jpg
-p
-  | aimages/100px.jpga
-p
-  | 1images/100px.jpg1
-p
-  | .images/100px.jpg.
-p
-  | -images/100px.jpg-
-p
-  | _images/100px.jpg_
-p
-  | 'images/100px.jpg'
-p
-  | '/images/100px.jpg'
-p
-  | '../images/100px.jpg'
-p
-  | '../../images/100px.jpg'
-p
-  | '../../../images/100px.jpg'
-p
-  | 'http://example.com/images/100px.jpg'
-p
-  | 'aimages/100px.jpga'
-p
-  | '1images/100px.jpg1'
-p
-  | '.images/100px.jpg.'
-p
-  | '-images/100px.jpg-'
-p
-  | '_images/100px.jpg_'
-p
-  | "images/100px.jpg"
-p
-  | "/images/100px.jpg"
-p
-  | "../images/100px.jpg"
-p
-  | "../../images/100px.jpg"
-p
-  | "../../../images/100px.jpg"
-p
-  | "http://example.com/images/100px.jpg"
-p
-  | "aimages/100px.jpga"
-p
-  | "1images/100px.jpg1"
-p
-  | ".images/100px.jpg."
-p
-  | "-images/100px.jpg-"
-p
-  | "_images/100px.jpg_"
-p
-  | <img src=images/100px.jpg />
-p
-  | <img src=/images/100px.jpg />
-p
-  | <img src=../images/100px.jpg />
-p
-  | <img src=../../images/100px.jpg />
-p
-  | <img src=../../../images/100px.jpg />
-p
-  | <img src=http://example.com/images/100px.jpg />
-p
-  | <img src=aimages/100px.jpga />
-p
-  | <img src=1images/100px.jpg1 />
-p
-  | <img src=.images/100px.jpg. />
-p
-  | <img src=-images/100px.jpg- />
-p
-  | <img src=_images/100px.jpg_ />
-p
-  | <img src='images/100px.jpg' />
-p
-  | <img src='/images/100px.jpg' />
-p
-  | <img src='../images/100px.jpg' />
-p
-  | <img src='../../images/100px.jpg' />
-p
-  | <img src='../../../images/100px.jpg' />
-p
-  | <img src='http://example.com/images/100px.jpg' />
-p
-  | <img src='aimages/100px.jpga' />
-p
-  | <img src='1images/100px.jpg1' />
-p
-  | <img src='.images/100px.jpg.' />
-p
-  | <img src='-images/100px.jpg-' />
-p
-  | <img src='_images/100px.jpg_' />
-p
-  | <img src="images/100px.jpg" />
-p
-  | <img src="/images/100px.jpg" />
-p
-  | <img src="../images/100px.jpg" />
-p
-  | <img src="../../images/100px.jpg" />
-p
-  | <img src="../../../images/100px.jpg" />
-p
-  | <img src="http://example.com/images/100px.jpg" />
-p
-  | <img src="aimages/100px.jpga" />
-p
-  | <img src="1images/100px.jpg1" />
-p
-  | <img src=".images/100px.jpg." />
-p
-  | <img src="-images/100px.jpg-" />
-p
-  | <img src="_images/100px.jpg_" />
-p
-  | background-image:url(images/100px.jpg);
-p
-  | background-image:url(/images/100px.jpg);
-p
-  | background-image:url(../images/100px.jpg);
-p
-  | background-image:url(../../images/100px.jpg);
-p
-  | background-image:url(../../../images/100px.jpg);
-p
-  | background-image:url(http://example.com/images/100px.jpg);
-p
-  | background-image:url(aimages/100px.jpga);
-p
-  | background-image:url(1images/100px.jpg1);
-p
-  | background-image:url(.images/100px.jpg.);
-p
-  | background-image:url(-images/100px.jpg-);
-p
-  | background-image:url(_images/100px.jpg_);
-p
-  | background-image:url('images/100px.jpg');
-p
-  | background-image:url('/images/100px.jpg');
-p
-  | background-image:url('../images/100px.jpg');
-p
-  | background-image:url('../../images/100px.jpg');
-p
-  | background-image:url('../../../images/100px.jpg');
-p
-  | background-image:url('http://example.com/images/100px.jpg');
-p
-  | background-image:url('aimages/100px.jpga');
-p
-  | background-image:url('1images/100px.jpg1');
-p
-  | background-image:url('.images/100px.jpg.');
-p
-  | background-image:url('-images/100px.jpg-');
-p
-  | background-image:url('_images/100px.jpg_');
-p
-  | background-image:url("images/100px.jpg");
-p
-  | background-image:url("/images/100px.jpg");
-p
-  | background-image:url("../images/100px.jpg");
-p
-  | background-image:url("../../images/100px.jpg");
-p
-  | background-image:url("../../../images/100px.jpg");
-p
-  | background-image:url("http://example.com/images/100px.jpg");
-p
-  | background-image:url("aimages/100px.jpga");
-p
-  | background-image:url("1images/100px.jpg1");
-p
-  | background-image:url(".images/100px.jpg.");
-p
-  | background-image:url("-images/100px.jpg-");
-p
-  | background-image:url("_images/100px.jpg_");
-
-p
-  | images/100px.png
-p
-  | /images/100px.png
-p
-  | ../images/100px.png
-p
-  | ../../images/100px.png
-p
-  | ../../../images/100px.png
-p
-  | http://example.com/images/100px.png
-p
-  | aimages/100px.pnga
-p
-  | 1images/100px.png1
-p
-  | .images/100px.png.
-p
-  | -images/100px.png-
-p
-  | _images/100px.png_
-p
-  | 'images/100px.png'
-p
-  | '/images/100px.png'
-p
-  | '../images/100px.png'
-p
-  | '../../images/100px.png'
-p
-  | '../../../images/100px.png'
-p
-  | 'http://example.com/images/100px.png'
-p
-  | 'aimages/100px.pnga'
-p
-  | '1images/100px.png1'
-p
-  | '.images/100px.png.'
-p
-  | '-images/100px.png-'
-p
-  | '_images/100px.png_'
-p
-  | "images/100px.png"
-p
-  | "/images/100px.png"
-p
-  | "../images/100px.png"
-p
-  | "../../images/100px.png"
-p
-  | "../../../images/100px.png"
-p
-  | "http://example.com/images/100px.png"
-p
-  | "aimages/100px.pnga"
-p
-  | "1images/100px.png1"
-p
-  | ".images/100px.png."
-p
-  | "-images/100px.png-"
-p
-  | "_images/100px.png_"
-p
-  | <img src=images/100px.png />
-p
-  | <img src=/images/100px.png />
-p
-  | <img src=../images/100px.png />
-p
-  | <img src=../../images/100px.png />
-p
-  | <img src=../../../images/100px.png />
-p
-  | <img src=http://example.com/images/100px.png />
-p
-  | <img src=aimages/100px.pnga />
-p
-  | <img src=1images/100px.png1 />
-p
-  | <img src=.images/100px.png. />
-p
-  | <img src=-images/100px.png- />
-p
-  | <img src=_images/100px.png_ />
-p
-  | <img src='images/100px.png' />
-p
-  | <img src='/images/100px.png' />
-p
-  | <img src='../images/100px.png' />
-p
-  | <img src='../../images/100px.png' />
-p
-  | <img src='../../../images/100px.png' />
-p
-  | <img src='http://example.com/images/100px.png' />
-p
-  | <img src='aimages/100px.pnga' />
-p
-  | <img src='1images/100px.png1' />
-p
-  | <img src='.images/100px.png.' />
-p
-  | <img src='-images/100px.png-' />
-p
-  | <img src='_images/100px.png_' />
-p
-  | <img src="images/100px.png" />
-p
-  | <img src="/images/100px.png" />
-p
-  | <img src="../images/100px.png" />
-p
-  | <img src="../../images/100px.png" />
-p
-  | <img src="../../../images/100px.png" />
-p
-  | <img src="http://example.com/images/100px.png" />
-p
-  | <img src="aimages/100px.pnga" />
-p
-  | <img src="1images/100px.png1" />
-p
-  | <img src=".images/100px.png." />
-p
-  | <img src="-images/100px.png-" />
-p
-  | <img src="_images/100px.png_" />
-p
-  | background-image:url(images/100px.png);
-p
-  | background-image:url(/images/100px.png);
-p
-  | background-image:url(../images/100px.png);
-p
-  | background-image:url(../../images/100px.png);
-p
-  | background-image:url(../../../images/100px.png);
-p
-  | background-image:url(http://example.com/images/100px.png);
-p
-  | background-image:url(aimages/100px.pnga);
-p
-  | background-image:url(1images/100px.png1);
-p
-  | background-image:url(.images/100px.png.);
-p
-  | background-image:url(-images/100px.png-);
-p
-  | background-image:url(_images/100px.png_);
-p
-  | background-image:url('images/100px.png');
-p
-  | background-image:url('/images/100px.png');
-p
-  | background-image:url('../images/100px.png');
-p
-  | background-image:url('../../images/100px.png');
-p
-  | background-image:url('../../../images/100px.png');
-p
-  | background-image:url('http://example.com/images/100px.png');
-p
-  | background-image:url('aimages/100px.pnga');
-p
-  | background-image:url('1images/100px.png1');
-p
-  | background-image:url('.images/100px.png.');
-p
-  | background-image:url('-images/100px.png-');
-p
-  | background-image:url('_images/100px.png_');
-p
-  | background-image:url("images/100px.png");
-p
-  | background-image:url("/images/100px.png");
-p
-  | background-image:url("../images/100px.png");
-p
-  | background-image:url("../../images/100px.png");
-p
-  | background-image:url("../../../images/100px.png");
-p
-  | background-image:url("http://example.com/images/100px.png");
-p
-  | background-image:url("aimages/100px.pnga");
-p
-  | background-image:url("1images/100px.png1");
-p
-  | background-image:url(".images/100px.png.");
-p
-  | background-image:url("-images/100px.png-");
-p
-  | background-image:url("_images/100px.png_");
-
-p
-  | images/100px.gif
-p
-  | /images/100px.gif
-p
-  | ../images/100px.gif
-p
-  | ../../images/100px.gif
-p
-  | ../../../images/100px.gif
-p
-  | http://example.com/images/100px.gif
-p
-  | aimages/100px.gifa
-p
-  | 1images/100px.gif1
-p
-  | .images/100px.gif.
-p
-  | -images/100px.gif-
-p
-  | _images/100px.gif_
-p
-  | 'images/100px.gif'
-p
-  | '/images/100px.gif'
-p
-  | '../images/100px.gif'
-p
-  | '../../images/100px.gif'
-p
-  | '../../../images/100px.gif'
-p
-  | 'http://example.com/images/100px.gif'
-p
-  | 'aimages/100px.gifa'
-p
-  | '1images/100px.gif1'
-p
-  | '.images/100px.gif.'
-p
-  | '-images/100px.gif-'
-p
-  | '_images/100px.gif_'
-p
-  | "images/100px.gif"
-p
-  | "/images/100px.gif"
-p
-  | "../images/100px.gif"
-p
-  | "../../images/100px.gif"
-p
-  | "../../../images/100px.gif"
-p
-  | "http://example.com/images/100px.gif"
-p
-  | "aimages/100px.gifa"
-p
-  | "1images/100px.gif1"
-p
-  | ".images/100px.gif."
-p
-  | "-images/100px.gif-"
-p
-  | "_images/100px.gif_"
-p
-  | <img src=images/100px.gif />
-p
-  | <img src=/images/100px.gif />
-p
-  | <img src=../images/100px.gif />
-p
-  | <img src=../../images/100px.gif />
-p
-  | <img src=../../../images/100px.gif />
-p
-  | <img src=http://example.com/images/100px.gif />
-p
-  | <img src=aimages/100px.gifa />
-p
-  | <img src=1images/100px.gif1 />
-p
-  | <img src=.images/100px.gif. />
-p
-  | <img src=-images/100px.gif- />
-p
-  | <img src=_images/100px.gif_ />
-p
-  | <img src='images/100px.gif' />
-p
-  | <img src='/images/100px.gif' />
-p
-  | <img src='../images/100px.gif' />
-p
-  | <img src='../../images/100px.gif' />
-p
-  | <img src='../../../images/100px.gif' />
-p
-  | <img src='http://example.com/images/100px.gif' />
-p
-  | <img src='aimages/100px.gifa' />
-p
-  | <img src='1images/100px.gif1' />
-p
-  | <img src='.images/100px.gif.' />
-p
-  | <img src='-images/100px.gif-' />
-p
-  | <img src='_images/100px.gif_' />
-p
-  | <img src="images/100px.gif" />
-p
-  | <img src="/images/100px.gif" />
-p
-  | <img src="../images/100px.gif" />
-p
-  | <img src="../../images/100px.gif" />
-p
-  | <img src="../../../images/100px.gif" />
-p
-  | <img src="http://example.com/images/100px.gif" />
-p
-  | <img src="aimages/100px.gifa" />
-p
-  | <img src="1images/100px.gif1" />
-p
-  | <img src=".images/100px.gif." />
-p
-  | <img src="-images/100px.gif-" />
-p
-  | <img src="_images/100px.gif_" />
-p
-  | background-image:url(images/100px.gif);
-p
-  | background-image:url(/images/100px.gif);
-p
-  | background-image:url(../images/100px.gif);
-p
-  | background-image:url(../../images/100px.gif);
-p
-  | background-image:url(../../../images/100px.gif);
-p
-  | background-image:url(http://example.com/images/100px.gif);
-p
-  | background-image:url(aimages/100px.gifa);
-p
-  | background-image:url(1images/100px.gif1);
-p
-  | background-image:url(.images/100px.gif.);
-p
-  | background-image:url(-images/100px.gif-);
-p
-  | background-image:url(_images/100px.gif_);
-p
-  | background-image:url('images/100px.gif');
-p
-  | background-image:url('/images/100px.gif');
-p
-  | background-image:url('../images/100px.gif');
-p
-  | background-image:url('../../images/100px.gif');
-p
-  | background-image:url('../../../images/100px.gif');
-p
-  | background-image:url('http://example.com/images/100px.gif');
-p
-  | background-image:url('aimages/100px.gifa');
-p
-  | background-image:url('1images/100px.gif1');
-p
-  | background-image:url('.images/100px.gif.');
-p
-  | background-image:url('-images/100px.gif-');
-p
-  | background-image:url('_images/100px.gif_');
-p
-  | background-image:url("images/100px.gif");
-p
-  | background-image:url("/images/100px.gif");
-p
-  | background-image:url("../images/100px.gif");
-p
-  | background-image:url("../../images/100px.gif");
-p
-  | background-image:url("../../../images/100px.gif");
-p
-  | background-image:url("http://example.com/images/100px.gif");
-p
-  | background-image:url("aimages/100px.gifa");
-p
-  | background-image:url("1images/100px.gif1");
-p
-  | background-image:url(".images/100px.gif.");
-p
-  | background-image:url("-images/100px.gif-");
-p
-  | background-image:url("_images/100px.gif_");
+= image_tag '100px.jpg', srcset: "100px.jpg 1x, 200px.jpg 2x, 300px.jpg 3x"
 
+= image_tag "100px.jpg"

middleman-core/lib/middleman-more/core_extensions/default_helpers.rb

@@ -262,8 +262,16 @@ class Middleman::CoreExtensions::DefaultHelpers < ::Middleman::Extension
       params.symbolize_keys!
       
       if params.key?(:srcset)
-        images = params[:srcset].split(',').map {|size| (size.include?('//') ? size : asset_url("images/#{size.strip}")) }
-        params[:srcset] = images.join(', ')
+        images_sources = params[:srcset].split(',').map do |src_def|
+          if src_def.include?('//')
+            src_def
+          else
+            image_def, size_def = src_def.strip.split(/\s+/)
+            asset_path(:images, image_def) + ' ' + size_def
+          end
+        end
+
+        params[:srcset] = images_sources.join(', ')
       end
 
       super(path, params)