A simple picture fill extension for Webpop

index.tpl

<pop:content>
  <pop:picture:responsive field="image" resize="fit"  width="300"/>
</pop:content>

picture.coffee

exports.responsive = (options, enclosed, scope) ->
  image = scope.lookup(options.field) 
  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: Math.round(width/2), height: Math.round(height/2) }) + '"> </div>' +
    '<div data-src="' + image.src({ resize: resize, width: width, height: height }) + '" data-media="(min-device-pixel-ratio: 2.0)"> </div>' +
    
    '<div data-src="' + image.src({ resize: resize, width: width, height: height }) + '" data-media="(min-width: 768px)"> </div>' +
    '<div data-src="' + image.src({ resize: resize, width: width*2, height: height*2 }) + '" data-media="(min-width: 768px) and (min-device-pixel-ratio: 2.0)"> </div>' +

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