Initial commit

.editorconfig

@@ -0,0 +1,29 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# http://editorconfig.org/
+
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[*.yml]
+indent_size = 2
+indent_style = space
+
+[*.{yml,json}]
+# The indent size used in the `package.json` file cannot be changed
+# https://github.com/npm/npm/pull/3180#issuecomment-16336516
+indent_size = 2
+indent_style = space
+
+[composer.json]
+indent_size = 4

README.md

@@ -0,0 +1,21 @@
+# Lazyloaded images for SilverStripe
+
+## Introduction
+
+This module implements the LQIP (Low Quality Image Placeholder) pattern (combined with a blur-up CSS transition) powered by [lazysizes](https://github.com/aFarkas/lazysizes).
+
+## Requirements
+
+* SilverStripe 4
+
+## Installation
+
+```bash
+composer require dnadesign/silverstripe-lazyloaded-image
+```
+
+## Usage
+
+```html
+$Image.Lazyloaded
+```

_config/config.yml

@@ -0,0 +1,11 @@
+---
+Name: lazyloadedimage
+---
+
+SilverStripe\Assets\Image:
+  extensions:
+    - DNADesign\LazyloadedImage\LazyloadedImageExtension
+
+SilverStripe\Assets\Storage\DBFile:
+  extensions:
+    - DNADesign\LazyloadedImage\LazyloadedImageExtension

composer.json

@@ -0,0 +1,28 @@
+{
+    "name": "dnadesign/silverstripe-lazyloaded-image",
+    "description": "Implements the LQIP (Low Quality Image Placeholder) pattern powered by lazysizes",
+    "type": "silverstripe-vendormodule",
+    "keywords": [
+        "silverstripe",
+        "lazyload",
+        "lazysizes",
+        "image"
+    ],
+    "license": "MIT",
+    "require": {
+        "silverstripe/vendor-plugin": "^1.0",
+        "silverstripe/framework": "^4.0",
+        "chrometoaster/silverstripe-image-quality": "~1.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "DNADesign\\LazyloadedImage\\": "src/"
+        }
+    },
+    "extra": {
+        "installer-name": "silverstripe-lazyloaded-image",
+        "expose": [
+            "client"
+        ]
+    }
+}

src/LazyloadedImage.php

@@ -0,0 +1,19 @@
+<?php
+
+namespace DNADesign\LazyloadedImage;
+
+use SilverStripe\Core\Extension;
+use SilverStripe\View\Requirements;
+
+class LazyloadedImageExtension extends Extension
+{
+    public function getLazyloaded()
+    {
+        Requirements::javascript('dnadesign/silverstripe-lazyloaded-image:client/javascript/lazysizes.min.js');
+        Requirements::javascript('dnadesign/silverstripe-lazyloaded-image:client/javascript/ls.blur-up.min.js');
+
+        return $this->owner->customise([
+            'LQIP' => $this->owner->Quality(20)
+        ])->renderWith('Includes/LazyloadedImage');
+    }
+}

src/templates/Includes/LazyloadedImage.ss

@@ -0,0 +1,17 @@
+<style>
+  .blur-up {
+    filter: blur(5px);
+    transition: filter 400ms;
+  }
+
+  .blur-up.lazyloaded {
+    filter: blur(0);
+  }
+</style>
+
+<img
+  class="lazyload blur-up"
+  src="$LQIP.URL"
+  data-src="$URL.ATT"
+  alt="$Title.ATT"
+/>