A simple picture fill extension for Webpop

index.tpl

<pop:content>
  <div class="hero">
    <h1>Responsive Image Gallery</h1>
    <p>Using <a href="https://github.com/scottjehl/picturefill">picture fill</a> and <a href="http://www.webpop.com">Webpop</a></p>
    <pop:picture:responsive field="image" resize="fit" width="600"/>
  </div>
  
  <ul>
    <pop:picture:responsive field="image_gallery" resize="fit" width="150" break="li"/>
  </ul>    
</pop:content>

picture.coffee

markupForImage = (image, options) ->
  resize = options.resize   
  width = options.width
  height = options.height
  
  output = 
    '<div data-picture data-alt="' + image.alt + '">' +

    '<div data-src="' + image.src({ resize: resize, width: width, height: height }) + '"> </div>' +
    '<div data-src="' + image.src({ resize: resize, width: width*2, height: height }) + '" data-media="(min-device-pixel-ratio: 2.0)"> </div>' +
    
    '<div data-src="' + image.src({ resize: resize, width: width*2, height: height*2 }) + '" data-media="(min-width: 768px)"> </div>' +
    '<div data-src="' + image.src({ resize: resize, width: width*4, height: height*4 }) + '" data-media="(min-width: 768px) and (min-device-pixel-ratio: 2.0)"> </div>' +

    '</div>'+
    
    '<noscript>' +  
    '<img src="' + image.src({ resize: resize, width: width*2, height: height*2 }) + '" alt="' + image.alt + '" >' +
    '</noscript>' 


exports.responsive = (options, enclosed, scope) ->
  obj = scope.lookup(options.field)

  // Check if it is a gallery
  if obj.images
    {html: markupForImage(image, options)} for image in obj.images
  else
    {html: markupForImage(obj, options)}