drupal-image-style-generator 0.1.2 → 0.2.0

package/README.md

@@ -22,3 +22,33 @@ col_8:
   width: 545
 ```
 
+## Usage
+
+Can be used in your script (grunt or gulp):
+
+```js
+const gen = require('drupal-image-style-generator');
+const themeName = 'myTheme';
+const themePath = './web/themes/custom/' + themeName;
+
+gen({
+    themePath: themePath,
+    themeName: themeName,
+    syncFolder: './config/sync',
+    gridSize: 100,
+});
+```
+
+
+## Options
+
+**themePath**: Relative path to the theme - needs to contain the `theme.breakpoints.yml`
+
+**themeName**: the name of the theme
+
+**syncFolder**: Relative path to the sync folder
+
+**gridSize**: (Default: 0) Number to which grid the images are rounded up. In the worst case, the image is gridSize - 1 px to big for the breakpoint, but a higher grid will result in lower individual image styles.
+
+**convertTo**: (Default: null) enables the image_convert style - allowed values are `png`,  `jpg`, `jpeg`, `jpe`, `gif`, `webp` 
+

package/index.js

@@ -1,9 +1,12 @@
-import log from "fancy-log";
-
-const REQUIRED_OPTIONS = ['themePath', 'themeName', 'syncFolder']
+const REQUIRED_OPTIONS = ['themePath', 'themeName', 'syncFolder'];
+const helpers = require('./src/helpers');
+const fs = require("fs");
+const yaml = require("js-yaml");
+const log = require("fancy-log");
+const {v4} = require("uuid");
 
 /**
- * @param {{themePath: string, themeName: string, syncFolder: string, gridSize?: number}} options
+ * @param {{themePath: string, themeName: string, syncFolder: string, gridSize?: number, convertTo?: string}} options
  */
 module.exports = function (options) {
 
@@ -13,14 +16,16 @@ module.exports = function (options) {
         }
     })
 
+    const convertTo = options.convertTo
     const themePath = options.themePath;
     const themeName = options.themeName;
     const syncFolder = options.syncFolder;
     const IMAGE_STYLE_GRID_SIZE = options.gridSize || 0; // this means, every style will be rounded up to the next divisible number of this
 
     const { v4 } = require("uuid");
-    const yaml = require('js-yaml');
-    const fs   = require('fs');
+    const yaml   = require('js-yaml');
+    const fs     = require('fs');
+    const log    = require('fancy-log');
     const breakpointsFile = themePath + '/' + themeName + '.breakpoints.yml';
     const imageStyles = {};
     const usedStyleConfigs = {};
@@ -86,6 +91,8 @@ module.exports = function (options) {
                 let concreteStyleId;
                 let styleFileName;
                 let styleFilePath;
+                let styleYml;
+                let hasChanges = false;
 
                 if (aspectRatio) {
                     styleHeight = imageStyles[styleId].height ? imageStyles[styleId].height * multiplyNum : Math.round(styleWidth * aspectRatio);
@@ -98,7 +105,7 @@ module.exports = function (options) {
 
                     usedStyleConfigs[styleFileName] = true;
 
-                    const styleYml = fs.existsSync(styleFilePath) ?
+                    styleYml = fs.existsSync(styleFilePath) ?
                         yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
                         {
                             uuid: uniqueId,
@@ -113,14 +120,29 @@ module.exports = function (options) {
                         }
                     ;
 
-                    const hasChanges = Object.values(styleYml.effects).length === 0 || Object.values(styleYml.effects).some((effectConf) => {
-                        return (effectConf.data.width !== styleWidth || effectConf.data.height !== styleHeight); // the width has changed
-                    });
+                    const scaleEffect = helpers.getEffectByTypeId('focal_point_scale_and_crop', styleYml.effects);
+                    const convertEffect = helpers.getEffectByTypeId('image_convert', styleYml.effects);
 
-                    if (hasChanges) {
-                        const effectId = v4();
+                    const hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth || scaleEffect.data.height !== styleHeight ||
+                        (convertTo && (!convertEffect || (convertEffect && convertEffect.data.extension !== convertTo))) || (!convertTo && convertEffect)
+                    ;
 
+                    if (hasChanges) {
                         styleYml.effects = {};
+
+                        if (convertTo) {
+                            const convertEffectId = v4();
+                            styleYml.effects[convertEffectId] = {
+                                uuid: convertEffectId,
+                                id: 'image_convert',
+                                weight: -1,
+                                data: {
+                                    extension: convertTo
+                                }
+                            }
+                        }
+
+                        const effectId = v4();
                         styleYml.effects[effectId] = {
                             uuid: effectId,
                             id: 'focal_point_scale_and_crop',
@@ -131,14 +153,7 @@ module.exports = function (options) {
                                 crop_type: 'focal_point'
                             }
                         };
-
-                        // write the file
-                        fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
-                        log('Created ' + styleFilePath);
-                    } else {
-                        log('skipping ' + styleFileName + ' - it already exists and there are no changes.');
                     }
-
                 } else {
 
                     // generate the filename
@@ -149,7 +164,7 @@ module.exports = function (options) {
 
                     usedStyleConfigs[styleFileName] = true;
 
-                    const styleYml = fs.existsSync(styleFilePath) ?
+                    styleYml = fs.existsSync(styleFilePath) ?
                         yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
                         {
                             uuid: uniqueId,
@@ -162,14 +177,29 @@ module.exports = function (options) {
                         }
                     ;
 
-                    const hasChanges = Object.values(styleYml.effects).length === 0 || Object.values(styleYml.effects).some((effectConf) => {
-                        return effectConf.data.width !== styleWidth; // the width has changed
-                    });
+                    const scaleEffect = helpers.getEffectByTypeId('image_scale', styleYml.effects);
+                    const convertEffect = helpers.getEffectByTypeId('image_convert', styleYml.effects);
 
-                    if (hasChanges) {
-                        const effectId = v4();
+                    const hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth ||
+                        (convertTo && (!convertEffect || (convertEffect && convertEffect.data.extension !== convertTo))) || (!convertTo && convertEffect)
+                    ;
 
+                    if (hasChanges) {
                         styleYml.effects = {};
+
+                        if (convertTo) {
+                            const convertEffectId = v4();
+                            styleYml.effects[convertEffectId] = {
+                                uuid: convertEffectId,
+                                id: 'image_convert',
+                                weight: -1,
+                                data: {
+                                    extension: convertTo
+                                }
+                            }
+                        }
+
+                        const effectId = v4();
                         styleYml.effects[effectId] = {
                             uuid: effectId,
                             id: 'image_scale',
@@ -180,16 +210,18 @@ module.exports = function (options) {
                                 upscale: false
                             }
                         };
-
-                        // write the file
-                        fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
-                        log('Created ' + styleFilePath);
-                    } else {
-                        log('skipping ' + styleFileName + ' - it already exists and there are no changes.');
                     }
 
                 }
 
+                if (hasChanges) {
+                    // write the file
+                    fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
+                    log('Created ' + styleFilePath);
+                } else {
+                    log('skipping ' + styleFileName + ' - it already exists and there are no changes.');
+                }
+
                 imageStyles[styleId].image_style_mappings.push({
                     breakpoint_id: bpName,
                     multiplier: multiplier,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drupal-image-style-generator",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "A helper tool to automatically geenrate drupal 8+ responsive image styles",
   "main": "index.js",
   "scripts": {

package/src/helpers.js

@@ -0,0 +1,14 @@
+module.exports = {
+
+    /**
+     *
+     * @param {string} effectTypeId
+     * @param {Record<string, {uuid: string, id: string, weight: number, data: {}}>} [effects]
+     */
+    getEffectByTypeId: function (effectTypeId, effects) {
+        return effects ? Object.values(effects).find((effect) => {
+            return effect.id === effectTypeId
+        }) : null;
+    }
+
+}