diff --git a/middleman-core/features/asset_hash.feature b/middleman-core/features/asset_hash.feature index be78cd03..576e22c4 100644 --- a/middleman-core/features/asset_hash.feature +++ b/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"' diff --git a/middleman-core/fixtures/asset-hash-app/source/slim.html.slim b/middleman-core/fixtures/asset-hash-app/source/slim.html.slim index b59a38c2..65d81609 100644 --- a/middleman-core/fixtures/asset-hash-app/source/slim.html.slim +++ b/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" \ No newline at end of file diff --git a/middleman-core/lib/middleman-more/core_extensions/default_helpers.rb b/middleman-core/lib/middleman-more/core_extensions/default_helpers.rb index e711c234..5d6bee6f 100644 --- a/middleman-core/lib/middleman-more/core_extensions/default_helpers.rb +++ b/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)