drupal-image-style-generator 1.0.4 → 1.0.6

package/.idea/misc.xml

@@ -1,6 +1,12 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
+  <component name="IntellijSFCCConnectionSettings">
+    <option name="sourceScanned" value="true" />
+  </component>
   <component name="IntellijSFCCDeploymentSettings">
-    <option name="json" value="{&#10;  &quot;isFullCodeVersionCleanup&quot;: false,&#10;  &quot;tasks&quot;: [],&#10;  &quot;isWebDavActionAllowed&quot;: true&#10;}" />
+    <option name="json" value="{&#10;  &quot;isFullCodeVersionCleanup&quot;: false,&#10;  &quot;tasks&quot;: [],&#10;  &quot;multiInstancePair&quot;: []&#10;}" />
+  </component>
+  <component name="IntellijSFCCFileSystemListener">
+    <option name="loaded" value="true" />
   </component>
 </project>

package/README.md

@@ -50,5 +50,7 @@ gen({
 
 **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` 
+**convertTo**: (Default: null) enables the image_convert style - allowed values are `png`,  `jpg`, `jpeg`, `jpe`, `gif`, `webp`
+
+**clearCropTypes**: (Default: null) If set to true, unused `crop.type.aspect_*.yml` files will be removed. This can cause a lot of trouble and require you to remove all existing crop definition entities. Should not be done in a live site.  
 

package/index.js

@@ -1,6 +1,8 @@
 const REQUIRED_OPTIONS = ['themePath', 'themeName', 'syncFolder'];
 const helpers = require('./src/helpers');
 const path = require("path");
+const yaml = require("js-yaml");
+const {v4} = require("uuid");
 
 /**
  * @param {{themePath: string, themeName: string, syncFolder: string, gridSize?: number, convertTo?: string, clearCropTypes?: boolean}} options
@@ -64,6 +66,7 @@ module.exports = function (options) {
                     imageStyles[styleId].image_style_mappings = [];
 
                     imageStyles[styleId].widths = {};
+                    imageStyles[styleId].heights = {};
                     imageStyles[styleId].cropTypes = {};
                 }
 
@@ -78,14 +81,24 @@ module.exports = function (options) {
                     }
                 }
 
-                let width = bp.imageStyles[styleId].width || parsedWidth;
+                let height = bp.imageStyles[styleId].height || imageStyles[styleId].height; // if height is set once, this is set
 
-                // adjust the width to the grid, so we save a couple of image styles
-                width = Math.ceil(width / IMAGE_STYLE_GRID_SIZE) * IMAGE_STYLE_GRID_SIZE;
+                if (height) {
+                    // set the new height
+                    imageStyles[styleId].height = height;
+                    imageStyles[styleId].heights[bpName] = height;
+                }
+
+                if (!height || bp.imageStyles[styleId].width) {
+                    let width = bp.imageStyles[styleId].width || parsedWidth;
 
-                // set the new width
-                imageStyles[styleId].width = width;
-                imageStyles[styleId].widths[bpName] = imageStyles[styleId].width;
+                    // adjust the width to the grid, so we save a couple of image styles
+                    width = Math.ceil(width / IMAGE_STYLE_GRID_SIZE) * IMAGE_STYLE_GRID_SIZE;
+
+                    // 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');
@@ -258,6 +271,62 @@ module.exports = function (options) {
                             }
                         };
                     }
+                } else if (imageStyles[styleId].height) {
+                    // this is a height style
+                    const styleHeight = imageStyles[styleId].heights[bpName] * multiplyNum;
+                    styleLabel = `Scale Height ${styleHeight}`;
+                    concreteStyleId = `sh_${styleHeight}`;
+                    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: {},
+                            name: concreteStyleId,
+                            label: styleLabel,
+                            effects: {}
+                        }
+                    ;
+
+                    const scaleEffect = helpers.getEffectByTypeId('image_scale', styleYml.effects);
+                    const convertEffect = helpers.getEffectByTypeId('image_convert', styleYml.effects);
+
+                    hasChanges = !scaleEffect || 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: 'image_scale',
+                            weight: 1,
+                            data: {
+                                width: null,
+                                height: styleHeight,
+                                upscale: false
+                            }
+                        };
+                    }
+
                 } else {
 
                     // generate the filename

package/package.json

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

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

@@ -0,0 +1,15 @@
+uuid: 0727fb6a-8037-41bc-b503-52ffab0af788
+langcode: de
+status: true
+dependencies: {}
+name: sh_108
+label: Scale Height 108
+effects:
+  db36ed3a-be4e-43fe-b87d-dbe3650489d7:
+    uuid: db36ed3a-be4e-43fe-b87d-dbe3650489d7
+    id: image_scale
+    weight: 1
+    data:
+      width: null
+      height: 108
+      upscale: false

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

@@ -0,0 +1,15 @@
+uuid: 0fdf495a-4ab9-4e0e-bb5f-e7ebccf97a6e
+langcode: de
+status: true
+dependencies: {}
+name: sh_176
+label: Scale Height 176
+effects:
+  a6c03b5d-c1f9-4a01-9e62-b54d598aaa36:
+    uuid: a6c03b5d-c1f9-4a01-9e62-b54d598aaa36
+    id: image_scale
+    weight: 1
+    data:
+      width: null
+      height: 176
+      upscale: false

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

@@ -0,0 +1,15 @@
+uuid: 284b7900-d250-49e6-aedf-56d2e915877a
+langcode: de
+status: true
+dependencies: {}
+name: sh_216
+label: Scale Height 216
+effects:
+  b2ba04fe-b48e-458e-9c00-014a5dfa3195:
+    uuid: b2ba04fe-b48e-458e-9c00-014a5dfa3195
+    id: image_scale
+    weight: 1
+    data:
+      width: null
+      height: 216
+      upscale: false

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

@@ -0,0 +1,15 @@
+uuid: 111d834b-a445-44f5-b90a-ec14c2474089
+langcode: de
+status: true
+dependencies: {}
+name: sh_38
+label: Scale Height 38
+effects:
+  778dae1b-d341-45bd-8132-d34567713839:
+    uuid: 778dae1b-d341-45bd-8132-d34567713839
+    id: image_scale
+    weight: 1
+    data:
+      width: null
+      height: 38
+      upscale: false

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

@@ -0,0 +1,15 @@
+uuid: 605ecee1-e0d1-49c9-9212-05ae5f69e42b
+langcode: de
+status: true
+dependencies: {}
+name: sh_76
+label: Scale Height 76
+effects:
+  1c63103f-ba73-44c6-841b-b948f7630d90:
+    uuid: 1c63103f-ba73-44c6-841b-b948f7630d90
+    id: image_scale
+    weight: 1
+    data:
+      width: null
+      height: 76
+      upscale: false

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

@@ -0,0 +1,15 @@
+uuid: 2d2a2c04-b28b-4a35-a500-150815f3d280
+langcode: de
+status: true
+dependencies: {}
+name: sh_88
+label: Scale Height 88
+effects:
+  91e17ce1-80b6-44db-8faf-5843921dc975:
+    uuid: 91e17ce1-80b6-44db-8faf-5843921dc975
+    id: image_scale
+    weight: 1
+    data:
+      width: null
+      height: 88
+      upscale: false

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

@@ -0,0 +1,42 @@
+uuid: 82f42ee2-56b7-43a9-8e80-a8d8d0d2fe0c
+langcode: de
+status: true
+dependencies:
+  config:
+    - image.style.sh_38
+    - image.style.sh_76
+    - image.style.sh_88
+    - image.style.sh_176
+    - image.style.sh_108
+    - image.style.sh_216
+  theme:
+    - height
+id: height_hero
+label: Height Hero
+image_style_mappings:
+  - breakpoint_id: default.xs
+    multiplier: 1x
+    image_mapping_type: image_style
+    image_mapping: sh_38
+  - breakpoint_id: default.xs
+    multiplier: 2x
+    image_mapping_type: image_style
+    image_mapping: sh_76
+  - breakpoint_id: default.md
+    multiplier: 1x
+    image_mapping_type: image_style
+    image_mapping: sh_88
+  - breakpoint_id: default.md
+    multiplier: 2x
+    image_mapping_type: image_style
+    image_mapping: sh_176
+  - breakpoint_id: default.lg
+    multiplier: 1x
+    image_mapping_type: image_style
+    image_mapping: sh_108
+  - breakpoint_id: default.lg
+    multiplier: 2x
+    image_mapping_type: image_style
+    image_mapping: sh_216
+breakpoint_group: height
+fallback_image_style: sh_38

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

@@ -0,0 +1,32 @@
+default.xs: # mobile phones
+  label: XS
+  mediaQuery: '(max-width: 575px)'
+  weight: 0
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    height_hero:
+      label: 'Height Hero'
+      height: 38
+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
+    height_hero:
+      height: 88
+default.lg: # desktop
+  label: LG
+  mediaQuery: '(min-width: 992px) and (max-width: 1199px)'
+  weight: 3
+  multipliers:
+    - 1x
+    - 2x
+  imageStyles:
+    height_hero:
+      height: 108

package/test/test.js

@@ -71,8 +71,11 @@ describe('Running image generator tests', function () {
         })
 
 
+        console.log(fs.readdirSync(syncFolder));
+
+
         expect(res).to.be.true;
-        expect(fs.readdirSync(syncFolder)).deep.equal([
+        expect(fs.readdirSync(syncFolder)).to.include.members([
             'core.extension.yml',
             'crop.type.aspect_165x266.yml',
             'crop.type.aspect_635x424.yml',
@@ -90,4 +93,37 @@ describe('Running image generator tests', function () {
         expect(cropYml.aspect_ratio).to.equal('165:266');
     });
 
+    it('should generate the correct height only styles', () => {
+        const themeName = 'height';
+        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)).to.include.members([
+            'core.extension.yml',
+            'image.style.sh_38.yml',
+            'image.style.sh_76.yml',
+            'image.style.sh_88.yml',
+            'image.style.sh_108.yml',
+            'image.style.sh_176.yml',
+            'image.style.sh_216.yml',
+            'responsive_image.styles.height_hero.yml'
+        ]);
+
+        const scaleYml = yaml.load(fs.readFileSync(syncFolder + 'image.style.sh_108.yml', 'utf8'));
+        expect(scaleYml).to.be.an('object');
+
+        const effect = Object.values(scaleYml.effects)[0];
+
+        expect(effect['id']).to.equal('image_scale');
+        expect(effect.data.height).to.equal(108);
+    });
+
 });

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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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