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.

    Install

    npm i gpe

    DownloadsWeekly Downloads

    2

    Version

    0.6.0

    License

    Apache-2.0

    Unpacked Size

    59.1 kB

    Total Files

    32

    Last publish

    Collaborators

    • pldg