document some plugins

aFarkas · Oct 29, 2018 · 14daa65 · 14daa65
1 parent 3566867
commit 14daa65
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -489,29 +489,9 @@ In case you are changing the ``data-src``/``data-srcset`` attributes of already
 
 This [attrchange / re-initialization extension](plugins/attrchange) automatically detects changes to your ``data-*`` attributes and adds the class for you.
 
-### [unveilhooks plugin](plugins/unveilhooks)
-The [unveilhooks plugin](plugins/unveilhooks) plugin enables lazySizes to lazyload background images, widgets/components/scripts, styles and video/audio elements.
-
-### [include plugin](plugins/include)
-The [include plugin](plugins/include) plugin enables lazySizes to lazyload content, styles or AMD modules either simply postponed or conditionally (for example matching certain media queries). This extension also heavily simplifies the architecture of conditional, dynamically changing responsive behavior and has great scalability.
-
-### [lazysizes custommedia extension](plugins/custommedia)
-[lazySizes custommedia extension](plugins/custommedia) allows you to automatically sync and manage your breakpoints between your CSS and the ``media`` attributes of your ``"picture > source"`` elements using the ``customMedia`` option of lazySizes.
-
-### [unload extension](plugins/unload)
-The [unload](plugins/unload) extends lazysizes to unload not in view images to improve memory consumption and orientationchange/resize performance.
-
-### [noscript extension](plugins/noscript)
-The [noscript extension](plugins/noscript) is the ultimate progressive enhancement extension for lazySizes. It allows you to transform any HTML inside a ``noscript`` element as soon as it becomes visible.
-
-### [progressive plugin](plugins/progressive)
-The [progressive plugin](plugins/progressive) adds better support for rendering progressive jpgs/pngs.
-
-### [RIaS plugin - (Responsive Images as a Service / Responsive image on demand)](plugins/rias)
-The [RIaS plugin is a neat full responsive images solution](plugins/rias) without the need of any additional plugins/polyfills.
-
-It enables lazySizes to generate the best suitable image source based on an URL pattern. It works with pre-build images (i.e. grunt-responsive-images) as also with any third party (ReSrc, Pixtulate, mobify, WURFL's Image Tailor ...) or self hosted restful responsive image service (responsive image on demand). It makes responsive images even more easier without any need for another third party script.
+### Other [plugins/extensions](plugins)
 
+There are also other plugins/extension in the [plugins folder](plugins). As always you are open to create new ones for your project.
 
 ## <a name="specify-dimensions"></a>Tip: Specifying image dimensions (minimizing reflows and avoiding page jumps)
 To minimize reflows, content jumping or unpredictable behavior with some other JS widgets (isotope, masonry, some sliders/carousels...) the width **and** the height of an image should be calculable by the browser before the image source itself is loaded. For "static" images this can be done using either CSS or using the content attributes:

diff --git a/plugins/artdirect/README.md b/plugins/artdirect/README.md
@@ -0,0 +1,137 @@
+# lazysizes artdirect extension
+
+The artdirect extension allows you to fully control art direction through your CSS. This is accomplished by two techniques which you can use separately or combined. The extension hooks into the `data-sizes="auto"` feature.
+
+The first feature is by tagging and the second feature uses the information of the displayed aspect ratio of the `img` elements and the physical aspect ratio of your images.
+
+## Enabling artdirect extension for a ``picture > img``
+
+You can either enable the artdirect extension for all images using JavaScript:
+
+```js
+import lazySizes from 'lazysizes';
+import 'lazysizes/plugins/ls.artdirect';
+
+lazySizes.cfg.autoArtDirect = true;
+```
+
+Or for a specific `img` element using CSS:
+
+```css
+picture > img.is-autoartdirect {
+	font-family: "artdirect";
+}
+```
+
+## Tagging `source` elements and controlling it via CSS
+
+You can use a whitespace separated list of tags on the `source` elements `data-tag` attribute as also a whitespace separated list of tags inside of the CSS `font-family`:
+
+```html
+<style>
+	picture > img.is-autoartdirect {
+    	font-family: "artdirect: tag-default";
+    }
+    
+    @media (max-width: 960px) {
+    	picture > img.is-autoartdirect {
+        	font-family: "artdirect: tag-small";
+        }
+    }
+</style>
+
+<picture>
+	<source
+		data-srcset="http://placehold.it/500x600/11e87f/fff"
+		data-tag="tag-default" />
+	<source
+		data-srcset="http://placehold.it/700x300"
+		data-tag="tag-small" />
+    <img
+
+        data-src="http://placehold.it/500x600/11e87f/fff"
+        class="lazyload"
+        data-sizes="auto"
+        alt="image with artdirection" />
+</picture>
+```
+
+## Providing aspect ratio information of physical images
+
+By providing a specific height and width (no `auto` values) through CSS and providing the physical aspect ratio of the images through either a `data-aspectratio` attribute or through `w` and `h` descriptors the plugin can choose the best image source.
+
+```html
+<style>
+	picture > img.is-autoartdirect {
+		display: block;
+		height: 200px;
+		max-height: 60vh;
+		width: 100%;
+		object-fit: cover;
+    	font-family: "artdirect", "object-fit: cover";
+    }
+    
+    
+</style>
+
+<picture>
+	<source
+		data-srcset="http://placehold.it/500x600/11e87f/fff"
+		data-aspectratio="0.834"
+	/>
+	<source
+		data-srcset="http://placehold.it/700x300"
+		data-aspectratio="2.34"
+	 />
+    <img
+
+        data-src="http://placehold.it/500x600/11e87f/fff"
+        class="lazyload"
+        data-sizes="auto"
+        alt="image with artdirection" />
+</picture>
+```
+
+The aspect ratio feature can be perfectly combined with the tagging feature.
+
+```html
+<style>
+	picture > img.is-autoartdirect {
+		display: block;
+		height: 200px;
+		max-height: 60vh;
+		width: 100%;
+		object-fit: cover;
+    	font-family: "artdirect", "object-fit: cover";
+    }
+    
+    @media (max-width: 1100px) {
+    	font-family: "artdirect: tag-foo tag-baz", "object-fit: cover";
+    }
+</style>
+
+<picture>
+	<source
+		data-srcset="http://placehold.it/500x600/11e87f/fff"
+		data-aspectratio="0.834"
+		data-tag="tag-foo"
+	/>
+	<source
+		data-srcset="http://placehold.it/1400x600/e8117f/fff 1400w 600h"
+		data-aspectratio="0.834"
+	/>
+	<source
+		data-srcset="http://placehold.it/700x300"
+		data-aspectratio="2.34"
+		data-tag="tag-baz tag-foobar"
+	 />
+    <img
+
+        data-src="http://placehold.it/500x600/11e87f/fff"
+        class="lazyload"
+        data-sizes="auto"
+        alt="image with artdirection" />
+</picture>
+```
+
+ 
diff --git a/plugins/attrchange/README.md b/plugins/attrchange/README.md
@@ -2,7 +2,7 @@
 
 In case you are changing the ``data-src``/``data-srcset`` attributes of already transformed lazyload elements dynamically, you normally also must re-add the ``lazyload`` class to the element.
 
-This extension automatically detects changes to your ``data-*`` attributes and adds the class for you.
+This extension automatically detects changes to your ``data-*`` attributes and adds the class for you. This is very comfortable in case you are using highly dynamic or reactive View libraries like React, Angular, Ember etc..
 
 In case you are using React you can also try the following [react-lazysizes](https://www.npmjs.com/package/react-lazysizes) module as another possible alternative.