Skip to content

Instantly share code, notes, and snippets.

@ruemic

ruemic/index.tpl

Last active December 16, 2015 09:19
Show Gist options
  • Save ruemic/5411834 to your computer and use it in GitHub Desktop.
Save ruemic/5411834 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Image Gallery Using Picture Fill
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"/>
<pop:javascript name="/matchmedia.js"/>
<pop:javascript name="/picturefill.js"/>
</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" class="hero"/>
</div>
<ul>
<pop:picture:responsive_gallery field="image_gallery" resize="fit" width="150"/>
</ul>
</pop:content>
<h2>Use the Source</h2>
<div class="code">
<script src="https://gist.github.com/ruemic/5411834.js"></script>
</div>
</body>
</html>
Raw
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: 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>'
return html: output
exports.responsive_gallery = (options, enclosed, scope) ->
image_gallery = scope.lookup(options.field)
resize = options.resize
width = options.width
height = options.height
output = ''
image_gallery.images.forEach (image) ->
output +=
'<li>' +
'<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>'+
'</li>'
return html: output
Raw
screen.scss
.hero {
width: 90%;
margin: 0px auto;
> div > img {
width: 100%;
}
}
h2, h1, p {
text-align: center;
font-family: sans-serif;
width: 100%;
clear:both;
}
h2 { padding: 30px 0; }
ul {
list-style: none;
width: 90%;
margin: 0xp auto;
}
li {
display: inline-block;
float: left;
margin: 5px;
width: 300px;
}
.last {
width: 600px
}
@media all and (max-width: 768px) {
li { width: 150px; }
}
.code {
width: 100%;
clear:both;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment