Created
December 4, 2020 04:59
-
-
Save slightlyoff/690ee4ab634487c46ee149de5442a541 to your computer and use it in GitHub Desktop.
picture shortcodes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Phil Hawksworth's Netlify LMS <picture> img generator | |
let getPicture = (url, alt="Missing alt text", width, height, style) => { | |
let w = width ? width : "500"; | |
let w_attr = width ? `width="${width}"` : ""; | |
let h_attr = height ? `height="${height}"` : ""; | |
let s_attr = style ? `style="${style}"` : ""; | |
return `<picture> | |
<source | |
media="(min-width: 1200px)" | |
srcset="${url}?nf_resize=fit&w=800 1x, | |
${url}?nf_resize=fit&w=1200 1.5x, | |
${url}?nf_resize=fit&w=1600 2x, | |
${url}?nf_resize=fit&w=2400 3x" > | |
<source | |
media="(min-width: 740px)" | |
srcset="${url}?nf_resize=fit&w=700 1x, | |
${url}?nf_resize=fit&w=1150 1.5x, | |
${url}?nf_resize=fit&w=1400 2x, | |
${url}?nf_resize=fit&w=2100 3x" > | |
<source | |
media="(min-width: 350px)" | |
srcset="${url}?nf_resize=fit&w=400 1x, | |
${url}?nf_resize=fit&w=600 1.5x, | |
${url}?nf_resize=fit&w=800 2x, | |
${url}?nf_resize=fit&w=1200 3x" > | |
<source | |
media="(min-width: 300px)" | |
srcset="${url}?nf_resize=fit&w=300 1x, | |
${url}?nf_resize=fit&w=450 1.5x, | |
${url}?nf_resize=fit&w=600 2x, | |
${url}?nf_resize=fit&w=900 3x" > | |
<img src="${url}?nf_resize=fit&w=400" | |
alt="${alt}" ${w_attr} ${h_attr} ${s_attr} | |
loading="lazy"> | |
</picture>`; | |
}; | |
config.addShortcode("picture", getPicture); | |
config.addShortcode("figure", (url, alt, ...otherargs) => { | |
let pictureMarkup = getPicture(url, alt, ...otherargs); | |
return ` | |
<figure> | |
${pictureMarkup} | |
<figcaption>${alt}</figcaption> | |
</figure> | |
`; | |
}); | |
config.addShortcode("figurelink", (imgurl, linkurl, alt, ...otherargs) => { | |
let pictureMarkup = getPicture(imgurl, alt, ...otherargs); | |
return ` | |
<figure> | |
<a href="${linkurl}" alt="${alt}"> | |
${pictureMarkup} | |
</a> | |
<figcaption>${alt}</figcaption> | |
</figure> | |
`; | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment