Merge branch 'release/5.0.0-beta.2' into v5

CHANGELOG.md

@@ -1,5 +1,12 @@
 # ImageOptimize Changelog
 
+## 5.0.0-beta.2 - 2024.04.04
+### Added
+* Added the ability to pass in a config array to `.imgTag()`, `.pictureTag()` and `.linkPreloadTag()`
+
+### Changed
+* Changed `.loading()` → `.loadingStrategy()`, `.artDirection()` → `addSourceFrom()`
+
 ## 5.0.0-beta.1 - 2024.04.02
 ### Added
 * Initial Craft CMS 5 compatibility

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": "5.0.0-beta.1",
+  "version": "5.0.0-beta.2",
   "keywords": [
     "craft",
     "cms",

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.
 

src/models/ImgTag.php

@@ -24,7 +24,7 @@ class ImgTag extends BaseImageTag
     /**
      * @var string The loading scheme to use: 'eager', 'lazy', 'lazySizes', 'lazySizesFallback'
      */
-    public string $loading = 'eager';
+    public string $loadingStrategy = 'eager';
 
     /**
      * @var string The type of placeholder image to use: 'box', 'color', 'image', 'silhouette'
@@ -61,9 +61,9 @@ public function __construct($config = [])
      * @param string $value
      * @return $this
      */
-    public function loading(string $value): ImgTag
+    public function loadingStrategy(string $value): ImgTag
     {
-        $this->loading = $value;
+        $this->loadingStrategy = $value;
 
         return $this;
     }
@@ -103,8 +103,8 @@ public function render(): Markup
     {
         $attrs = $this->imgAttrs;
         // Handle lazy loading
-        if ($this->loading !== 'eager') {
-            $attrs = $this->swapLazyLoadAttrs($this->loading, $this->placeholder, $attrs);
+        if ($this->loadingStrategy !== 'eager') {
+            $attrs = $this->swapLazyLoadAttrs($this->loadingStrategy, $this->placeholder, $attrs);
         }
         // Remove any empty attributes
         $attrs = array_filter($attrs);

src/models/OptimizedImage.php

@@ -382,31 +382,34 @@ public function colorPaletteRgb(): array
      * Generate a complete <link rel="preload"> 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 <img> 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 <picture> 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]));
     }
 
     /**

src/models/PictureTag.php

@@ -24,7 +24,7 @@ class PictureTag extends BaseImageTag
     /**
      * @var string The loading scheme to use: 'eager', 'lazy', 'lazySizes', 'lazySizesFallback'
      */
-    public string $loading = 'eager';
+    public string $loadingStrategy = 'eager';
 
     /**
      * @var string The type of placeholder image to use: 'box', 'color', 'image', 'silhouette'
@@ -46,11 +46,6 @@ class PictureTag extends BaseImageTag
      */
     public array $imgAttrs = [];
 
-    /**
-     * @var OptimizedImage[] array OptimizedImage models to add as art direction
-     */
-    public array $artDirection = [];
-
     /**
      * @param $config
      */
@@ -78,9 +73,9 @@ public function __construct($config = [])
      * @param string $value
      * @return $this
      */
-    public function loading(string $value): PictureTag
+    public function loadingStrategy(string $value): PictureTag
     {
-        $this->loading = $value;
+        $this->loadingStrategy = $value;
 
         return $this;
     }
@@ -147,7 +142,7 @@ public function imgAttrs(array $value): PictureTag
      * @param array $sourceAttrs
      * @return PictureTag
      */
-    public function artDirection(OptimizedImage $optimizedImage, array $sourceAttrs = []): PictureTag
+    public function addSourceFrom(OptimizedImage $optimizedImage, array $sourceAttrs = []): PictureTag
     {
         $this->populateSourceAttrs($optimizedImage, $sourceAttrs);
 
@@ -165,8 +160,8 @@ public function render(): Markup
         // Handle the <source> tag(s)
         foreach ($this->sourceAttrs as $attrs) {
             // Handle lazy loading
-            if ($this->loading !== 'eager') {
-                $attrs = $this->swapLazyLoadAttrs($this->loading, $this->placeholder, $attrs);
+            if ($this->loadingStrategy !== 'eager') {
+                $attrs = $this->swapLazyLoadAttrs($this->loadingStrategy, $this->placeholder, $attrs);
             }
             // Remove any empty attributes
             $attrs = array_filter($attrs);
@@ -176,8 +171,8 @@ public function render(): Markup
         // Handle the <img> tag
         $attrs = $this->imgAttrs;
         // Handle lazy loading
-        if ($this->loading !== 'eager') {
-            $attrs = $this->swapLazyLoadAttrs($this->loading, $this->placeholder, $attrs);
+        if ($this->loadingStrategy !== 'eager') {
+            $attrs = $this->swapLazyLoadAttrs($this->loadingStrategy, $this->placeholder, $attrs);
         }
         // Remove any empty attributes
         $attrs = array_filter($attrs);