@_gio/gulp-html-php-picture

gulp-html-php-picture

Fork of gulp-html-php-picture with support of retina images @2x & @3x, dynamic .png insertion in <picture> by data-attribure, and possibility to ignore .avif insertion by data-attribute

example

import gulp from 'gulp';
import imgToPicture from "@_gio/gulp-html-php-picture"

export default function html() {
  return src('src/*.html')
    .pipe(imgToPicture({
      imgFolder: './dist/img/',
      extensions: ['.jpg', '.jpeg'],
      logger: false,
      filterUnexistedImages: false,
      sortBySize: false,
      add2xRetinaAttribute: 'data-dppx-two',
      add3xRetinaAttribute: 'data-dppx-three',
      addPngAttribute: 'data-add-png',
      ignoreAvifAttribute: 'data-ignore-avif',
      sourceExtensions: [
        {
          extension: 'webp',
          mimetype: 'image/webp',
        },{
          extension: 'avif',
          mimetype: 'image/avif',
        },
    ],
    }))
    .pipe(gulp.dest('./dist/'))
}