From ce498f9f926f442d36b80c8b5b238ebc9b67df98 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Tue, 2 Apr 2024 20:55:45 -0400 Subject: [PATCH 1/4] docs: Docs cleanup --- docs/docs/using.md | 89 ++++++++++++++++++++++++---------------------- 1 file changed, 47 insertions(+), 42 deletions(-) diff --git a/docs/docs/using.md b/docs/docs/using.md index b66e603..876fae5 100644 --- a/docs/docs/using.md +++ b/docs/docs/using.md @@ -265,7 +265,7 @@ Which will generate the following HTML markup for you: width="1200" height="675" sizes="100vw" - > +> ``` The `imgTag()` also supports an Element Query-like API that lets you customize the `` tag that is output. @@ -303,7 +303,12 @@ Any attributes with empty values will not be rendered, so you can use that to re ##### The `.loading()` Parameter -With `.loading()`, you can control how the image will be loaded. +With `.loading()`, you can control how the image will be loaded.It can one of the following: + +* `'eager'` - (default) load the image normally (no lazy loading) +* `'lazy'` - us the browser's built-in lazy loading via the `loading="lazy"` attribute +* `'lazySizes'` - use the lazysizes JavaScript library for lazy loading the image +* `'lazySizesFallback'` - use the browser's built-in lazy loading, falling back on the lazysizes JavaScript library if the browser doesn't support native lazy loading ###### Using `.loading('eager')` @@ -329,7 +334,7 @@ Which will generate the following HTML markup for you: width="1200" height="675" sizes="100vw" - > +> ``` ###### Using `.loading('lazy')` @@ -361,7 +366,7 @@ Which will generate the following HTML markup for you: height="675" sizes="100vw" loading="lazy" - > +> ``` Note that it sets the background image to the OptimizedImage's placeholder via the `style` attribute, sp the placeholder image will be visible until the actual image loads. @@ -500,7 +505,7 @@ Which will generate the following HTML markup for you: width="1200" height="675" sizes="100vw" - > + > + > - - + > + ``` @@ -733,26 +738,26 @@ Which will generate the following HTML markup for you: height="675" data-sizes="100vw" data-srcset="/assets/site/_576x432_crop_center-center_60_line/christmas-selfie.jpg.webp 576w, - /assets/site/_768x576_crop_center-center_60_line/christmas-selfie.jpg.webp 768w, - /assets/site/_992x558_crop_center-center_82_line/christmas-selfie.jpg.webp 992w, - /assets/site/_1200x675_crop_center-center_82_line/christmas-selfie.jpg.webp 1200w" - > - - + /assets/site/_768x576_crop_center-center_60_line/christmas-selfie.jpg.webp 768w, + /assets/site/_992x558_crop_center-center_82_line/christmas-selfie.jpg.webp 992w, + /assets/site/_1200x675_crop_center-center_82_line/christmas-selfie.jpg.webp 1200w" + > + + ``` @@ -837,7 +842,7 @@ Which will generate the following HTML markup for you: width="1200" height="675" sizes="100vw" - > + > + > + > ``` From 60849787d470124d8852da87d44f54e90cfe38a3 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Tue, 2 Apr 2024 21:02:25 -0400 Subject: [PATCH 2/4] feat: Added the ability to pass in a config array to `.imgTag()`, `.pictureTag()` and `.linkPreloadTag()` --- src/models/OptimizedImage.php | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/models/OptimizedImage.php b/src/models/OptimizedImage.php index 175003b..afca40d 100644 --- a/src/models/OptimizedImage.php +++ b/src/models/OptimizedImage.php @@ -383,31 +383,34 @@ public function colorPaletteRgb(): array * Generate a complete tag for this OptimizedImages model * ref: https://web.dev/preload-responsive-images/#imagesrcset-and-imagesizes * + * @param array $config * @return LinkPreloadTag */ - public function linkPreloadTag(): LinkPreloadTag + public function linkPreloadTag(array $config = []): LinkPreloadTag { - return new LinkPreloadTag(['optimizedImage' => $this]); + return new LinkPreloadTag(array_merge($config, ['optimizedImage' => $this])); } /** * Generate a complete tag for this OptimizedImage model * + * @param array $config * @return ImgTag */ - public function imgTag(): ImgTag + public function imgTag(array $config = []): ImgTag { - return new ImgTag(['optimizedImage' => $this]); + return new ImgTag(array_merge($config, ['optimizedImage' => $this])); } /** * Generate a complete tag for this OptimizedImage model * + * @param array $config * @return PictureTag */ - public function pictureTag(): PictureTag + public function pictureTag(array $config = []): PictureTag { - return new PictureTag(['optimizedImage' => $this]); + return new PictureTag(array_merge($config, ['optimizedImage' => $this])); } /** From 0b50db137daf7703c7298727ec6fb862866d20a4 Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Tue, 2 Apr 2024 21:02:32 -0400 Subject: [PATCH 3/4] chore: Version 1.6.53 --- CHANGELOG.md | 4 ++++ composer.json | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 33e39be..6f9f925 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # ImageOptimize Changelog +## 1.6.53 - UNRELEASED +### Added +* Added the ability to pass in a config array to `.imgTag()`, `.pictureTag()` and `.linkPreloadTag()` + ## 1.6.52 - 2024.04.02 ### Added * Added a `--queue` option to the `image-optimize/optimize/create` console command if you want to defer the image generation to be run via queue job, rather than immediately via the console command diff --git a/composer.json b/composer.json index ce4e8dd..7e17c73 100644 --- a/composer.json +++ b/composer.json @@ -2,7 +2,7 @@ "name": "nystudio107/craft-imageoptimize", "description": "Automatically create & optimize responsive image transforms, using either native Craft transforms or a service like imgix, with zero template changes.", "type": "craft-plugin", - "version": "1.6.52", + "version": "1.6.53", "keywords": [ "craft", "cms", From 94d78eaac2a43a02955f5dfc92e4d78d84507bff Mon Sep 17 00:00:00 2001 From: Andrew Welch Date: Wed, 3 Apr 2024 00:03:01 -0400 Subject: [PATCH 4/4] docs: Document passing in config & shortcut tags overview --- docs/docs/overview.md | 2 +- docs/docs/using.md | 218 +++++++++++++++++++++++------------------- 2 files changed, 121 insertions(+), 99 deletions(-) diff --git a/docs/docs/overview.md b/docs/docs/overview.md index 896620b..3db1a95 100644 --- a/docs/docs/overview.md +++ b/docs/docs/overview.md @@ -18,7 +18,7 @@ As configured by default, all of these are _lossless_ image optimizations that r Out of the box, ImageOptimize allows for the optimization of `JPG`, `PNG`, `SVG`, & `GIF` images, but you can add whatever additional types you want. It also supports using [imgix](https://www.imgix.com/), [Thumbor](http://thumbor.org/), or [Sharp JS](https://nystudio107.com/blog/setting-up-your-own-image-transform-service) to create the responsive image transforms. -It’s important to create optimized images for frontend delivery, especially for mobile devices. To learn more about it, read the [Creating Optimized Images in Craft CMS](https://nystudio107.com/blog/creating-optimized-images-in-craft-cms) article. +It’s important to create optimized images for frontend delivery, especially for mobile devices. Thankfully, ImageOptimize includes `.imgTag()`, `pictureTag()` (with the ability to do "art direction"), and `linkPreloadTag()` convenience methods to make it easy to output modern optimized responsive images. Once ImageOptimize is installed, optimized versions of image transforms are created without you having to do anything. This makes it great for client-proofing sites. diff --git a/docs/docs/using.md b/docs/docs/using.md index 876fae5..651f601 100644 --- a/docs/docs/using.md +++ b/docs/docs/using.md @@ -126,104 +126,6 @@ Normally ImageOptimize will regenerate image variants if you change an Optimized If you plan to do this manually via the above console commands, you can disable this behavior via the `automaticallyResaveImageVariants` setting in `config.php`. -## Dynamically creating Optimized Image Variants - -To dynamically create Optimized Image Variants in your templates without having to use the Field. - -**N.B.:** We recommend _against_ using Image Optimize via Twig if you can avoid it. If you create the Optimized Image Variants in your templates, the image transforms, placeholder images, and color palette extraction will all be done at pageload time. This means you’ll miss out on the advantages of using the OptimizedImages field, where all of that computation is done when an Asset is saved. - -To create Optimized Image Variants dynamically in your templates, you can do: - -```twig -{% set optimizedImages = craft.imageOptimize.createOptimizedImages( - someAsset, - [ - { - 'width': 200, - 'useAspectRatio': true, - 'aspectRatioX': 1.0, - 'aspectRatioY': 1.0, - 'retinaSizes': ['1'], - 'quality': 82, - 'format': 'jpg', - }, - ] -) %} - -``` - -All of these fields are required, and they are analogous to the settings provided by the Field. The `retinaSizes` is an array of multipliers for the retina variants. For instance, if we wanted both normal resolution and 2x variants of the above image, we’d do: - -```twig -{% set optimizedImages = craft.imageOptimize.createOptimizedImages( - someAsset, - [ - { - 'width': 200, - 'useAspectRatio': true, - 'aspectRatioX': 1.0, - 'aspectRatioY': 1.0, - 'retinaSizes': ['1', '2'], - 'quality': 82, - 'format': 'jpg', - }, - ] -) %} - -``` - -You can create as many Optimized Image Variants as you like, by just including another array of settings. For example, to create both 200x and 400x image variants, we could do: - -```twig -{% set optimizedImages = craft.imageOptimize.createOptimizedImages( - someAsset, - [ - { - 'width': 200, - 'useAspectRatio': true, - 'aspectRatioX': 1.0, - 'aspectRatioY': 1.0, - 'retinaSizes': ['1'], - 'quality': 82, - 'format': 'jpg', - }, - { - 'width': 400, - 'useAspectRatio': true, - 'aspectRatioX': 1.0, - 'aspectRatioY': 1.0, - 'retinaSizes': ['1'], - 'quality': 82, - 'format': 'jpg', - }, - ] -) %} -``` - -The `optimizedImages` object that is returned to you can be used in your templates as described in the *Displaying images on the frontend* section. - -**N.B.:** Because they are lengthy operations, by default the generation of the dominant color palette and the generation of the placeholder silhouette are off. You can enable them via an additional parameter passed down to `craft.imageOptimize.createOptimizedImages`: - -```twig -{% set optimizedImages = craft.imageOptimize.createOptimizedImages( - someAsset, - [ - { - 'width': 200, - 'useAspectRatio': true, - 'aspectRatioX': 1.0, - 'aspectRatioY': 1.0, - 'retinaSizes': ['1'], - 'quality': 82, - 'format': 'jpg', - }, - ], - true, -) %} -``` - -The third parameter is the `generatePlacholders` setting, which disables generating all placeholders and dominant color palette extraction. - ## Displaying images on the frontend ImageOptimize makes it easy to create responsive images in your frontend templates. There are two primary ways to create responsive images: using the `` element or using the `` element. @@ -245,6 +147,28 @@ This allows the images to have `height` and `width` attributes applied to them s ImageOptimize knows all about your images, and so can create the HTML markup for your `` and `` tags quickly and easily. +It uses a synthesis of modern best practices to generate the tags in an optimal way, without you having to worry about the details, or maintain a myriad of out of date Twig template partials. + +All of the tag methods below support an Element Query-like chained syntax that lets you customize them: + +```twig + {% set asset = entry.myAssetField.one() %} + {{ asset.optimizedImagesField.imgTag() + .loading('lazy') + .render() }} +``` + +...or you can pass the config into them as an object if you prefer that method: + +```twig + {% set asset = entry.myAssetField.one() %} + {{ asset.optimizedImagesField.imgTag({ + 'loading': 'lazy', + }).render() }} +``` + +Either way, the result is the same, so pick whichever method you prefer. The example presented below will use the chained syntax. + #### Using `.imgTag()` to create `` tags An OptimizedImages field has a `.imgTag()` method that will generate a complete `` tag for you. In its simplest form, it looks like this: @@ -1271,4 +1195,102 @@ If you have `devMode` on, ImageOptimize will log stats for images that it create 2017-09-10 07:28:23 [192.168.10.1][1][-][info][nystudio107\imageoptimize\services\Optimize::createImageVariants] painted-face_170903_02341359b54c06c953b6.23303620.jpg -> painted-face_170903_02341359b54c06c953b6.23303620.jpg.webp -> Original: 36.9K, Variant: 12.8K -> Savings: 65.3% ``` +## Dynamically creating Optimized Image Variants + +To dynamically create Optimized Image Variants in your templates without having to use the Field. + +**N.B.:** We recommend _against_ using Image Optimize via Twig if you can avoid it. If you create the Optimized Image Variants in your templates, the image transforms, placeholder images, and color palette extraction will all be done at pageload time. This means you’ll miss out on the advantages of using the OptimizedImages field, where all of that computation is done when an Asset is saved. + +To create Optimized Image Variants dynamically in your templates, you can do: + +```twig +{% set optimizedImages = craft.imageOptimize.createOptimizedImages( + someAsset, + [ + { + 'width': 200, + 'useAspectRatio': true, + 'aspectRatioX': 1.0, + 'aspectRatioY': 1.0, + 'retinaSizes': ['1'], + 'quality': 82, + 'format': 'jpg', + }, + ] +) %} + +``` + +All of these fields are required, and they are analogous to the settings provided by the Field. The `retinaSizes` is an array of multipliers for the retina variants. For instance, if we wanted both normal resolution and 2x variants of the above image, we’d do: + +```twig +{% set optimizedImages = craft.imageOptimize.createOptimizedImages( + someAsset, + [ + { + 'width': 200, + 'useAspectRatio': true, + 'aspectRatioX': 1.0, + 'aspectRatioY': 1.0, + 'retinaSizes': ['1', '2'], + 'quality': 82, + 'format': 'jpg', + }, + ] +) %} + +``` + +You can create as many Optimized Image Variants as you like, by just including another array of settings. For example, to create both 200x and 400x image variants, we could do: + +```twig +{% set optimizedImages = craft.imageOptimize.createOptimizedImages( + someAsset, + [ + { + 'width': 200, + 'useAspectRatio': true, + 'aspectRatioX': 1.0, + 'aspectRatioY': 1.0, + 'retinaSizes': ['1'], + 'quality': 82, + 'format': 'jpg', + }, + { + 'width': 400, + 'useAspectRatio': true, + 'aspectRatioX': 1.0, + 'aspectRatioY': 1.0, + 'retinaSizes': ['1'], + 'quality': 82, + 'format': 'jpg', + }, + ] +) %} +``` + +The `optimizedImages` object that is returned to you can be used in your templates as described in the *Displaying images on the frontend* section. + +**N.B.:** Because they are lengthy operations, by default the generation of the dominant color palette and the generation of the placeholder silhouette are off. You can enable them via an additional parameter passed down to `craft.imageOptimize.createOptimizedImages`: + +```twig +{% set optimizedImages = craft.imageOptimize.createOptimizedImages( + someAsset, + [ + { + 'width': 200, + 'useAspectRatio': true, + 'aspectRatioX': 1.0, + 'aspectRatioY': 1.0, + 'retinaSizes': ['1'], + 'quality': 82, + 'format': 'jpg', + }, + ], + true, +) %} +``` + +The third parameter is the `generatePlacholders` setting, which disables generating all placeholders and dominant color palette extraction. + Brought to you by [nystudio107](https://nystudio107.com)