Merge branch 'dev' of https://github.com/moodley-interactive/statamic…

…-responsive-image into dev

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 moodley interactive gmbh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,10 +1,31 @@
-# moodley interactive responsive image statamic addon
+![Responsive Image Addon Banner](https://raw.githubusercontent.com/moodley-interactive/statamic-responsive-image/dev/responsive.gif)
+
+# moodley interactive - Responsive image Statamic addon
+
+[Demo](https://responsive-image-demo.moodley.dev/): https://responsive-image-demo.moodley.dev/
+
+## Features
+
+- Works with [Glide](https://glide.thephpleague.com/) and [Imgix](https://www.imgix.com/)
+- Generates `picture` elements with the correct `sizes` attribute, based on your pages grid system
+- Supports art directed images
+- Supports aspect ratios
+- Works with your existing assets, no custom fieldtype needed
+- Displays a single color placeholder (muted dominant color) of the image
+- Uses [lazySizes](https://github.com/aFarkas/lazysizes) 
+
+## Motivation
+
+The motivation was, that we needed a solution that works with Glide and Imgix in the first place. And all CPU heavy calculations, like fallback images (e.g.: dominant color placeholder), should not be done in runtime. Further we needed the `sizes` attribute to be calculated based on our grid system, to make this super easy, we used `col_span` as a parameter, just as you are used to from Tailwind.
 
 ## Installation
 
 Install via composer:
 `composer require mia/statamic-image-renderer`
 
+Publish the config:
+`php artisan vendor:publish --tag="statamic-image-renderer-config"`
+
 Add [lazysizes](https://github.com/aFarkas/lazysizes) to your sites js:
 
 ```
@@ -23,16 +44,20 @@ import lazySizes from 'lazysizes'
 
 ## Config
 
-Run and select "XXX"
-```
-php artisan vendor:publish
-```
+The published config can be found in `config/statamic-image-renderer.php` and you can set up the breakpoints, the image provider and the container size for your main content.
+
+## Placeholder
+
+Placeholders are getting generated on upload. If you add the addon to an existing site, you can generate the placeholders for all assets already uploaded with a command. To to so run `php please resp:generate`.
+
 ## Tag Usage
 
-In all the examples the assets field is called `image` in the blueprint. Can be called anything, thats up to you.
+In all the examples the assets field is called `image` in the blueprint. Can be called anything, thats up to your fieldsets/blueprint.
 
 All parameters can be mixed, however you have to make sure, that the ratio and col_span attributes have a corresponding breakpoint set up. You can't have `md:ratio="4/3"` and `lg:col_span="4"`. The parameter `col_span` expects a ratio to be set up.
 
+The `col_span` attribute is the most important one, as it tells the browser which size of the image it should load. So the `{{ resp:image }}` tag should never be used without it, or the loaded image size is based on the viewport width.
+
 ### Basic Tag
 
 ```
@@ -60,6 +85,13 @@ Sets the correct size on mobile and desktop and takes the page grid in account.
 This tells the tag, that this image is not in the page grid and is rather a fullscreen image.
 
 ```
-{{ resp:image container_full_width="true }}
+{{ resp:image container_full_width="true" }}
+```
+### Crop to faces (only supported with imgix)
+
+Crop to faces in the picture instead of the focalpoint or center.
+
+```
+{{ resp:image crop="faces" }}
 ```
 

composer.json

@@ -1,14 +1,28 @@
 {
     "name": "mia/statamic-image-renderer",
+    "keywords": [
+        "statamic",
+        "responsive",
+        "images",
+        "imgix",
+        "glide"
+    ],
+    "homepage": "https://github.com/moodley-interactive/statamic-responsive-image",
+    "license": "MIT",
     "autoload": {
         "psr-4": {
             "Mia\\ImageRenderer\\": "src"
         }
     },
+    "authors": [
+        {
+            "name": "moodley interactive"
+        }
+    ],
     "extra": {
         "statamic": {
-            "name": "Responsive Image Renderer",
-            "description": "Responsive Image Rendering addon"
+            "name": "Responsive Image Addon",
+            "description": "Generates art directed picture elements. Works with Glide and Imgix."
         },
         "laravel": {
             "providers": [
@@ -18,6 +32,10 @@
     },
     "require": {
         "bepsvpt/blurhash": "^1.0",
-        "league/color-extractor": "^0.3.2"
+        "league/color-extractor": "^0.3.2",
+        "ozdemirburak/iris": "^2.3"
+    },
+    "require-dev": {
+        "spatie/laravel-ray": "^1.17"
     }
-}
+}