Skip to content

Instantly share code, notes, and snippets.

@herrkessler

herrkessler/jade srcset mixin

Created November 24, 2016 13:55
Show Gist options
  • Save herrkessler/a686296534bf3e8a8d4a7fdcc79485b4 to your computer and use it in GitHub Desktop.
Save herrkessler/a686296534bf3e8a8d4a7fdcc79485b4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
jade srcset mixin
mixin img
-
attributes.src = attributes.src || ''
attributes.alt = attributes.alt || ""
if(!attributes.adaptive && !attributes.webp && !attributes.retina)
img(src = attributes.src, class = attributes.class, alt = attributes.alt)
else
-
var chunks = attributes.src.split('.')
var extensions = []
extensions.push(chunks.pop())
var path_name = chunks.join()
if(attributes.webp) extensions.unshift('webp')
var sizes = [
{prefix:'sm', bp: 320},
{prefix:'md', bp: 768}
]
picture
each ext in extensions
if(attributes.adaptive)
each size in sizes
-
var srcset = path_name + '--' + size.prefix + '.' + ext
srcset += attributes.retina ? ', ' + path_name + '--' + size.prefix + '@2x.' + ext +' 2x' : ''
var type = ext=='webp'? "image/webp" : undefined
source(type= type, srcset= srcset, media="(max-width: #{size.bp}px)")
if (ext =='webp')
source(type= "image/webp", srcset="#{path_name}.#{ext}, #{path_name}@2x.#{ext} 2x")
- var srcset = attributes.retina ? path_name + '@2x.' + extensions[extensions.length-1] + ' 2x' : undefined
img(src = attributes.src, srcset= srcset, alt = attributes.alt, class= attributes.class)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment