feat (images) : add generate image function

config/image-sizes.js

@@ -1,10 +1,12 @@
 const fs = require('fs')
 const ora = require('ora')
+const { createCanvas, loadImage } = require('canvas')
 const Json2csvParser = require('json2csv').Parser
 const fields = ['location', 'sizes.width', 'sizes.height', 'sizes.retina', 'sizes.ratio']
 const dir = {
   conf: './src/conf-img/',
   tpl: './src/conf-img/tpl/',
+  defaultImages: './src/img/default/',
 }
 const path = {
   imagesSizesCsv: dir.conf + 'images-sizes.csv',
@@ -16,6 +18,11 @@ const regex = {
   crop: /crop="(.[^"]*)"/gm,
   img: /img-\d*-\d*/gm,
 }
+const imageSettings = {
+  fill: '#f1e25b',
+  logo: './src/img/static/logo-beapi.svg',
+  logoScale: 0.5,
+}
 const locations = {}
 const sizes = {}
 
@@ -28,7 +35,7 @@ let nbSizes = 0
  * @return {array}
  */
 function getTemplateFileNames() {
-  return fs.readdirSync(dir.tpl).filter(function(tpl) {
+  return fs.readdirSync(dir.tpl).filter(function (tpl) {
     return tpl !== 'default-picture.tpl'
   })
 }
@@ -77,7 +84,7 @@ function getDefaultImgName(str) {
  */
 function isRetina(src) {
   const retina = []
-  src.split(',').forEach(val => {
+  src.split(',').forEach((val) => {
     if (val.includes('2x')) {
       retina.push('2x')
     } else {
@@ -104,7 +111,7 @@ function createFile(filename, json) {
 function imageLocationsFromTpl() {
   const templateFileNames = getTemplateFileNames()
 
-  templateFileNames.forEach(function(tplName) {
+  templateFileNames.forEach(function (tplName) {
     nbLocations += 1
     const tplContent = getTemplateFileContent(tplName)
     const srcsetArr = tplContent.match(regex.srcset)
@@ -115,7 +122,7 @@ function imageLocationsFromTpl() {
       img_base: '',
     }
 
-    srcsetArr.forEach(src => {
+    srcsetArr.forEach((src) => {
       const dimensions = src.match(regex.img)
       const retina = isRetina(src)
       const crop = !(cropArr && cropArr[0] === 'crop="false"')
@@ -146,13 +153,55 @@ function imageLocationsFromTpl() {
         storage.srcsets.push(srcsetObj)
         storage.default_img = getDefaultImgName(size)
         storage.img_base = size
+
+        generateDefaultImage(sizes[size], getDefaultImgName(size))
       })
 
       locations[removeFileExtension(tplName)] = [storage]
     })
   })
 }
 
+/**
+ * Generate a default file from width and height
+ * @param {object} sizes dimensions of image
+ * @param {string} filename default image filename
+ * @returns {void}
+ */
+function generateDefaultImage(sizes, filename) {
+  try {
+    if (fs.existsSync(dir.defaultImages + filename)) {
+      return
+    }
+
+    const width = parseInt(sizes.width, 10)
+    const height = parseInt(sizes.height, 10)
+
+    const canvas = createCanvas(width, height)
+    const context = canvas.getContext('2d')
+
+    context.fillStyle = imageSettings.fill
+    context.fillRect(0, 0, width, height)
+
+    loadImage(imageSettings.logo).then((image) => {
+      let logoHeight = height * imageSettings.logoScale
+      let logoWidth = (logoHeight * image.naturalWidth) / image.naturalHeight
+
+      if (image.naturalWidth > image.naturalHeight) {
+        logoWidth = width * imageSettings.logoScale
+        logoHeight = (logoWidth * image.naturalHeight) / image.naturalWidth
+      }
+
+      context.drawImage(image, (width - logoWidth) / 2, (height - logoHeight) / 2, logoWidth, logoHeight)
+
+      const buffer = canvas.toBuffer('image/jpeg')
+      fs.writeFileSync(dir.defaultImages + filename, buffer)
+    })
+  } catch (err) {
+    console.error(err)
+  }
+}
+
 /**
  * Export all data as CSV
  */
@@ -174,7 +223,7 @@ function exportCSV() {
 
     CSVInfo.push(CSVObj)
 
-    srcsets.forEach(val => {
+    srcsets.forEach((val) => {
       const splitSize = val.size.split('-')
 
       CSVObj.sizes.push({

inc/Helpers/Formatting/Image.php

@@ -28,16 +28,13 @@
  * @type string $size Optional. The 'sizes' attribute value.
  * @type string $before Optional. Markup to prepend to the image. Default empty.
  * @type string $after Optional. Markup to append to the image. Default empty.
+ * @type boolean $default Optional. If WP image does not exists, display a default image.
  *
  * }
  *
  * @return string Return the markup of the image
  */
 function get_the_image( int $image_id, array $attributes, array $settings = [] ): string {
-	if ( $image_id <= 0 ) {
-		return '';
-	}
-
 	$attributes = wp_parse_args(
 		$attributes,
 		[

package.json

@@ -50,6 +50,7 @@
   "devDependencies": {
     "browser-sync": "^2.26.14",
     "browser-sync-webpack-plugin": "^2.3.0",
+    "canvas": "^2.8.0",
     "clean-webpack-plugin": "^4.0.0-alpha.0",
     "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-prettier": "^3.4.0",