Skip to content

Instantly share code, notes, and snippets.

@ruemic

ruemic/index.tpl

Last active December 16, 2015 15:49
Show Gist options
  • Save ruemic/5458756 to your computer and use it in GitHub Desktop.
Save ruemic/5458756 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.tpl
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Picturefill</title>
<pop:stylesheet name="/screen.css"/>
</head>
<body>
<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>
<pop:javascript name="/matchmedia.js"/>
<pop:javascript name="/picturefill.js"/>
</body>
</html>
Raw
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*2 }) + '" 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's a gallery
if obj.images
{html: markupForImage(image, options)} for image in obj.images
else
{html: markupForImage(obj, options)}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment