Resolves issue #1396 supporting srcset

allows you to use image_tag helper and have it build the asset urls for
your srcset images, just like it does for your main src. Leaves absolute
urls alone, (having // in the path)

```
<%= image_tage 'pic_1980.jpg', srcset: 'pic_640.jpg 2x, pic_1024.jpg 3x' %>
=> <img src="/images/pic_1980.jpg" srcset="/images/pic_640.jpg 2x, /images/pic_1024.jpg 3x">
```
This commit is contained in:
David Morrow 2015-04-22 13:09:02 -07:00
parent 60b3bfcee2
commit 580431ca43
5 changed files with 23 additions and 1 deletions

View file

@ -0,0 +1,7 @@
Feature: Support srcset property as params for image_tag helper
This lets you specify responsive image sizes
Scenario: Rendering an image with the feature enabled
Given the Server is running at "image-srcset-paths-app"
When I go to "/image-srcset-paths.html"
Then I should see '//example.com/remote-image.jpg 2x, /images/blank_3x.jpg 3x'

View file

@ -33,9 +33,10 @@ Feature: Markdown support in Haml (Kramdown)
:markdown :markdown
[A link](/link_target.html) [A link](/link_target.html)
![image](blank.gif) ![image](blank.gif){: srcset="image_2x.jpg 2x"}
""" """
Given the Server is running at "markdown-in-haml-app" Given the Server is running at "markdown-in-haml-app"
When I go to "/link_and_image/" When I go to "/link_and_image/"
Then I should see "/link_target/" Then I should see "/link_target/"
Then I should see "/images/image_2x.jpg 2x"
Then I should see 'src="/images/blank.gif"' Then I should see 'src="/images/blank.gif"'

View file

@ -0,0 +1 @@
<%= image_tag 'blank.jpg', srcset: '//example.com/remote-image.jpg 2x, blank_3x.jpg 3x, http://example.com/remoteimage.jpg 4x' %>

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 B

View file

@ -255,5 +255,18 @@ class Middleman::CoreExtensions::DefaultHelpers < ::Middleman::Extension
url = url_for(url, options) url = url_for(url, options)
super super
end end
# Modified Padrino image_tag so that it finds the paths for srcset
# using asset_path for the images listed in the srcset param
def image_tag(path, params={})
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(', ')
end
super(path, params)
end
end end
end end