Generate Picture Element
Automate <picture>
element generation.
- Zero dependencies
- Auto-generate
srcset
- Auto-generate
<source>
for each extension - Set media queries
- Set
sizes
attribute - Set art direction
- Add public path
- Add fallback
src
or placeholder - Add
class
andalt
attributes - Add prefix to attributes
Install
npm install --save-dev gpe
Quick start
const generateCandidates = ;const generatePictureElement = ; const candidates = ; const pictureElement = ;
Output:
More info
Test
- Run all tests:
npm run test
- Run a specific example:
npm run example -- 1
(where1
is the example number)
Use jest as testing library.
Contribution
Contributions are welcome!
Notes
Inspired by responsivebreakpoints by Cloudinary.