Refactor srcset a little
This commit is contained in:
Thomas Reynolds
parent
45ba4bb0d4
commit
4bdf5a9005
3 changed files with 13 additions and 617 deletions
|
|
@ -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"'
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Reference in a new issue