Skip to content

Instantly share code, notes, and snippets.

@herrkessler
Last active June 19, 2020 14:38
Show Gist options
  • Save herrkessler/d746f2746ead921c5bd4b06264d910d2 to your computer and use it in GitHub Desktop.
Save herrkessler/d746f2746ead921c5bd4b06264d910d2 to your computer and use it in GitHub Desktop.
picture mixin for pug.js - http://codepen.io/herrkessler/pen/ZeZKgW
mixin picture(path, name, type)
picture
each val in type
source(srcset=path + "/" + name + "." + val type="image/" + val)
img(src=path + "/" + name + ".jpg" alt=name)
+picture('path/to', 'image', ['jpg','webp'])
// Compiles to
//------------------------
// <picture>
// <source srcset="path/to/image.jpg" type="image/jpg">
// <source srcset="path/to/image.webp" type="image/webp">
// <img src="path/to/image.jpg" alt="image">
// </picture>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment