gpe

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 and alt attributes
• Add prefix to attributes

Install

npm install --save-dev gpe

Quick start

const generateCandidates = require('gpe/lib/utils/generate-candidates');
const generatePictureElement = require('gpe');
 
const candidates = generateCandidates({
  filepaths: [
    'triss_400w.jpg',
    'triss_400w.webp',
    'triss_800w.jpg',
    'triss_800w.webp',
    'triss_close-up_400w.jpg',
    'triss_close-up_400w.webp',
    'triss_close-up_800w.jpg',
    'triss_close-up_800w.webp'
  ],
  width: /_\d+w\./,
  art: /_.+_/
});
 
const pictureElement = generatePictureElement({
  candidates,
  alt: 'triss',
  breakpoints: [{
    mediaQuery: '1280px',
    size: '50vw',
    art: 'close-up'
  }, {
    size: '100vw'
  }]
});

Output:

<picture>
  <source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="triss_close-up_400w.webp 400w, triss_close-up_800w.webp 800w"
    type="image/webp">
  <source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="triss_close-up_400w.jpg 400w, triss_close-up_800w.jpg 800w"
    type="image/jpeg">
  <source
    sizes="100vw"
    srcset="triss_400w.webp 400w, triss_800w.webp 800w"
    type="image/webp">
  <img
    alt="triss"
    sizes="100vw"
    srcset="triss_400w.jpg 400w, triss_800w.jpg 800w"
    src="triss_800w.jpg"
    type="image/jpeg">
</picture>

More info

• What is a picture element
• Getting started tutorial
• Generate candidates
• API
• Examples
• Demo

Test

• Run all tests: npm run test
• Run a specific example: npm run example -- 1 (where 1 is the example number)

Use jest as testing library.

Contribution

Contributions are welcome!

Notes

Inspired by responsivebreakpoints by Cloudinary.