Merge branch 'release/1.3.0'

CHANGELOG.md

@@ -1,5 +1,11 @@
 # ImageOptimize Changelog
 
+## 1.3.0 - 2017.11.10
+### Changed
+* Added support for globally replacing native Craft transforms with a service like Imgix, with zero template changes
+* Added a Welcome page after installing ImageOptimize
+* Performance improvements when generating the placeholders
+
 ## 1.2.10 - 2017.11.04
 ### Changed
 * Fixed broken OptimizedImages Field settings

README.md

@@ -1,6 +1,6 @@
 # ImageOptimize plugin for Craft CMS 3.x
 
-Automatically create & optimize responsive image transforms
+Automatically create & optimize responsive image transforms, using either native Craft transforms or a service like Imgix, with zero template changes.
 
 **Note**: This plugin may become a paid add-on when the Craft Plugin store becomes available.
 
@@ -15,24 +15,17 @@ To install ImageOptimize, follow these steps:
 
 ImageOptimize works on Craft 3.x.
 
-To create client-proof optimized images, you'll need to also install the image optimization tools of your choice. Here's how to install a few on Ubuntu 16.04:
-
-* **jpegoptim** - `sudo apt-get install jpegoptim`
-* **mozjpeg** - [Installing mozjpeg on Ubuntu 16.04 (Forge)](https://nystudio107.com/blog/installing-mozjpeg-on-ubuntu-16-04-forge)
-* **optipng** - `sudo apt-get install optipng`
-* **svgo** - `sudo npm install -g svgo`
-* **gifsicle** - `sudo apt-get install gifsicle`
-* **webp** - `sudo apt-get install webp`
+## ImageOptimize Overview
 
-ImageOptimize's responsive image transforms will work without these tools installed, but it's recommended that you use them to ensure the images are fully optimized.
+ImageOptimize allows you to automatically create & optimize responsive image transforms from your Craft 3 assets. It works equally well with native Craft image transforms, and image services like [Imgix](https://imgix.com), with zero template changes.
 
-## ImageOptimize Overview
+You use the native Craft UI/UX to create your image transforms, whether in the AdminCP or via your templates. ImageOptimize takes care of the rest, optimizing all of your image transforms automatically by running a variety of image optimization tools on them.
 
-ImageOptimize allows you to automatically create & optimize responsive image transforms from your Craft 3 assets.  This makes creating responsive image sizes for `<img srcset="">` or `<picture>` elements sublimely easy. These responsive image transforms are created when an asset is _saved_, rather than at page load time, to ensure that frontend performance is optimal.
+ImageOptimize also comes with an **OptimizedImages** Field that makes creating responsive image sizes for `<img srcset="">` or `<picture>` elements sublimely easy. These responsive image transforms are created when an asset is _saved_, rather than at page load time, to ensure that frontend performance is optimal.
 
 Because ImageOptimize has already pre-generated and saved the URLs to your optimized image variants, no additional database requests are needed to fetch this information (unlike with Assets or Transforms).
 
-It will also optimize all of your image transforms automatically by running a variety of image optimization tools on them. As configured by default, all of these are _lossless_ image optimizations that remove metadata and otherwise optimize the images without changing their appearance in any way.
+As configured by default, all of these are _lossless_ image optimizations that remove metadata and otherwise optimize the images without changing their appearance in any way.
 
 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/) to create the responsive image transforms.
 
@@ -44,6 +37,25 @@ ImageOptimize works equally well with both local and remote assets such as Amazo
 
 ## Configuring ImageOptimize
 
+The plugin Settings for ImageOptimize allows you to choose whether to use native Craft image transforms, or an image transform service such as [Imgix](https://imgix.com). The setting you choose here will apply globally to all of your image transforms.
+
+### Native Craft Images
+
+To create client-proof optimized images with native Craft transforms, you'll need to also install the image optimization tools of your choice. The ImageOptimize plugin Settings page will show you the status of your installed image optimization tools:
+
+![Screenshot](screenshots/image-optimize-settings.png)
+
+Here's how to install a few on Ubuntu 16.04:
+
+* **jpegoptim** - `sudo apt-get install jpegoptim`
+* **mozjpeg** - [Installing mozjpeg on Ubuntu 16.04 (Forge)](https://nystudio107.com/blog/installing-mozjpeg-on-ubuntu-16-04-forge)
+* **optipng** - `sudo apt-get install optipng`
+* **svgo** - `sudo npm install -g svgo`
+* **gifsicle** - `sudo apt-get install gifsicle`
+* **webp** - `sudo apt-get install webp`
+
+ImageOptimize's responsive image transforms will work without these tools installed, but it's recommended that you use them to ensure the images are fully optimized.
+
 The only configuration for ImageOptimize is in the `config.php` file, which is a multi-environment friendly way to store the default settings.  Don't edit this file, instead copy it to `craft/config` as `image-optimize.php` and make your changes there.
 
 The `activeImageProcessors` array lets you specify which of the image optimization tools to use for which file types.
@@ -56,9 +68,19 @@ The `imageVariantCreators` array specifies the path and options for each of the
 
 See each image optimization tool's documentation for details on the options they allow you to use.
 
-The ImageOptimize plugin Settings page will show you the status of your installed image optimization tools:
+### Imgix Service Images
 
-![Screenshot](screenshots/image-optimize-settings.png)
+If you're using the [Imgix](https://imgix.com) service, ImageOptimize allows you to use the Craft AdminCP UX/UI to create your image transforms, but have Imgix do all of the heavy lifting for you. This means you can use Imgix with zero template changes.
+
+To utilize Imgix, you'll need to enter your **Imgix Source Domain**:
+
+![Screenshot](screenshots/image-optimize-imgix-settings.png)
+
+Then configure your Imgix source via your Imgix.com account. If you're using a Web Folder as a source, make sure it's set to the root of your domain, since you can only have one per site:
+
+![Screenshot](screenshots/imgix-web-folder-source.png)
+
+Regardless of how many separate Craft Asset Volumes you've set up, you'll just have one Web Folder source.
 
 ## Using ImageOptimize
 
@@ -330,7 +352,7 @@ If you have `devMode` on, ImageOptimize will log stats for images that it create
 
 Some things to do, and ideas for potential features:
 
-* Consider supporting image optimization services like Cloudinary, kraken.io, and ImageOptim
+* Consider supporting image optimization services like Cloudinary, TinyPNG, kraken.io, and ImageOptim
 * Add support for additional image optimization tools
 
 Brought to you by [nystudio107](https://nystudio107.com)

composer.json

@@ -1,8 +1,8 @@
 {
     "name": "nystudio107/craft3-imageoptimize",
-    "description": "Automatically create & optimize responsive image transforms",
+    "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.2.10",
+    "version": "1.3.0",
     "keywords": [
         "craft",
         "cms",
@@ -29,7 +29,10 @@
     "prefer-stable": true,
     "require": {
         "craftcms/cms": "~3.0.0-beta.20",
-        "imgix/imgix-php": "@dev",
+        "cloudinary/cloudinary_php": "^1.8.0",
+        "imageoptim/imageoptim": "^1.0.0",
+        "imgix/imgix-php": "^1.1.0",
+        "kraken-io/kraken-php": "^1.2",
         "ksubileau/color-thief-php": "^1.3",
         "mikehaertl/php-shellcommand": "~1.2"
     },

src/ImageOptimize.php

@@ -11,6 +11,7 @@
 namespace nystudio107\imageoptimize;
 
 use nystudio107\imageoptimize\fields\OptimizedImages;
+use nystudio107\imageoptimize\imagetransforms\ImageTransformInterface;
 use nystudio107\imageoptimize\models\Settings;
 use nystudio107\imageoptimize\services\Optimize as OptimizeService;
 use nystudio107\imageoptimize\services\Placeholder as PlaceholderService;
@@ -20,12 +21,17 @@
 use craft\base\Plugin;
 use craft\base\Volume;
 use craft\events\FieldEvent;
+use craft\events\GetAssetUrlEvent;
 use craft\events\GenerateTransformEvent;
+use craft\events\PluginEvent;
 use craft\events\RegisterComponentTypesEvent;
 use craft\events\VolumeEvent;
+use craft\helpers\UrlHelper;
 use craft\models\FieldLayout;
+use craft\services\Assets;
 use craft\services\AssetTransforms;
 use craft\services\Fields;
+use craft\services\Plugins;
 use craft\services\Volumes;
 use craft\web\Controller;
 
@@ -55,6 +61,21 @@ class ImageOptimize extends Plugin
      */
     public static $plugin;
 
+    /**
+     * @var ImageTransformInterface
+     */
+    public static $transformClass;
+
+    /**
+     * @var array
+     */
+    public static $transformParams;
+
+    /**
+     * @var string
+     */
+    public static $previousTransformMethod = null;
+
     // Public Methods
     // =========================================================================
 
@@ -66,14 +87,20 @@ public function init()
         parent::init();
         self::$plugin = $this;
 
+        // Cache some settings
+        $settings = $this->getSettings();
+        self::$previousTransformMethod = $settings->transformMethod;
+        self::$transformClass = ImageTransformInterface::IMAGE_TRANSFORM_MAP[$settings->transformMethod];
+        self::$transformParams = self::$transformClass::getTransformParams();
+
         // Register our Field
         Event::on(
             Fields::class,
             Fields::EVENT_REGISTER_FIELD_TYPES,
             function (RegisterComponentTypesEvent $event) {
                 Craft::trace(
                     'Fields::EVENT_REGISTER_FIELD_TYPES',
-                    'image-optimize'
+                    __METHOD__
                 );
                 $event->types[] = OptimizedImages::class;
             }
@@ -116,46 +143,68 @@ function (FieldEvent $event) {
             }
         );
 
+        // Handler: Plugins::EVENT_AFTER_SAVE_PLUGIN_SETTINGS
+        Event::on(
+            Plugins::class,
+            Plugins::EVENT_AFTER_SAVE_PLUGIN_SETTINGS,
+            function (PluginEvent $event) {
+                if ($event->plugin === $this) {
+                    Craft::trace(
+                        'Plugins::EVENT_AFTER_SAVE_PLUGIN_SETTINGS',
+                        __METHOD__
+                    );
+                    // If they changed the global transform method, we need to resave all Asset Volumes
+                    if (self::$previousTransformMethod != self::getSettings()->transformMethod) {
+                        ImageOptimize::$plugin->optimize->resaveAllVolumesAssets();
+                    }
+                }
+            }
+        );
+
         // Handler: Volumes::EVENT_AFTER_SAVE_VOLUME
         Event::on(
             Volumes::class,
             Volumes::EVENT_AFTER_SAVE_VOLUME,
             function (VolumeEvent $event) {
                 Craft::trace(
                     'Volumes::EVENT_AFTER_SAVE_VOLUME',
-                    'image-optimize'
+                    __METHOD__
                 );
                 // Only worry about this volume if it's not new
                 if (!$event->isNew) {
-                    $needToReSave = false;
                     /** @var Volume $volume */
                     $volume = $event->volume;
-                    /** @var FieldLayout $fieldLayout */
-                    $fieldLayout = $volume->getFieldLayout();
-                    // Loop through the fields in the layout to see if there is an OptimizedImages field
-                    if ($fieldLayout) {
-                        $fields = $fieldLayout->getFields();
-                        foreach ($fields as $field) {
-                            if ($field instanceof OptimizedImages) {
-                                $needToReSave = true;
-                            }
-                        }
-                    }
-                    if ($needToReSave) {
+                    if (is_subclass_of($volume, Volume::class)) {
                         ImageOptimize::$plugin->optimize->resaveVolumeAssets($volume);
                     }
                 }
             }
         );
 
+        // Handler: Assets::EVENT_GET_ASSET_URL
+        Event::on(
+            Assets::class,
+            Assets::EVENT_GET_ASSET_URL,
+            function (GetAssetUrlEvent $event) {
+                Craft::trace(
+                    'Assets::EVENT_GET_ASSET_URL',
+                    __METHOD__
+                );
+                // Return the URL to the asset URL or null to let Craft handle it
+                $event->url = ImageOptimize::$plugin->optimize->handleGetAssetUrlEvent(
+                    $event
+                );
+            }
+        );
+
         // Handler: AssetTransforms::EVENT_GENERATE_TRANSFORM
         Event::on(
             AssetTransforms::class,
             AssetTransforms::EVENT_GENERATE_TRANSFORM,
             function (GenerateTransformEvent $event) {
                 Craft::trace(
                     'AssetTransforms::EVENT_GENERATE_TRANSFORM',
-                    'image-optimize'
+                    __METHOD__
                 );
                 // Return the path to the optimized image to _createTransformForAsset()
                 $event->tempPath = ImageOptimize::$plugin->optimize->handleGenerateTransformEvent(
@@ -164,6 +213,20 @@ function (GenerateTransformEvent $event) {
             }
         );
 
+        // Do something after we're installed
+        Event::on(
+            Plugins::class,
+            Plugins::EVENT_AFTER_INSTALL_PLUGIN,
+            function (PluginEvent $event) {
+                if ($event->plugin === $this) {
+                    $request = Craft::$app->getRequest();
+                    if (($request->isCpRequest) && (!$request->isConsoleRequest)) {
+                        Craft::$app->getResponse()->redirect(UrlHelper::cpUrl('image-optimize/welcome'))->send();
+                    }
+                }
+            }
+        );
+
         Craft::info(
             Craft::t(
                 'image-optimize',
@@ -202,11 +265,14 @@ public function settingsHtml()
         $imageProcessors = ImageOptimize::$plugin->optimize->getActiveImageProcessors();
         $variantCreators = ImageOptimize::$plugin->optimize->getActiveVariantCreators();
 
+        // Get only the user-editable settings
+        $settings = $this->getSettings();
+
         // Render the settings template
         return Craft::$app->getView()->renderTemplate(
             'image-optimize/settings',
             [
-                'settings'        => $this->getSettings(),
+                'settings'        => $settings,
                 'imageProcessors' => $imageProcessors,
                 'variantCreators' => $variantCreators,
             ]