gpe

0.6.0 • Public • Published

Generate Picture Element

downloads-badge

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

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.

Package Sidebar

Install

npm i gpe

Weekly Downloads

6

Version

0.6.0

License

Apache-2.0

Unpacked Size

59.1 kB

Total Files

32

Last publish

Collaborators

  • pldg