drupal-image-style-generator 0.2.0 → 1.0.1

package/.idea/drupal-image-style-generator.iml

@@ -2,6 +2,7 @@
 <module type="WEB_MODULE" version="4">
   <component name="NewModuleRootManager">
     <content url="file://$MODULE_DIR$">
+      <sourceFolder url="file://$MODULE_DIR$/test" isTestSource="true" />
       <excludeFolder url="file://$MODULE_DIR$/temp" />
       <excludeFolder url="file://$MODULE_DIR$/.tmp" />
       <excludeFolder url="file://$MODULE_DIR$/tmp" />

package/index.js

@@ -1,12 +1,14 @@
 const REQUIRED_OPTIONS = ['themePath', 'themeName', 'syncFolder'];
 const helpers = require('./src/helpers');
 const fs = require("fs");
+const path = require("path");
 const yaml = require("js-yaml");
 const log = require("fancy-log");
 const {v4} = require("uuid");
 
 /**
  * @param {{themePath: string, themeName: string, syncFolder: string, gridSize?: number, convertTo?: string}} options
+ * @returns {boolean}
  */
 module.exports = function (options) {
 
@@ -20,15 +22,23 @@ module.exports = function (options) {
     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 IMAGE_STYLE_GRID_SIZE = options.gridSize || 1; // 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 log    = require('fancy-log');
-    const breakpointsFile = themePath + '/' + themeName + '.breakpoints.yml';
-    const imageStyles = {};
+    const modulesFile = './' + path.normalize(syncFolder + '/core.extension.yml');
+    const breakpointsFile = './' + path.normalize(themePath + '/' + themeName + '.breakpoints.yml');
+    const imageStyles = {}; // contains the single actual style definitions
+    const cropTypes = {}; // contains potentially required crop types
+    const usedCropTypes = {};
     const usedStyleConfigs = {};
+    const requiredModules = {}; // contains additional custom modules, that need to be enabled before generation
+
+    if (!fs.existsSync(modulesFile)) {
+        throw new Error(`Could not find ${modulesFile} - is the sync folder configured correctly?`);
+    }
 
     if (!fs.existsSync(breakpointsFile)) {
         throw new Error(`Your configured theme has no ${breakpointsFile} theme breakpoints file. Please read the documentation and double check your options.`);
@@ -58,11 +68,18 @@ module.exports = function (options) {
                     imageStyles[styleId].image_style_mappings = [];
 
                     imageStyles[styleId].widths = {};
+                    imageStyles[styleId].cropTypes = {};
                 }
 
                 // adjust the aspect ratio, if a new is set
                 if (bp.imageStyles[styleId].aspectRatio) {
                     imageStyles[styleId].aspectRatio = bp.imageStyles[styleId].aspectRatio;
+
+                    if (imageStyles[styleId].manual_crop) {
+                        requiredModules['crop'] = true;
+                    } else {
+                        requiredModules['focal_point'] = true;
+                    }
                 }
 
                 let width = bp.imageStyles[styleId].width || parsedWidth;
@@ -73,16 +90,21 @@ module.exports = function (options) {
                 // set the new width
                 imageStyles[styleId].width = width;
                 imageStyles[styleId].widths[bpName] = imageStyles[styleId].width;
+
+                if (imageStyles[styleId].manual_crop) {
+                    imageStyles[styleId].cropTypes[bpName] = 'aspect_' + imageStyles[styleId].aspectRatio.replace(':', 'x');
+                }
+
             });
         }
 
         // loop over all the image styles
         Object.keys(imageStyles).forEach((styleId) => {
             bp.multipliers.forEach((multiplier) => {
-
                 const multiplyNum = parseFloat(multiplier);
                 const styleWidth = (imageStyles[styleId].widths[bpName] || parsedWidth) * multiplyNum;
                 const aspectRatio = imageStyles[styleId].aspectRatio;
+                const manualCrop = imageStyles[styleId].manual_crop;
 
                 const uniqueId = v4();
 
@@ -92,9 +114,97 @@ module.exports = function (options) {
                 let styleFileName;
                 let styleFilePath;
                 let styleYml;
-                let hasChanges = false;
+                let hasChanges;
+
+                if (manualCrop) {
+                    const cropType = imageStyles[styleId].cropTypes[bpName];
+                    const cropDimensions = cropType.split('_')[1].split('x').map((num) => {
+                        return parseInt(num, 10);
+                    });
+                    const aspectRatio = cropDimensions[1] / cropDimensions[0];
+
+                    if (!cropTypes[cropType]) {
+                        cropTypes[cropType] = {
+                            label: `Aspect Ratio ${cropDimensions[0]}:${cropDimensions[1]}`,
+                            aspect_ratio: `${cropDimensions[0]}:${cropDimensions[1]}`,
+                            soft_limit_width: styleWidth,
+                            soft_limit_height: Math.round(styleWidth * aspectRatio)
+                        }
+                    } else {
+                        cropTypes[cropType].soft_limit_width = Math.max(cropTypes[cropType].soft_limit_width, styleWidth);
+                        cropTypes[cropType].soft_limit_height = Math.round(Math.max(cropTypes[cropType].soft_limit_height, styleWidth * aspectRatio));
+                    }
+
+                    styleLabel = `Manual Crop and Scale ${styleWidth}`;
+                    concreteStyleId = `mc_${styleWidth}_${cropType}`;
+                    styleFileName = `image.style.${concreteStyleId}.yml`;
+                    styleFilePath = `${syncFolder}/${styleFileName}`;
+
+                    styleYml = fs.existsSync(styleFilePath) ?
+                        yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
+                        {
+                            uuid: uniqueId,
+                            langcode: 'de',
+                            status: true,
+                            dependencies: {
+                                config: ['crop.type.' + cropType],
+                                module: ['crop']
+                            },
+                            name: concreteStyleId,
+                            label: styleLabel,
+                            effects: {}
+                        }
+                    ;
+
+                    const convertEffect = helpers.getEffectByTypeId('image_convert', styleYml.effects);
+                    const cropEffect = helpers.getEffectByTypeId('crop_crop', styleYml.effects);
+                    const scaleEffect = helpers.getEffectByTypeId('image_scale', styleYml.effects);
+
+                    hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth ||
+                        !cropEffect || cropEffect.data.crop_type !== cropType ||
+                        (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: 'crop_crop',
+                            weight: 1,
+                            data: {
+                                crop_type: cropType,
+                                automatic_crop_provider: null
+                            }
+                        };
+
+                        const scaleEffectId = v4();
+                        styleYml.effects[scaleEffectId] = {
+                            uuid: scaleEffectId,
+                            id: 'image_scale',
+                            weight: 2,
+                            data: {
+                                width: styleWidth,
+                                height: null,
+                                upscale: false
+                            }
+                        };
+                    }
 
-                if (aspectRatio) {
+                } else if (aspectRatio) {
                     styleHeight = imageStyles[styleId].height ? imageStyles[styleId].height * multiplyNum : Math.round(styleWidth * aspectRatio);
 
                     // generate the filename
@@ -103,8 +213,6 @@ module.exports = function (options) {
                     styleFileName = `image.style.${concreteStyleId}.yml`;
                     styleFilePath = `${syncFolder}/${styleFileName}`;
 
-                    usedStyleConfigs[styleFileName] = true;
-
                     styleYml = fs.existsSync(styleFilePath) ?
                         yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
                         {
@@ -112,7 +220,7 @@ module.exports = function (options) {
                             langcode: 'de',
                             status: true,
                             dependencies: {
-                                module: ['focal_point'] // @todo - parse the module config and check, if focal point is enabled
+                                module: ['focal_point']
                             },
                             name: concreteStyleId,
                             label: styleLabel,
@@ -123,7 +231,7 @@ module.exports = function (options) {
                     const scaleEffect = helpers.getEffectByTypeId('focal_point_scale_and_crop', styleYml.effects);
                     const convertEffect = helpers.getEffectByTypeId('image_convert', styleYml.effects);
 
-                    const hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth || scaleEffect.data.height !== styleHeight ||
+                    hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth || scaleEffect.data.height !== styleHeight ||
                         (convertTo && (!convertEffect || (convertEffect && convertEffect.data.extension !== convertTo))) || (!convertTo && convertEffect)
                     ;
 
@@ -162,8 +270,6 @@ module.exports = function (options) {
                     styleFileName = `image.style.${concreteStyleId}.yml`;
                     styleFilePath = `${syncFolder}/${styleFileName}`;
 
-                    usedStyleConfigs[styleFileName] = true;
-
                     styleYml = fs.existsSync(styleFilePath) ?
                         yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
                         {
@@ -180,7 +286,7 @@ module.exports = function (options) {
                     const scaleEffect = helpers.getEffectByTypeId('image_scale', styleYml.effects);
                     const convertEffect = helpers.getEffectByTypeId('image_convert', styleYml.effects);
 
-                    const hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth ||
+                    hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth ||
                         (convertTo && (!convertEffect || (convertEffect && convertEffect.data.extension !== convertTo))) || (!convertTo && convertEffect)
                     ;
 
@@ -211,9 +317,10 @@ module.exports = function (options) {
                             }
                         };
                     }
-
                 }
 
+                usedStyleConfigs[styleFileName] = true;
+
                 if (hasChanges) {
                     // write the file
                     fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
@@ -233,6 +340,43 @@ module.exports = function (options) {
         });
     });
 
+    // test the required modules
+    const modulesConf = yaml.load(fs.readFileSync(modulesFile, 'utf8')).module;
+    Object.keys(requiredModules).forEach((moduleName) => {
+        if (requiredModules[moduleName] && modulesConf[moduleName] !== 0) {
+            throw new Error(`Your drupal installation is missing the ${moduleName} module. Please enable it before generating the image styles.`)
+        }
+    });
+
+    // write the actual crop types files
+    Object.keys(cropTypes).forEach((cropTypeId) => {
+        const type = cropTypes[cropTypeId];
+        const cropTypeFileName = `crop.type.${cropTypeId}.yml`;
+        const cropTypePath = `${syncFolder}/${cropTypeFileName}`;
+        const uniqueId = v4();
+        const cropTypeConfig = fs.existsSync(cropTypePath) ?
+            yaml.load(fs.readFileSync(cropTypePath, 'utf8')) :
+            {
+                uuid: uniqueId,
+                langcode: 'de',
+                status: true,
+                dependencies: {},
+                label: type.label,
+                id: cropTypeId,
+                description: type.label,
+                soft_limit_width: type.soft_limit_width,
+                soft_limit_height: type.soft_limit_height,
+                hard_limit_width: null,
+                hard_limit_height: null
+            }
+        ;
+
+        usedCropTypes[cropTypeFileName] = true;
+
+        fs.writeFileSync(cropTypePath, yaml.dump(cropTypeConfig));
+        log('Created crop type ' + cropTypePath);
+    });
+
     // write the actual responsive config files
     Object.keys(imageStyles).forEach((styleId) => {
         const responsiveImagePath = `${syncFolder}/responsive_image.styles.${styleId}.yml`;
@@ -271,11 +415,16 @@ module.exports = function (options) {
     const configFiles = fs.readdirSync(syncFolder);
 
     configFiles.forEach(file => {
-        if ((file.indexOf('image.style.sc_') === 0 || file.indexOf('image.style.s_') === 0) && !usedStyleConfigs[file]) {
+        if (
+            ((file.indexOf('image.style.sc_') === 0 || file.indexOf('image.style.s_') === 0 || file.indexOf('image.style.mc_') === 0) && !usedStyleConfigs[file]) ||
+            (file.indexOf('crop.type.aspect_') === 0 && !usedCropTypes[file])
+        ) {
             fs.rmSync(`${syncFolder}/${file}`);
             console.log('%o is unused and was removed.', file);
         }
     });
 
     log('Generated %d image styles for %d responsive sizes', Object.keys(usedStyleConfigs).length, Object.keys(imageStyles).length);
-}
+
+    return true;
+}

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "drupal-image-style-generator",
-  "version": "0.2.0",
+  "version": "1.0.1",
   "description": "A helper tool to automatically geenrate drupal 8+ responsive image styles",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "mocha --reporter spec"
   },
   "repository": {
     "type": "git",
@@ -24,7 +24,9 @@
     "grunt-bump": "^0.8.0",
     "grunt-prompt": "^1.3.3",
     "grunt-shell": "^4.0.0",
-    "semver": "^7.3.8"
+    "semver": "^7.3.8",
+    "chai": "^4.3.7",
+    "mocha": "^10.2.0"
   },
   "dependencies": {
     "fancy-log": "^2.0.0",

package/test/data/crop/config/sync/core.extension.yml

@@ -0,0 +1,107 @@
+_core:
+  default_config_hash: R4IF-ClDHXxblLcG0L7MgsLvfBIMAvi_skumNFQwkDc
+langcode: de
+module:
+  admin_toolbar: 0
+  admin_toolbar_tools: 0
+  automated_cron: 0
+  big_pipe: 0
+  block: 0
+  block_class: 0
+  block_content: 0
+  breakpoint: 0
+  ckeditor5: 0
+  classier_paragraphs: 0
+  config: 0
+  crop: 0
+  config_partial_export: 0
+  config_translation: 0
+  content_sync: 0
+  contextual: 0
+  cookies: 0
+  datetime: 0
+  dblog: 0
+  dynamic_page_cache: 0
+  editor: 0
+  editor_advanced_link: 0
+  entity_browser: 0
+  entity_browser_entity_form: 0
+  entity_reference_display: 0
+  entity_reference_revisions: 0
+  field: 0
+  field_ui: 0
+  file: 0
+  filter: 0
+  fpa: 0
+  help: 0
+  history: 0
+  honeypot: 0
+  image: 0
+  image_widget_crop: 0
+  imageapi_optimize: 0
+  imageapi_optimize_resmushit: 0
+  inline_entity_form: 0
+  jquery_ui: 0
+  jquery_ui_draggable: 0
+  language: 0
+  link: 0
+  linkit: 0
+  linkit_media_library: 0
+  locale: 0
+  matomo: 0
+  media: 0
+  media_entity_browser: 0
+  media_entity_browser_media_library: 0
+  media_library: 0
+  menu_link_attributes: 0
+  menu_link_content: 0
+  menu_ui: 0
+  metatag: 0
+  metatag_verification: 0
+  metatag_views: 0
+  mysql: 0
+  node: 0
+  obfuscate_email: 0
+  options: 0
+  page_cache: 0
+  paragraphs_edit: 0
+  path: 0
+  path_alias: 0
+  quicklink: 0
+  rabbit_hole: 0
+  redirect: 0
+  responsive_image: 0
+  rh_media: 0
+  rh_node: 0
+  rh_taxonomy: 0
+  serialization: 0
+  shortcut: 0
+  site_image: 0
+  site_paragraphs: 0
+  site_video: 0
+  svg_image: 0
+  svg_image_responsive: 0
+  symfony_mailer: 0
+  system: 0
+  taxonomy: 0
+  text: 0
+  token: 0
+  toolbar: 0
+  transliterate_filenames: 0
+  twig_tweak: 0
+  update: 0
+  user: 0
+  viewfield: 0
+  views_ui: 0
+  webform: 0
+  webform_ui: 0
+  pathauto: 1
+  views: 10
+  cookies_matomo: 11
+  paragraphs: 11
+  tvi: 15
+  distro: 1000
+theme:
+  claro: 0
+  flowy: 0
+profile: distro

package/test/data/crop/config/sync/crop.type.aspect_165x266.yml

@@ -0,0 +1,11 @@
+uuid: bc4efe45-64e9-4a95-8a82-44d5569741dd
+langcode: de
+status: true
+dependencies: {}
+label: Aspect Ratio 165:266
+id: aspect_165x266
+description: Aspect Ratio 165:266
+soft_limit_width: 1320
+soft_limit_height: 2128
+hard_limit_width: null
+hard_limit_height: null

package/test/data/crop/config/sync/crop.type.aspect_635x424.yml

@@ -0,0 +1,11 @@
+uuid: d56db1d9-6540-4bc8-8a4d-212e8551e456
+langcode: de
+status: true
+dependencies: {}
+label: Aspect Ratio 635:424
+id: aspect_635x424
+description: Aspect Ratio 635:424
+soft_limit_width: 580
+soft_limit_height: 387
+hard_limit_width: null
+hard_limit_height: null

package/test/data/crop/config/sync/image.style.mc_1150_aspect_165x266.yml

@@ -0,0 +1,26 @@
+uuid: 94309bf7-a6c9-491b-9d02-9f5a553abd9e
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_165x266
+  module:
+    - crop
+name: mc_1150_aspect_165x266
+label: Manual Crop and Scale 1150
+effects:
+  fd420ed1-c9ee-4353-b84e-732f5ba251ce:
+    uuid: fd420ed1-c9ee-4353-b84e-732f5ba251ce
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_165x266
+      automatic_crop_provider: null
+  34e84fce-08d8-4c6f-a014-8076b1d5d6bc:
+    uuid: 34e84fce-08d8-4c6f-a014-8076b1d5d6bc
+    id: image_scale
+    weight: 2
+    data:
+      width: 1150
+      height: null
+      upscale: false

package/test/data/crop/config/sync/image.style.mc_1320_aspect_165x266.yml

@@ -0,0 +1,26 @@
+uuid: fb4ebd61-4255-49fa-b915-fc60ddff2e41
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_165x266
+  module:
+    - crop
+name: mc_1320_aspect_165x266
+label: Manual Crop and Scale 1320
+effects:
+  9ad2dc73-5ece-412e-9f7e-b7b3e558ae52:
+    uuid: 9ad2dc73-5ece-412e-9f7e-b7b3e558ae52
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_165x266
+      automatic_crop_provider: null
+  52c07d14-a4ac-497a-b08e-eb15706b2603:
+    uuid: 52c07d14-a4ac-497a-b08e-eb15706b2603
+    id: image_scale
+    weight: 2
+    data:
+      width: 1320
+      height: null
+      upscale: false

package/test/data/crop/config/sync/image.style.mc_290_aspect_635x424.yml

@@ -0,0 +1,26 @@
+uuid: bfe921e0-c819-4b21-b0e2-6d930e465968
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_635x424
+  module:
+    - crop
+name: mc_290_aspect_635x424
+label: Manual Crop and Scale 290
+effects:
+  c2e88340-30e0-417e-b7a1-e038df8964bf:
+    uuid: c2e88340-30e0-417e-b7a1-e038df8964bf
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_635x424
+      automatic_crop_provider: null
+  dd58c164-bd4a-4279-9f2d-c5d15d6caf9a:
+    uuid: dd58c164-bd4a-4279-9f2d-c5d15d6caf9a
+    id: image_scale
+    weight: 2
+    data:
+      width: 290
+      height: null
+      upscale: false

package/test/data/crop/config/sync/image.style.mc_575_aspect_165x266.yml

@@ -0,0 +1,26 @@
+uuid: 5cb45f65-ff19-4258-b01d-700fc3419bb2
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_165x266
+  module:
+    - crop
+name: mc_575_aspect_165x266
+label: Manual Crop and Scale 575
+effects:
+  5b2132b5-ad86-4e85-9de9-493f51077829:
+    uuid: 5b2132b5-ad86-4e85-9de9-493f51077829
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_165x266
+      automatic_crop_provider: null
+  23efa495-ce42-4a81-bcc5-00b59c5f6432:
+    uuid: 23efa495-ce42-4a81-bcc5-00b59c5f6432
+    id: image_scale
+    weight: 2
+    data:
+      width: 575
+      height: null
+      upscale: false

package/test/data/crop/config/sync/image.style.mc_580_aspect_635x424.yml

@@ -0,0 +1,26 @@
+uuid: 43aca4e3-ca35-4494-947a-b768a20aebe8
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_635x424
+  module:
+    - crop
+name: mc_580_aspect_635x424
+label: Manual Crop and Scale 580
+effects:
+  a3fdf392-5939-47a6-ac3c-69b468c07db8:
+    uuid: a3fdf392-5939-47a6-ac3c-69b468c07db8
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_635x424
+      automatic_crop_provider: null
+  4db37637-c7e9-47c0-bbf1-3adc22379da3:
+    uuid: 4db37637-c7e9-47c0-bbf1-3adc22379da3
+    id: image_scale
+    weight: 2
+    data:
+      width: 580
+      height: null
+      upscale: false

package/test/data/crop/config/sync/image.style.mc_660_aspect_165x266.yml

@@ -0,0 +1,26 @@
+uuid: 14c92cbb-0118-40fa-b5e4-f81b7e841b46
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_165x266
+  module:
+    - crop
+name: mc_660_aspect_165x266
+label: Manual Crop and Scale 660
+effects:
+  44162a11-4f9a-404d-94ff-31ea41095194:
+    uuid: 44162a11-4f9a-404d-94ff-31ea41095194
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_165x266
+      automatic_crop_provider: null
+  12ee83a5-2763-47ee-941e-f36916f15bc9:
+    uuid: 12ee83a5-2763-47ee-941e-f36916f15bc9
+    id: image_scale
+    weight: 2
+    data:
+      width: 660
+      height: null
+      upscale: false

package/test/data/crop/config/sync/responsive_image.styles.frontpage_hero.yml

@@ -0,0 +1,42 @@
+uuid: 94e0beb1-7f8a-4b34-ad42-1c840f937c77
+langcode: de
+status: true
+dependencies:
+  config:
+    - image.style.mc_575_aspect_165x266
+    - image.style.mc_1150_aspect_165x266
+    - image.style.mc_660_aspect_165x266
+    - image.style.mc_1320_aspect_165x266
+    - image.style.mc_290_aspect_635x424
+    - image.style.mc_580_aspect_635x424
+  theme:
+    - crop
+id: frontpage_hero
+label: Frontage Hero
+image_style_mappings:
+  - breakpoint_id: default.xs
+    multiplier: 1x
+    image_mapping_type: image_style
+    image_mapping: mc_575_aspect_165x266
+  - breakpoint_id: default.xs
+    multiplier: 2x
+    image_mapping_type: image_style
+    image_mapping: mc_1150_aspect_165x266
+  - breakpoint_id: default.md
+    multiplier: 1x
+    image_mapping_type: image_style
+    image_mapping: mc_660_aspect_165x266
+  - breakpoint_id: default.md
+    multiplier: 2x
+    image_mapping_type: image_style
+    image_mapping: mc_1320_aspect_165x266
+  - breakpoint_id: default.lg
+    multiplier: 1x
+    image_mapping_type: image_style
+    image_mapping: mc_290_aspect_635x424
+  - breakpoint_id: default.lg
+    multiplier: 2x
+    image_mapping_type: image_style
+    image_mapping: mc_580_aspect_635x424
+breakpoint_group: crop
+fallback_image_style: mc_575_aspect_165x266

package/test/data/crop/web/themes/crop/crop.breakpoints.yml

@@ -0,0 +1,35 @@
+default.xs: # mobile phones
+  label: XS
+  mediaQuery: '(max-width: 575px)'
+  weight: 0
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    frontpage_hero:
+      label: 'Frontage Hero'
+      manual_crop: true
+      aspectRatio: '165:266'
+      width: 575
+default.md: # large tablets
+  label: MD
+  mediaQuery: '(min-width: 576px) and (max-width: 991px)'
+  weight: 1
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    # assuming, that the breakpoint is at md
+    frontpage_hero:
+      width: 660
+default.lg: # desktop
+  label: LG
+  mediaQuery: '(min-width: 992px) and (max-width: 1199px)'
+  weight: 3
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    frontpage_hero:
+      width: 290
+      aspectRatio: '635:424'

package/test/data/insufficient_modules/config/sync/core.extension.yml

@@ -0,0 +1,106 @@
+_core:
+  default_config_hash: R4IF-ClDHXxblLcG0L7MgsLvfBIMAvi_skumNFQwkDc
+langcode: de
+module:
+  admin_toolbar: 0
+  admin_toolbar_tools: 0
+  automated_cron: 0
+  big_pipe: 0
+  block: 0
+  block_class: 0
+  block_content: 0
+  breakpoint: 0
+  ckeditor5: 0
+  classier_paragraphs: 0
+  config: 0
+  config_partial_export: 0
+  config_translation: 0
+  content_sync: 0
+  contextual: 0
+  cookies: 0
+  datetime: 0
+  dblog: 0
+  dynamic_page_cache: 0
+  editor: 0
+  editor_advanced_link: 0
+  entity_browser: 0
+  entity_browser_entity_form: 0
+  entity_reference_display: 0
+  entity_reference_revisions: 0
+  field: 0
+  field_ui: 0
+  file: 0
+  filter: 0
+  fpa: 0
+  help: 0
+  history: 0
+  honeypot: 0
+  image: 0
+  image_widget_crop: 0
+  imageapi_optimize: 0
+  imageapi_optimize_resmushit: 0
+  inline_entity_form: 0
+  jquery_ui: 0
+  jquery_ui_draggable: 0
+  language: 0
+  link: 0
+  linkit: 0
+  linkit_media_library: 0
+  locale: 0
+  matomo: 0
+  media: 0
+  media_entity_browser: 0
+  media_entity_browser_media_library: 0
+  media_library: 0
+  menu_link_attributes: 0
+  menu_link_content: 0
+  menu_ui: 0
+  metatag: 0
+  metatag_verification: 0
+  metatag_views: 0
+  mysql: 0
+  node: 0
+  obfuscate_email: 0
+  options: 0
+  page_cache: 0
+  paragraphs_edit: 0
+  path: 0
+  path_alias: 0
+  quicklink: 0
+  rabbit_hole: 0
+  redirect: 0
+  responsive_image: 0
+  rh_media: 0
+  rh_node: 0
+  rh_taxonomy: 0
+  serialization: 0
+  shortcut: 0
+  site_image: 0
+  site_paragraphs: 0
+  site_video: 0
+  svg_image: 0
+  svg_image_responsive: 0
+  symfony_mailer: 0
+  system: 0
+  taxonomy: 0
+  text: 0
+  token: 0
+  toolbar: 0
+  transliterate_filenames: 0
+  twig_tweak: 0
+  update: 0
+  user: 0
+  viewfield: 0
+  views_ui: 0
+  webform: 0
+  webform_ui: 0
+  pathauto: 1
+  views: 10
+  cookies_matomo: 11
+  paragraphs: 11
+  tvi: 15
+  distro: 1000
+theme:
+  claro: 0
+  flowy: 0
+profile: distro

package/test/data/insufficient_modules/config/sync/image.style.mc_1150_aspect_165x266.yml

@@ -0,0 +1,26 @@
+uuid: 2095964a-91b2-4f6d-9168-47d176a6fd78
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_165x266
+  module:
+    - crop
+name: mc_1150_aspect_165x266
+label: Manual Crop and Scale 1150
+effects:
+  dedf03d7-5674-4c45-8fca-5978ef50f388:
+    uuid: dedf03d7-5674-4c45-8fca-5978ef50f388
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_165x266
+      automatic_crop_provider: null
+  c01f0572-ea6f-4cbd-83a9-af79b4d6ef34:
+    uuid: c01f0572-ea6f-4cbd-83a9-af79b4d6ef34
+    id: image_scale
+    weight: 2
+    data:
+      width: 1150
+      height: null
+      upscale: false

package/test/data/insufficient_modules/config/sync/image.style.mc_1320_aspect_635x424.yml

@@ -0,0 +1,26 @@
+uuid: 94a5ae41-fd00-4cdd-9e41-c55cf708f80c
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_635x424
+  module:
+    - crop
+name: mc_1320_aspect_635x424
+label: Manual Crop and Scale 1320
+effects:
+  68e5495a-7f52-41a2-b1cf-2bbd7d77da99:
+    uuid: 68e5495a-7f52-41a2-b1cf-2bbd7d77da99
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_635x424
+      automatic_crop_provider: null
+  63592331-ee1b-4834-b569-8f6920ea7b8a:
+    uuid: 63592331-ee1b-4834-b569-8f6920ea7b8a
+    id: image_scale
+    weight: 2
+    data:
+      width: 1320
+      height: null
+      upscale: false

package/test/data/insufficient_modules/config/sync/image.style.mc_575_aspect_165x266.yml

@@ -0,0 +1,26 @@
+uuid: ecf507cb-a68b-4ae6-8d13-e87ce4207f17
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_165x266
+  module:
+    - crop
+name: mc_575_aspect_165x266
+label: Manual Crop and Scale 575
+effects:
+  2dff9f5a-15fc-4163-8394-73cdbff3c553:
+    uuid: 2dff9f5a-15fc-4163-8394-73cdbff3c553
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_165x266
+      automatic_crop_provider: null
+  07e8f6a8-693c-4d62-b457-d6942290a631:
+    uuid: 07e8f6a8-693c-4d62-b457-d6942290a631
+    id: image_scale
+    weight: 2
+    data:
+      width: 575
+      height: null
+      upscale: false

package/test/data/insufficient_modules/config/sync/image.style.mc_660_aspect_635x424.yml

@@ -0,0 +1,26 @@
+uuid: 5ad64293-8f2d-464c-b399-fe757564bba7
+langcode: de
+status: true
+dependencies:
+  config:
+    - crop.type.aspect_635x424
+  module:
+    - crop
+name: mc_660_aspect_635x424
+label: Manual Crop and Scale 660
+effects:
+  e0ec792c-5016-42a3-b45b-da3be91c1e8b:
+    uuid: e0ec792c-5016-42a3-b45b-da3be91c1e8b
+    id: crop_crop
+    weight: 1
+    data:
+      crop_type: aspect_635x424
+      automatic_crop_provider: null
+  a6cb3395-75ba-4cde-be2a-246aa76db45d:
+    uuid: a6cb3395-75ba-4cde-be2a-246aa76db45d
+    id: image_scale
+    weight: 2
+    data:
+      width: 660
+      height: null
+      upscale: false

package/test/data/insufficient_modules/config/sync/image.style.sc_1150x920.yml

@@ -0,0 +1,17 @@
+uuid: d0c5b014-4002-4e45-bae8-18b5087e3c69
+langcode: de
+status: true
+dependencies:
+  module:
+    - focal_point
+name: sc_1150x920
+label: Scale and Crop 1150 x 920
+effects:
+  9b83e6ab-740a-4224-95ba-06365f2f109b:
+    uuid: 9b83e6ab-740a-4224-95ba-06365f2f109b
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 1150
+      height: 920
+      crop_type: focal_point

package/test/data/insufficient_modules/config/sync/image.style.sc_1320x871.yml

@@ -0,0 +1,17 @@
+uuid: e311003b-d51e-4df2-87e6-03e71b0d2f17
+langcode: de
+status: true
+dependencies:
+  module:
+    - focal_point
+name: sc_1320x871
+label: Scale and Crop 1320 x 871
+effects:
+  1dcbe0b1-d773-4b62-a1d0-a2bde29334e7:
+    uuid: 1dcbe0b1-d773-4b62-a1d0-a2bde29334e7
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 1320
+      height: 871
+      crop_type: focal_point

package/test/data/insufficient_modules/config/sync/image.style.sc_575x460.yml

@@ -0,0 +1,17 @@
+uuid: 5f841024-e41b-43c5-a089-86e438319de5
+langcode: de
+status: true
+dependencies:
+  module:
+    - focal_point
+name: sc_575x460
+label: Scale and Crop 575 x 460
+effects:
+  c951eb35-2112-4032-9367-a722e1ab2f03:
+    uuid: c951eb35-2112-4032-9367-a722e1ab2f03
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 575
+      height: 460
+      crop_type: focal_point

package/test/data/insufficient_modules/config/sync/image.style.sc_660x436.yml

@@ -0,0 +1,17 @@
+uuid: 60492e17-be04-4806-889f-041d1020a1d8
+langcode: de
+status: true
+dependencies:
+  module:
+    - focal_point
+name: sc_660x436
+label: Scale and Crop 660 x 436
+effects:
+  87885a34-47ca-44b4-aa89-ba63f0bca648:
+    uuid: 87885a34-47ca-44b4-aa89-ba63f0bca648
+    id: focal_point_scale_and_crop
+    weight: 1
+    data:
+      width: 660
+      height: 436
+      crop_type: focal_point

package/test/data/insufficient_modules/web/themes/no_crop/no_crop.breakpoints.yml

@@ -0,0 +1,25 @@
+default.xs: # mobile phones
+  label: XS
+  mediaQuery: '(max-width: 575px)'
+  weight: 0
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    frontpage_hero:
+      label: 'Frontage Hero'
+      manual_crop: true
+      aspectRatio: '165:266'
+      width: 575
+default.md: # large tablets
+  label: MD
+  mediaQuery: '(min-width: 576px) and (max-width: 991px)'
+  weight: 1
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    # assuming, that the breakpoint is at md
+    frontpage_hero:
+      width: 660
+      aspectRatio: '635:424'

package/test/data/insufficient_modules/web/themes/no_focal/no_focal.breakpoints.yml

@@ -0,0 +1,24 @@
+default.xs: # mobile phones
+  label: XS
+  mediaQuery: '(max-width: 575px)'
+  weight: 0
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    frontpage_hero:
+      label: 'Frontage Hero'
+      aspectRatio: 0.8
+      width: 575
+default.md: # large tablets
+  label: MD
+  mediaQuery: '(min-width: 576px) and (max-width: 991px)'
+  weight: 1
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    # assuming, that the breakpoint is at md
+    frontpage_hero:
+      width: 660
+      aspectRatio: 0.66

package/test/test.js

@@ -0,0 +1,88 @@
+const expect = require('chai').expect;
+const gen = require('../index');
+const fs = require("fs");
+
+describe('Running image generator tests', function () {
+
+    it('should check for the existence of the breakpoints.yml file', () => {
+        const themeName = 'no_breakpoints_yml';
+        const themePath = './test/data/insufficient_modules/web/themes/' + themeName;
+
+        try {
+            const res = gen({
+                themePath: themePath,
+                themeName: themeName,
+                syncFolder: './test/data/insufficient_modules/config/sync/'
+            })
+
+            // just in case no exception is thrown
+            expect(res).to.be.false;
+        } catch (e) {
+            expect(e.message).to.equal(`Your configured theme has no ${themePath}/${themeName}.breakpoints.yml theme breakpoints file. Please read the documentation and double check your options.`);
+        }
+    });
+
+    it('should test for the existence of the focal_point module', () => {
+        const themeName = 'no_focal';
+        const themePath = './test/data/insufficient_modules/web/themes/' + themeName;
+
+        try {
+            const res = gen({
+                themePath: themePath,
+                themeName: themeName,
+                syncFolder: './test/data/insufficient_modules/config/sync/'
+            })
+
+            // just in case no exception is thrown
+            expect(res).to.be.false;
+        } catch (e) {
+            expect(e.message).to.equal(`Your drupal installation is missing the focal_point module. Please enable it before generating the image styles.`);
+        }
+    });
+
+    it('should test for the existence of the crop module', () => {
+        const themeName = 'no_crop';
+        const themePath = './test/data/insufficient_modules/web/themes/' + themeName;
+
+        try {
+            const res = gen({
+                themePath: themePath,
+                themeName: themeName,
+                syncFolder: './test/data/insufficient_modules/config/sync/'
+            })
+
+            // just in case no exception is thrown
+            expect(res).to.be.false;
+        } catch (e) {
+            expect(e.message).to.equal(`Your drupal installation is missing the crop module. Please enable it before generating the image styles.`);
+        }
+    });
+
+    it('should generate the correct crop styles', () => {
+        const themeName = 'crop';
+        const themePath = './test/data/crop/web/themes/' + themeName;
+        const syncFolder = './test/data/crop/config/sync/';
+
+        const res = gen({
+            themePath: themePath,
+            themeName: themeName,
+            syncFolder: syncFolder
+        })
+
+
+        expect(res).to.be.true;
+        expect(fs.readdirSync(syncFolder)).deep.equal([
+            'core.extension.yml',
+            'crop.type.aspect_165x266.yml',
+            'crop.type.aspect_635x424.yml',
+            'image.style.mc_1150_aspect_165x266.yml',
+            'image.style.mc_1320_aspect_165x266.yml',
+            'image.style.mc_290_aspect_635x424.yml',
+            'image.style.mc_575_aspect_165x266.yml',
+            'image.style.mc_580_aspect_635x424.yml',
+            'image.style.mc_660_aspect_165x266.yml',
+            'responsive_image.styles.frontpage_hero.yml'
+        ]);
+    });
+
+});