drupal-image-style-generator 0.1.3 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +30 -0
  2. package/index.js +60 -27
  3. package/package.json +1 -1
  4. package/src/helpers.js +14 -0
package/README.md CHANGED
@@ -22,3 +22,33 @@ col_8:
22
22
  width: 545
23
23
  ```
24
24
 
25
+ ## Usage
26
+
27
+ Can be used in your script (grunt or gulp):
28
+
29
+ ```js
30
+ const gen = require('drupal-image-style-generator');
31
+ const themeName = 'myTheme';
32
+ const themePath = './web/themes/custom/' + themeName;
33
+
34
+ gen({
35
+ themePath: themePath,
36
+ themeName: themeName,
37
+ syncFolder: './config/sync',
38
+ gridSize: 100,
39
+ });
40
+ ```
41
+
42
+
43
+ ## Options
44
+
45
+ **themePath**: Relative path to the theme - needs to contain the `theme.breakpoints.yml`
46
+
47
+ **themeName**: the name of the theme
48
+
49
+ **syncFolder**: Relative path to the sync folder
50
+
51
+ **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.
52
+
53
+ **convertTo**: (Default: null) enables the image_convert style - allowed values are `png`, `jpg`, `jpeg`, `jpe`, `gif`, `webp`
54
+
package/index.js CHANGED
@@ -1,7 +1,12 @@
1
- const REQUIRED_OPTIONS = ['themePath', 'themeName', 'syncFolder']
1
+ const REQUIRED_OPTIONS = ['themePath', 'themeName', 'syncFolder'];
2
+ const helpers = require('./src/helpers');
3
+ const fs = require("fs");
4
+ const yaml = require("js-yaml");
5
+ const log = require("fancy-log");
6
+ const {v4} = require("uuid");
2
7
 
3
8
  /**
4
- * @param {{themePath: string, themeName: string, syncFolder: string, gridSize?: number}} options
9
+ * @param {{themePath: string, themeName: string, syncFolder: string, gridSize?: number, convertTo?: string}} options
5
10
  */
6
11
  module.exports = function (options) {
7
12
 
@@ -11,6 +16,7 @@ module.exports = function (options) {
11
16
  }
12
17
  })
13
18
 
19
+ const convertTo = options.convertTo
14
20
  const themePath = options.themePath;
15
21
  const themeName = options.themeName;
16
22
  const syncFolder = options.syncFolder;
@@ -85,6 +91,8 @@ module.exports = function (options) {
85
91
  let concreteStyleId;
86
92
  let styleFileName;
87
93
  let styleFilePath;
94
+ let styleYml;
95
+ let hasChanges = false;
88
96
 
89
97
  if (aspectRatio) {
90
98
  styleHeight = imageStyles[styleId].height ? imageStyles[styleId].height * multiplyNum : Math.round(styleWidth * aspectRatio);
@@ -97,7 +105,7 @@ module.exports = function (options) {
97
105
 
98
106
  usedStyleConfigs[styleFileName] = true;
99
107
 
100
- const styleYml = fs.existsSync(styleFilePath) ?
108
+ styleYml = fs.existsSync(styleFilePath) ?
101
109
  yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
102
110
  {
103
111
  uuid: uniqueId,
@@ -112,14 +120,29 @@ module.exports = function (options) {
112
120
  }
113
121
  ;
114
122
 
115
- const hasChanges = Object.values(styleYml.effects).length === 0 || Object.values(styleYml.effects).some((effectConf) => {
116
- return (effectConf.data.width !== styleWidth || effectConf.data.height !== styleHeight); // the width has changed
117
- });
123
+ const scaleEffect = helpers.getEffectByTypeId('focal_point_scale_and_crop', styleYml.effects);
124
+ const convertEffect = helpers.getEffectByTypeId('image_convert', styleYml.effects);
118
125
 
119
- if (hasChanges) {
120
- const effectId = v4();
126
+ const hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth || scaleEffect.data.height !== styleHeight ||
127
+ (convertTo && (!convertEffect || (convertEffect && convertEffect.data.extension !== convertTo))) || (!convertTo && convertEffect)
128
+ ;
121
129
 
130
+ if (hasChanges) {
122
131
  styleYml.effects = {};
132
+
133
+ if (convertTo) {
134
+ const convertEffectId = v4();
135
+ styleYml.effects[convertEffectId] = {
136
+ uuid: convertEffectId,
137
+ id: 'image_convert',
138
+ weight: -1,
139
+ data: {
140
+ extension: convertTo
141
+ }
142
+ }
143
+ }
144
+
145
+ const effectId = v4();
123
146
  styleYml.effects[effectId] = {
124
147
  uuid: effectId,
125
148
  id: 'focal_point_scale_and_crop',
@@ -130,14 +153,7 @@ module.exports = function (options) {
130
153
  crop_type: 'focal_point'
131
154
  }
132
155
  };
133
-
134
- // write the file
135
- fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
136
- log('Created ' + styleFilePath);
137
- } else {
138
- log('skipping ' + styleFileName + ' - it already exists and there are no changes.');
139
156
  }
140
-
141
157
  } else {
142
158
 
143
159
  // generate the filename
@@ -148,7 +164,7 @@ module.exports = function (options) {
148
164
 
149
165
  usedStyleConfigs[styleFileName] = true;
150
166
 
151
- const styleYml = fs.existsSync(styleFilePath) ?
167
+ styleYml = fs.existsSync(styleFilePath) ?
152
168
  yaml.load(fs.readFileSync(styleFilePath, 'utf8')) :
153
169
  {
154
170
  uuid: uniqueId,
@@ -161,14 +177,29 @@ module.exports = function (options) {
161
177
  }
162
178
  ;
163
179
 
164
- const hasChanges = Object.values(styleYml.effects).length === 0 || Object.values(styleYml.effects).some((effectConf) => {
165
- return effectConf.data.width !== styleWidth; // the width has changed
166
- });
180
+ const scaleEffect = helpers.getEffectByTypeId('image_scale', styleYml.effects);
181
+ const convertEffect = helpers.getEffectByTypeId('image_convert', styleYml.effects);
167
182
 
168
- if (hasChanges) {
169
- const effectId = v4();
183
+ const hasChanges = !scaleEffect || scaleEffect.data.width !== styleWidth ||
184
+ (convertTo && (!convertEffect || (convertEffect && convertEffect.data.extension !== convertTo))) || (!convertTo && convertEffect)
185
+ ;
170
186
 
187
+ if (hasChanges) {
171
188
  styleYml.effects = {};
189
+
190
+ if (convertTo) {
191
+ const convertEffectId = v4();
192
+ styleYml.effects[convertEffectId] = {
193
+ uuid: convertEffectId,
194
+ id: 'image_convert',
195
+ weight: -1,
196
+ data: {
197
+ extension: convertTo
198
+ }
199
+ }
200
+ }
201
+
202
+ const effectId = v4();
172
203
  styleYml.effects[effectId] = {
173
204
  uuid: effectId,
174
205
  id: 'image_scale',
@@ -179,16 +210,18 @@ module.exports = function (options) {
179
210
  upscale: false
180
211
  }
181
212
  };
182
-
183
- // write the file
184
- fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
185
- log('Created ' + styleFilePath);
186
- } else {
187
- log('skipping ' + styleFileName + ' - it already exists and there are no changes.');
188
213
  }
189
214
 
190
215
  }
191
216
 
217
+ if (hasChanges) {
218
+ // write the file
219
+ fs.writeFileSync(styleFilePath, yaml.dump(styleYml));
220
+ log('Created ' + styleFilePath);
221
+ } else {
222
+ log('skipping ' + styleFileName + ' - it already exists and there are no changes.');
223
+ }
224
+
192
225
  imageStyles[styleId].image_style_mappings.push({
193
226
  breakpoint_id: bpName,
194
227
  multiplier: multiplier,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "drupal-image-style-generator",
3
- "version": "0.1.3",
3
+ "version": "0.2.0",
4
4
  "description": "A helper tool to automatically geenrate drupal 8+ responsive image styles",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/src/helpers.js ADDED
@@ -0,0 +1,14 @@
1
+ module.exports = {
2
+
3
+ /**
4
+ *
5
+ * @param {string} effectTypeId
6
+ * @param {Record<string, {uuid: string, id: string, weight: number, data: {}}>} [effects]
7
+ */
8
+ getEffectByTypeId: function (effectTypeId, effects) {
9
+ return effects ? Object.values(effects).find((effect) => {
10
+ return effect.id === effectTypeId
11
+ }) : null;
12
+ }
13
+
14
+ }