Total Complexity | 59 |
Total Lines | 622 |
Duplicated Lines | 0 % |
Changes | 7 | ||
Bugs | 0 | Features | 0 |
Complex classes like OptimizedImage often do a lot of different things. To break such a class down, we need to identify a cohesive component within that class. A common approach to find such a component is to look for fields/methods that share the same prefixes, or suffixes.
Once you have determined the fields that belong together, you can apply the Extract Class refactoring. If the component makes sense as a sub-class, Extract Subclass is also a candidate, and is often faster.
While breaking up the class, it is a good idea to analyze how other classes use OptimizedImage, and based on these observations, apply Extract Interface, too.
1 | <?php |
||
27 | class OptimizedImage extends Model |
||
28 | { |
||
29 | // Public Properties |
||
30 | // ========================================================================= |
||
31 | |||
32 | /** |
||
33 | * @var string[] An array of optimized image variant URLs |
||
34 | */ |
||
35 | public $optimizedImageUrls = []; |
||
36 | |||
37 | /** |
||
38 | * @var string[] An array of optimized .webp image variant URLs |
||
39 | */ |
||
40 | public $optimizedWebPImageUrls = []; |
||
41 | |||
42 | /** |
||
43 | * @var int[] An array of the widths of the optimized image variants |
||
44 | */ |
||
45 | public $variantSourceWidths = []; |
||
46 | |||
47 | /** |
||
48 | * @var int[] An array of the heights of the optimized image variants |
||
49 | */ |
||
50 | public $variantHeights = []; |
||
51 | |||
52 | /** |
||
53 | * @var float[] An array of the x,y image focal point coords, ranging from 0.0 to 1.0 |
||
54 | */ |
||
55 | public $focalPoint; |
||
56 | |||
57 | /** |
||
58 | * @var int The width of the original source image |
||
59 | */ |
||
60 | public $originalImageWidth; |
||
61 | |||
62 | /** |
||
63 | * @var int The height of the original source image |
||
64 | */ |
||
65 | public $originalImageHeight; |
||
66 | |||
67 | /** |
||
68 | * @var string The base64 encoded placeholder LQIP image |
||
69 | */ |
||
70 | public $placeholder = ''; |
||
71 | |||
72 | /** |
||
73 | * @var string The base64 encoded placeholder LQIP SVG image |
||
74 | */ |
||
75 | public $placeholderSvg = ''; |
||
76 | |||
77 | /** |
||
78 | * @var string[] An array the 5 most dominant colors in the image |
||
79 | */ |
||
80 | public $colorPalette = []; |
||
81 | |||
82 | /** |
||
83 | * @var int The overall lightness of the image, from 0..100 |
||
84 | */ |
||
85 | public $lightness; |
||
86 | |||
87 | /** |
||
88 | * @var int The width of the placeholder image |
||
89 | */ |
||
90 | public $placeholderWidth; |
||
91 | |||
92 | /** |
||
93 | * @var int The height of the placeholder image |
||
94 | */ |
||
95 | public $placeholderHeight; |
||
96 | |||
97 | /** |
||
98 | * @var string[] An array of errors logged when generating the image transforms |
||
99 | */ |
||
100 | public $stickyErrors = []; |
||
101 | |||
102 | // Public Methods |
||
103 | // ========================================================================= |
||
104 | |||
105 | /** |
||
106 | * @inheritdoc |
||
107 | */ |
||
108 | public function rules(): array |
||
109 | { |
||
110 | return [ |
||
111 | ['optimizedImageUrls', ArrayValidator::class], |
||
112 | ['optimizedWebPImageUrls', ArrayValidator::class], |
||
113 | ['variantSourceWidths', ArrayValidator::class], |
||
114 | ['variantHeights', ArrayValidator::class], |
||
115 | ['focalPoint', 'safe'], |
||
116 | ['originalImageWidth', 'integer'], |
||
117 | ['originalImageHeight', 'integer'], |
||
118 | ['placeholder', 'string'], |
||
119 | ['placeholderSvg', 'string'], |
||
120 | ['colorPalette', ArrayValidator::class], |
||
121 | ['placeholderWidth', 'integer'], |
||
122 | ['placeholderHeight', 'integer'], |
||
123 | ['stickyErrors', ArrayValidator::class], |
||
124 | ]; |
||
125 | } |
||
126 | |||
127 | /** |
||
128 | * Return the first image variant URL or the specific one passed in via |
||
129 | * $width |
||
130 | * |
||
131 | * @param int $width |
||
132 | * |
||
133 | * @return \Twig\Markup|null |
||
134 | */ |
||
135 | public function src(int $width = 0): string |
||
136 | { |
||
137 | if (empty($width)) { |
||
138 | return Template::raw(reset($this->optimizedImageUrls)); |
||
139 | } |
||
140 | |||
141 | return Template::raw($this->optimizedImageUrls[$width] ?? ''); |
||
142 | } |
||
143 | |||
144 | /** |
||
145 | * Getter for CraftQL |
||
146 | * |
||
147 | * @param int $width |
||
148 | * |
||
149 | * @return null|string|\Twig\Markup |
||
150 | */ |
||
151 | public function getSrc(int $width = 0): string |
||
152 | { |
||
153 | return $this->src($width); |
||
154 | } |
||
155 | |||
156 | /** |
||
157 | * Return a string of image URLs and their sizes |
||
158 | * |
||
159 | * @param bool $dpr Whether to generate 1x, 2x srcsets vs the normal XXXw |
||
160 | * srcsets |
||
161 | * |
||
162 | * @return \Twig\Markup|null |
||
163 | */ |
||
164 | public function srcset(bool $dpr = false): string |
||
165 | { |
||
166 | return Template::raw($this->getSrcsetFromArray($this->optimizedImageUrls, $dpr)); |
||
167 | } |
||
168 | |||
169 | /** |
||
170 | * Getter for CraftQL |
||
171 | * |
||
172 | * @param bool $dpr |
||
173 | * |
||
174 | * @return string |
||
175 | */ |
||
176 | public function getSrcset(bool $dpr = false): string |
||
177 | { |
||
178 | return $this->srcset($dpr); |
||
179 | } |
||
180 | /** |
||
181 | * Return a string of image URLs and their sizes that match $width |
||
182 | * |
||
183 | * @param int $width |
||
184 | * @param bool $dpr Whether to generate 1x, 2x srcsets vs the normal XXXw |
||
185 | * srcsets |
||
186 | * |
||
187 | * @return \Twig\Markup|null |
||
188 | */ |
||
189 | public function srcsetWidth(int $width, bool $dpr = false): string |
||
190 | { |
||
191 | $subset = $this->getSrcsetSubsetArray($this->optimizedImageUrls, $width, 'width'); |
||
192 | |||
193 | return Template::raw($this->getSrcsetFromArray($subset, $dpr)); |
||
194 | } |
||
195 | |||
196 | /** |
||
197 | * Return a string of image URLs and their sizes that are at least $width |
||
198 | * or larger |
||
199 | * |
||
200 | * @param int $width |
||
201 | * @param bool $dpr Whether to generate 1x, 2x srcsets vs the normal XXXw |
||
202 | * srcsets |
||
203 | * |
||
204 | * @return \Twig\Markup|null |
||
205 | */ |
||
206 | public function srcsetMinWidth(int $width, bool $dpr = false): string |
||
207 | { |
||
208 | $subset = $this->getSrcsetSubsetArray($this->optimizedImageUrls, $width, 'minwidth'); |
||
209 | |||
210 | return Template::raw($this->getSrcsetFromArray($subset, $dpr)); |
||
211 | } |
||
212 | |||
213 | /** |
||
214 | * Return a string of image URLs and their sizes that are $width or smaller |
||
215 | * |
||
216 | * @param int $width |
||
217 | * @param bool $dpr Whether to generate 1x, 2x srcsets vs the normal XXXw |
||
218 | * srcsets |
||
219 | * |
||
220 | * @return \Twig\Markup|null |
||
221 | */ |
||
222 | public function srcsetMaxWidth(int $width, bool $dpr = false): string |
||
223 | { |
||
224 | $subset = $this->getSrcsetSubsetArray($this->optimizedImageUrls, $width, 'maxwidth'); |
||
225 | |||
226 | return Template::raw($this->getSrcsetFromArray($subset, $dpr)); |
||
227 | } |
||
228 | |||
229 | /** |
||
230 | * Return the first webp image variant URL or the specific one passed in |
||
231 | * via $width |
||
232 | * |
||
233 | * @param int $width |
||
234 | * |
||
235 | * @return \Twig\Markup|null |
||
236 | */ |
||
237 | public function srcWebp(int $width = 0): string |
||
238 | { |
||
239 | if (empty($width)) { |
||
240 | return Template::raw(reset($this->optimizedWebPImageUrls)); |
||
241 | } |
||
242 | |||
243 | return Template::raw($this->optimizedWebPImageUrls[$width] ?? ''); |
||
244 | } |
||
245 | |||
246 | /** |
||
247 | * Getter for CraftQL |
||
248 | * |
||
249 | * @param int $width |
||
250 | * |
||
251 | * @return string |
||
252 | */ |
||
253 | public function getSrcWebp(int $width = 0): string |
||
254 | { |
||
255 | return $this->srcWebp($width); |
||
256 | } |
||
257 | |||
258 | /** |
||
259 | * Return a string of webp image URLs and their sizes |
||
260 | * |
||
261 | * @param bool $dpr Whether to generate 1x, 2x srcsets vs the normal XXXw |
||
262 | * srcsets |
||
263 | * |
||
264 | * @return \Twig\Markup|null |
||
265 | */ |
||
266 | public function srcsetWebp(bool $dpr = false): string |
||
267 | { |
||
268 | return Template::raw($this->getSrcsetFromArray($this->optimizedWebPImageUrls, $dpr)); |
||
269 | } |
||
270 | |||
271 | /** |
||
272 | * Getter for CraftQL |
||
273 | * |
||
274 | * @param bool $dpr |
||
275 | * |
||
276 | * @return string |
||
277 | */ |
||
278 | public function getSrcsetWebp(bool $dpr = false): string |
||
279 | { |
||
280 | return $this->srcsetWebp($dpr); |
||
281 | } |
||
282 | |||
283 | /** |
||
284 | * Return a string of webp image URLs and their sizes that match $width |
||
285 | * |
||
286 | * @param int $width |
||
287 | * @param bool $dpr Whether to generate 1x, 2x srcsets vs the normal XXXw |
||
288 | * srcsets |
||
289 | * |
||
290 | * @return \Twig\Markup|null |
||
291 | */ |
||
292 | public function srcsetWidthWebp(int $width, bool $dpr = false): string |
||
293 | { |
||
294 | $subset = $this->getSrcsetSubsetArray($this->optimizedWebPImageUrls, $width, 'width'); |
||
295 | |||
296 | return Template::raw($this->getSrcsetFromArray($subset, $dpr)); |
||
297 | } |
||
298 | |||
299 | /** |
||
300 | * Return a string of webp image URLs and their sizes that are at least |
||
301 | * $width or larger |
||
302 | * |
||
303 | * @param int $width |
||
304 | * @param bool $dpr Whether to generate 1x, 2x srcsets vs the normal XXXw |
||
305 | * srcsets |
||
306 | * |
||
307 | * @return \Twig\Markup|null |
||
308 | */ |
||
309 | public function srcsetMinWidthWebp(int $width, bool $dpr = false): string |
||
310 | { |
||
311 | $subset = $this->getSrcsetSubsetArray($this->optimizedWebPImageUrls, $width, 'minwidth'); |
||
312 | |||
313 | return Template::raw($this->getSrcsetFromArray($subset, $dpr)); |
||
314 | } |
||
315 | |||
316 | /** |
||
317 | * Return a string of webp image URLs and their sizes that are $width or |
||
318 | * smaller |
||
319 | * |
||
320 | * @param int $width |
||
321 | * @param bool $dpr Whether to generate 1x, 2x srcsets vs the normal XXXw |
||
322 | * srcsets |
||
323 | * |
||
324 | * @return \Twig\Markup|null |
||
325 | */ |
||
326 | public function srcsetMaxWidthWebp(int $width, bool $dpr = false): string |
||
327 | { |
||
328 | $subset = $this->getSrcsetSubsetArray($this->optimizedWebPImageUrls, $width, 'maxwidth'); |
||
329 | |||
330 | return Template::raw($this->getSrcsetFromArray($subset, $dpr)); |
||
331 | } |
||
332 | |||
333 | /** |
||
334 | * Work around issues with `<img srcset>` returning sizes larger than are |
||
335 | * available as per: |
||
336 | * https://medium.com/@MRWwebDesign/responsive-images-the-sizes-attribute-and-unexpected-image-sizes-882a2eadb6db |
||
337 | * |
||
338 | * @return int |
||
339 | */ |
||
340 | public function maxSrcsetWidth(): int |
||
341 | { |
||
342 | $result = 0; |
||
343 | if (!empty($this->optimizedImageUrls)) { |
||
344 | $tempArray = $this->optimizedImageUrls; |
||
345 | ksort($tempArray, SORT_NUMERIC); |
||
346 | |||
347 | $keys = array_keys($tempArray); |
||
348 | $result = end($keys); |
||
349 | } |
||
350 | |||
351 | return $result; |
||
352 | } |
||
353 | |||
354 | /** |
||
355 | * Getter for CraftQL |
||
356 | * |
||
357 | * @return int |
||
358 | */ |
||
359 | public function getMaxSrcsetWidth(): int |
||
360 | { |
||
361 | return $this->maxSrcsetWidth(); |
||
362 | } |
||
363 | |||
364 | /** |
||
365 | * Return the colors as an array of RGB colors |
||
366 | */ |
||
367 | public function colorPaletteRgb(): array |
||
368 | { |
||
369 | $colors = []; |
||
370 | |||
371 | foreach ($this->colorPalette as $color) { |
||
372 | if (!empty($color)) { |
||
373 | $colors[] = ColorHelper::HTMLToRGB($color); |
||
374 | } |
||
375 | } |
||
376 | |||
377 | return $colors; |
||
378 | } |
||
379 | |||
380 | /** |
||
381 | * Generate a complete <img> tag for this OptimizedImages model |
||
382 | * |
||
383 | * @param false|string $lazyLoad |
||
384 | * @param array $options |
||
385 | * @return \Twig\Markup |
||
386 | */ |
||
387 | public function imgTag($lazyLoad = false, $options = [], ) |
||
388 | { |
||
389 | // Merge the passed in options with the tag attributes |
||
390 | $attrs = array_merge([ |
||
391 | 'class' => '', |
||
392 | 'src' => $this->src(), |
||
393 | 'srcset' => $this->srcset(), |
||
394 | 'sizes' => '100vw', |
||
395 | ], |
||
396 | $options |
||
397 | ); |
||
398 | // Handle lazy loading |
||
399 | if ($lazyLoad) { |
||
400 | $attrs['class'] += ' lazyload'; |
||
401 | $attrs['loading'] = 'lazy'; |
||
402 | $attrs['data-src'] = $attrs['src']; |
||
403 | $attrs['data-srcset'] = $attrs['srcset']; |
||
404 | $attrs['srcset'] = ''; |
||
405 | if (is_string($lazyLoad)) { |
||
406 | $lazyLoad = strtolower($lazyLoad); |
||
407 | } |
||
408 | switch ($lazyLoad) { |
||
409 | case 'image': |
||
410 | $attrs['src'] = $this->getPlaceholderImage(); |
||
411 | break; |
||
412 | case 'silhouette': |
||
413 | $attrs['src'] = $this->getPlaceholderSilhouette(); |
||
414 | break; |
||
415 | case 'color': |
||
416 | $attrs['src'] = $this->getPlaceholderBox($this->colorPalette[0] ?? null); |
||
417 | break; |
||
418 | default: |
||
419 | $attrs['src'] = $this->getPlaceholderBox(); |
||
420 | break; |
||
421 | } |
||
422 | } |
||
423 | // Remove any empty attributes |
||
424 | $attrs = array_filter($attrs); |
||
425 | // Render the tag |
||
426 | $tag = Html::tag('img', '', $attrs); |
||
427 | |||
428 | return Template::raw($tag); |
||
429 | } |
||
430 | |||
431 | /** |
||
432 | * Return a base64-encoded placeholder image |
||
433 | * |
||
434 | * @return \Twig\Markup|null |
||
435 | */ |
||
436 | public function placeholderImage() |
||
437 | { |
||
438 | $header = 'data:image/jpeg;base64,'; |
||
439 | if (!empty($this->placeholder)) { |
||
440 | $content = $this->placeholder; |
||
441 | } else { |
||
442 | // At least return something |
||
443 | return $this->defaultPlaceholderImage(); |
||
444 | } |
||
445 | |||
446 | return Template::raw($header.rawurlencode($content)); |
||
447 | } |
||
448 | |||
449 | /** |
||
450 | * Getter for CraftQL |
||
451 | * |
||
452 | * @return string |
||
453 | */ |
||
454 | public function getPlaceholderImage(): string |
||
455 | { |
||
456 | return (string)$this->placeholderImage(); |
||
457 | } |
||
458 | |||
459 | /** |
||
460 | * @return string |
||
461 | */ |
||
462 | public function placeholderImageSize(): string |
||
463 | { |
||
464 | $placeholder = $this->placeholderImage(); |
||
465 | $contentLength = !empty(\strlen($placeholder)) ? \strlen($placeholder) : 0; |
||
466 | |||
467 | return ImageOptimize::$plugin->optimize->humanFileSize($contentLength, 1); |
||
468 | } |
||
469 | |||
470 | /** |
||
471 | * Return an SVG box as a placeholder image |
||
472 | * |
||
473 | * @param string|null $color |
||
474 | * |
||
475 | * @return \Twig\Markup|null |
||
476 | */ |
||
477 | public function placeholderBox(string $color = null) |
||
478 | { |
||
479 | $width = $this->placeholderWidth ?? 1; |
||
480 | $height = $this->placeholderHeight ?? 1; |
||
481 | $color = $color ?? $this->colorPalette[0] ?? '#CCC'; |
||
482 | |||
483 | return Template::raw(ImageOptimize::$plugin->placeholder->generatePlaceholderBox($width, $height, $color)); |
||
484 | } |
||
485 | |||
486 | /** |
||
487 | * @param string|null $color |
||
488 | * |
||
489 | * @return string |
||
490 | */ |
||
491 | public function getPlaceholderBox(string $color = null): string |
||
492 | { |
||
493 | return (string)$this->placeholderBox($color); |
||
494 | } |
||
495 | |||
496 | /** |
||
497 | * Getter for CraftQL |
||
498 | * |
||
499 | * @return string |
||
500 | */ |
||
501 | public function placeholderBoxSize(): string |
||
502 | { |
||
503 | $placeholder = $this->placeholderBox(); |
||
504 | $contentLength = !empty(\strlen($placeholder)) ? \strlen($placeholder) : 0; |
||
505 | |||
506 | return ImageOptimize::$plugin->optimize->humanFileSize($contentLength, 1); |
||
507 | } |
||
508 | |||
509 | /** |
||
510 | * Return a silhouette of the image as an SVG placeholder |
||
511 | * |
||
512 | * @return \Twig\Markup|null |
||
513 | */ |
||
514 | public function placeholderSilhouette() |
||
515 | { |
||
516 | $header = 'data:image/svg+xml,'; |
||
517 | if (!empty($this->placeholderSvg)) { |
||
518 | $content = $this->placeholderSvg; |
||
519 | } else { |
||
520 | // At least return something |
||
521 | return $this->defaultPlaceholderImage(); |
||
522 | } |
||
523 | |||
524 | return Template::raw($header.$content); |
||
525 | } |
||
526 | |||
527 | /** |
||
528 | * Getter for CraftQL |
||
529 | * |
||
530 | * @return string |
||
531 | */ |
||
532 | public function getPlaceholderSilhouette(): string |
||
533 | { |
||
534 | return (string)$this->placeholderSilhouette(); |
||
535 | } |
||
536 | |||
537 | /** |
||
538 | * @return string |
||
539 | */ |
||
540 | public function placeholderSilhouetteSize(): string |
||
541 | { |
||
542 | $placeholder = $this->placeholderSilhouette(); |
||
543 | $contentLength = !empty(\strlen($placeholder)) ? \strlen($placeholder) : 0; |
||
544 | |||
545 | return ImageOptimize::$plugin->optimize->humanFileSize($contentLength, 1); |
||
546 | } |
||
547 | |||
548 | /** |
||
549 | * Get the file size of any remote resource (using curl), |
||
550 | * either in bytes or - default - as human-readable formatted string. |
||
551 | * |
||
552 | * @author Stephan Schmitz <[email protected]> |
||
553 | * @license MIT <http://eyecatchup.mit-license.org/> |
||
554 | * @url <https://gist.github.com/eyecatchup/f26300ffd7e50a92bc4d> |
||
555 | * |
||
556 | * @param string $url Takes the remote object's URL. |
||
557 | * @param boolean $formatSize Whether to return size in bytes or |
||
558 | * formatted. |
||
559 | * @param boolean $useHead Whether to use HEAD requests. If false, |
||
560 | * uses GET. |
||
561 | * |
||
562 | * @return int|mixed|string Returns human-readable formatted size |
||
563 | * or size in bytes (default: formatted). |
||
564 | */ |
||
565 | public function getRemoteFileSize($url, $formatSize = true, $useHead = true) |
||
566 | { |
||
567 | // Get an absolute URL with protocol that curl will be happy with |
||
568 | $url = UrlHelper::absoluteUrlWithProtocol($url); |
||
569 | $ch = curl_init($url); |
||
570 | curl_setopt_array($ch, [ |
||
571 | CURLOPT_RETURNTRANSFER => 1, |
||
572 | CURLOPT_FOLLOWLOCATION => 1, |
||
573 | CURLOPT_SSL_VERIFYPEER => 0, |
||
574 | ]); |
||
575 | if ($useHead) { |
||
576 | curl_setopt($ch, CURLOPT_NOBODY, 1); |
||
577 | } |
||
578 | curl_exec($ch); |
||
579 | // content-length of download (in bytes), read from Content-Length: field |
||
580 | $contentLength = curl_getinfo($ch, CURLINFO_CONTENT_LENGTH_DOWNLOAD); |
||
581 | curl_close($ch); |
||
582 | // cannot retrieve file size, return "-1" |
||
583 | if (!$contentLength) { |
||
584 | return -1; |
||
585 | } |
||
586 | // return size in bytes |
||
587 | if (!$formatSize) { |
||
588 | return $contentLength; |
||
589 | } |
||
590 | |||
591 | return ImageOptimize::$plugin->optimize->humanFileSize($contentLength, 1); |
||
592 | } |
||
593 | |||
594 | // Protected Methods |
||
595 | // ========================================================================= |
||
596 | |||
597 | protected function getSrcsetSubsetArray(array $set, int $width, string $comparison): array |
||
598 | { |
||
599 | $subset = []; |
||
600 | $index = 0; |
||
601 | if (empty($this->variantSourceWidths)) { |
||
602 | return $subset; |
||
603 | } |
||
604 | foreach ($this->variantSourceWidths as $variantSourceWidth) { |
||
605 | $match = false; |
||
606 | switch ($comparison) { |
||
607 | case 'width': |
||
608 | if ($variantSourceWidth == $width) { |
||
609 | $match = true; |
||
610 | } |
||
611 | break; |
||
612 | |||
613 | case 'minwidth': |
||
614 | if ($variantSourceWidth >= $width) { |
||
615 | $match = true; |
||
616 | } |
||
617 | break; |
||
618 | |||
619 | case 'maxwidth': |
||
620 | if ($variantSourceWidth <= $width) { |
||
621 | $match = true; |
||
622 | } |
||
623 | break; |
||
624 | } |
||
625 | if ($match) { |
||
626 | $subset += array_slice($set, $index, 1, true); |
||
627 | } |
||
628 | $index++; |
||
629 | } |
||
630 | |||
631 | return $subset; |
||
632 | } |
||
633 | |||
634 | /** |
||
635 | * @param array $array |
||
636 | * @param bool $dpr |
||
637 | * |
||
638 | * @return string |
||
639 | */ |
||
640 | protected function getSrcsetFromArray(array $array, bool $dpr = false): string |
||
641 | { |
||
642 | $srcset = ''; |
||
643 | foreach ($array as $key => $value) { |
||
644 | if ($dpr) { |
||
645 | $descriptor = '1x'; |
||
646 | if (!empty($array[(int)$key / 2])) { |
||
647 | $descriptor = '2x'; |
||
648 | } |
||
649 | if (!empty($array[(int)$key / 3])) { |
||
676 |