Cacher is the code snippet organizer for pro developers

/*
From Marty Walker Pastie

Picturefill markup with ProcessWire image sizing
https://github.com/scottjehl/picturefill/ 
http://processwire.com/
*/

<div data-picture data-alt='{$page->title}'>
	<div data-src='{$image->size(50,0)->url}'></div>
	<div data-src='{$image->size(375,0)->url}' data-media='(min-width: 400px)'></div>
	<div data-src='{$image->size(480,0)->url}' data-media='(min-width: 800px)'></div>
	<div data-src='{$image->size(688,0)->url}' data-media='(min-width: 1000px)'></div>
	<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
	<noscript><img src='{$image->size(375,0)->url}' alt='{$page->title}'></noscript>
</div>