diff --git a/src/models/OptimizedImage.php b/src/models/OptimizedImage.php index ab4d4036..175003b9 100644 --- a/src/models/OptimizedImage.php +++ b/src/models/OptimizedImage.php @@ -12,7 +12,6 @@ use Craft; use craft\base\Model; -use craft\helpers\Html; use craft\helpers\Template; use craft\validators\ArrayValidator; use nystudio107\imageoptimize\helpers\Color as ColorHelper; @@ -384,153 +383,31 @@ public function colorPaletteRgb(): array * Generate a complete tag for this OptimizedImages model * ref: https://web.dev/preload-responsive-images/#imagesrcset-and-imagesizes * - * @param array $linkAttrs - * - * @return Markup + * @return LinkPreloadTag */ - public function linkPreloadTag($linkAttrs = []) + public function linkPreloadTag(): LinkPreloadTag { - // Any web browser that supports link rel="preload" as="image" also supports webp, so prefer that - $srcset = $this->optimizedImageUrls; - if (!empty($this->optimizedWebPImageUrls)) { - $srcset = $this->optimizedWebPImageUrls; - } - // Merge the passed in options with the tag attributes - $attrs = array_merge([ - 'rel' => 'preload', - 'as' => 'image', - 'href' => reset($srcset), - 'imagesrcset' => $this->getSrcsetFromArray($srcset), - 'imagesizes' => '100vw', - ], - $linkAttrs - ); - // Remove any empty attributes - $attrs = array_filter($attrs); - // Render the tag - $tag = Html::tag('link', '', $attrs); - - return Template::raw($tag); + return new LinkPreloadTag(['optimizedImage' => $this]); } /** - * Generate a complete tag for this OptimizedImages model - * - * @param string $loading 'eager', 'lazy', 'lazySizes', 'lazySizesFallback' - * @param string $placeHolder 'box', 'color', 'image', 'silhouette' - * @param array $imgAttrs + * Generate a complete tag for this OptimizedImage model * - * @return Markup + * @return ImgTag */ - public function imgTag($loading = 'eager', $placeHolder = 'box', $imgAttrs = []): Markup - { - // Merge the passed in options with the tag attributes - $attrs = array_merge([ - 'class' => '', - 'style' => '', - 'width' => $this->placeholderWidth, - 'height' => $this->placeholderHeight, - 'src' => reset($this->optimizedImageUrls), - 'srcset' => $this->getSrcsetFromArray($this->optimizedImageUrls), - 'sizes' => '100vw', - 'loading' => '', - ], - $imgAttrs - ); - // Handle lazy loading - if ($loading !== 'eager') { - $attrs = $this->swapLazyLoadAttrs($loading, $placeHolder, $attrs); - } - // Remove any empty attributes - $attrs = array_filter($attrs); - // Render the tag - $tag = Html::tag('img', '', $attrs); - - return Template::raw($tag); + public function imgTag(): ImgTag + { + return new ImgTag(['optimizedImage' => $this]); } /** - * Generate a complete tag for this OptimizedImages model + * Generate a complete tag for this OptimizedImage model * - * @param string $loading 'eager', 'lazy', 'lazySizes', 'lazySizesFallback' - * @param string $placeHolder 'box', 'color', 'image', 'silhouette' - * @param array $pictureAttrs - * @param array $srcsetAttrs - * @param array $imgAttrs - * - * @return Markup + * @return PictureTag */ - public function pictureTag($loading = 'eager', $placeHolder = 'box', $pictureAttrs = [], $srcsetAttrs = [], $imgAttrs = []): Markup - { - $content = ''; - // Handle the webp srcset - if (!empty($this->optimizedWebPImageUrls)) { - // Merge the passed in options with the tag attributes - $attrs = array_merge([ - 'srcset' => $this->getSrcsetFromArray($this->optimizedWebPImageUrls), - 'type' => 'image/webp', - 'sizes' => '100vw', - ], - $srcsetAttrs - ); - // Handle lazy loading - if ($loading !== 'eager') { - $attrs = $this->swapLazyLoadAttrs($loading, $placeHolder, $attrs); - } - // Remove any empty attributes - $attrs = array_filter($attrs); - // Render the tag - $content .= Html::tag('source', '', $attrs); - } - // Handle the regular srcset - if (!empty($this->optimizedImageUrls)) { - // Merge the passed in options with the tag attributes - $attrs = array_merge([ - 'srcset' => $this->getSrcsetFromArray($this->optimizedImageUrls), - 'sizes' => '100vw', - ], - $srcsetAttrs - ); - // Handle lazy loading - if ($loading !== 'eager') { - $attrs = $this->swapLazyLoadAttrs($loading, $placeHolder, $attrs); - } - // Remove any empty attributes - $attrs = array_filter($attrs); - // Render the tag - $content .= Html::tag('source', '', $attrs); - } - // Handle the img tag - /** @noinspection SuspiciousAssignmentsInspection */ - $attrs = array_merge([ - 'class' => '', - 'style' => '', - 'width' => $this->placeholderWidth, - 'height' => $this->placeholderHeight, - 'src' => reset($this->optimizedImageUrls), - 'loading' => '', - ], - $imgAttrs - ); - // Handle lazy loading - if ($loading !== 'eager') { - $attrs = $this->swapLazyLoadAttrs($loading, $placeHolder, $attrs); - } - // Remove any empty attributes - $attrs = array_filter($attrs); - // Render the tag - $content .= Html::tag('img', '', $attrs); - // Merge the passed in options with the tag attributes - $attrs = array_merge([ - ], - $pictureAttrs - ); - // Remove any empty attributes - $attrs = array_filter($attrs); - // Render the tag - $tag = Html::tag('picture', $content, $attrs); - - return Template::raw($tag); + public function pictureTag(): PictureTag + { + return new PictureTag(['optimizedImage' => $this]); } /** @@ -700,6 +577,34 @@ public function getRemoteFileSize($url, $formatSize = true, $useHead = true) return ImageOptimize::$plugin->optimize->humanFileSize($contentLength, 1); } + /** + * @param array $array + * @param bool $dpr + * + * @return string + */ + public function getSrcsetFromArray(array $array, bool $dpr = false): string + { + $srcset = ''; + foreach ($array as $key => $value) { + if ($dpr) { + $descriptor = '1x'; + if (!empty($array[(int)$key / 2])) { + $descriptor = '2x'; + } + if (!empty($array[(int)$key / 3])) { + $descriptor = '3x'; + } + } else { + $descriptor = $key . 'w'; + } + $srcset .= $value . ' ' . $descriptor . ', '; + } + $srcset = rtrim($srcset, ', '); + + return $srcset; + } + // Protected Methods // ========================================================================= @@ -740,34 +645,6 @@ protected function getSrcsetSubsetArray(array $set, int $width, string $comparis return $subset; } - /** - * @param array $array - * @param bool $dpr - * - * @return string - */ - protected function getSrcsetFromArray(array $array, bool $dpr = false): string - { - $srcset = ''; - foreach ($array as $key => $value) { - if ($dpr) { - $descriptor = '1x'; - if (!empty($array[(int)$key / 2])) { - $descriptor = '2x'; - } - if (!empty($array[(int)$key / 3])) { - $descriptor = '3x'; - } - } else { - $descriptor = $key . 'w'; - } - $srcset .= $value . ' ' . $descriptor . ', '; - } - $srcset = rtrim($srcset, ', '); - - return $srcset; - } - /** * Return a default placeholder image * diff --git a/src/models/PictureTag.php b/src/models/PictureTag.php index 0062dbc7..608ad53b 100644 --- a/src/models/PictureTag.php +++ b/src/models/PictureTag.php @@ -145,7 +145,7 @@ public function imgAttrs(array $value): PictureTag * * @param OptimizedImage $optimizedImage * @param array $srcsetAttrs - * @return void + * @return PictureTag */ public function artDirection(OptimizedImage $optimizedImage, array $srcsetAttrs = []): PictureTag { diff --git a/src/services/Optimize.php b/src/services/Optimize.php index 762ec166..966da0a1 100644 --- a/src/services/Optimize.php +++ b/src/services/Optimize.php @@ -880,8 +880,7 @@ protected function copyImageVariantToVolume( Asset $asset, AssetTransformIndex $index, $outputPath - ) - { + ) { // If the image variant creation succeeded, copy it into place if (!empty($outputPath) && is_file($outputPath)) { // Figure out the resulting path for the image variant diff --git a/src/services/Placeholder.php b/src/services/Placeholder.php index fc7545e7..63f45d88 100644 --- a/src/services/Placeholder.php +++ b/src/services/Placeholder.php @@ -268,8 +268,7 @@ public function createImageFromPath( int $height, int $quality, $position - ): string - { + ): string { $images = Craft::$app->getImages(); $pathParts = pathinfo($filePath); try { diff --git a/src/variables/ImageOptimizeVariable.php b/src/variables/ImageOptimizeVariable.php index c1ae99e6..0c1bfdf9 100755 --- a/src/variables/ImageOptimizeVariable.php +++ b/src/variables/ImageOptimizeVariable.php @@ -80,8 +80,7 @@ public function createOptimizedImages( Asset $asset, $variants = null, $generatePlaceholders = false - ) - { + ) { // Override our settings for lengthy operations, since we're doing this via Twig ImageOptimize::$generatePlaceholders = $generatePlaceholders;