From 712fc725c8e42076e2884dd9845639e5f7655507 Mon Sep 17 00:00:00 2001
From: freek <freek@spatie.be>
Date: Tue, 11 Feb 2020 13:12:58 +0100
Subject: [PATCH 1/2] wip

---
 .editorconfig                                 |  5 ++-
 CHANGELOG.md                                  |  1 +
 config/medialibrary.php                       | 11 ++++++
 docs/api/defining-conversions.md              |  8 ++++-
 docs/installation-setup.md                    | 16 +++++++--
 resources/views/image.blade.php               |  2 +-
 resources/views/responsiveImage.blade.php     |  2 +-
 .../responsiveImageWithPlaceholder.blade.php  |  2 +-
 src/Conversion/Conversion.php                 | 16 +++++++++
 src/Models/Media.php                          |  9 +++++
 tests/Feature/Media/ToHtmlTest.php            | 34 +++++++++++++++----
 .../TestModelWithCustomLoadingAttribute.php   | 21 ++++++++++++
 12 files changed, 112 insertions(+), 15 deletions(-)
 create mode 100644 tests/Support/TestModels/TestModelWithCustomLoadingAttribute.php

diff --git a/.editorconfig b/.editorconfig
index cd8eb86ef..cb6a08bfa 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -9,7 +9,10 @@ indent_size = 4
 indent_style = space
 end_of_line = lf
 insert_final_newline = true
-trim_trailing_whitespace = true
+trim_trailing_whitespace = false
+
+[*.blade.php]
+insert_final_newline = false
 
 [*.md]
 trim_trailing_whitespace = false
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fbe4910ec..bfaacd437 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@ All notable changes to `laravel-medialibrary` will be documented in this file
 - the `UrlGenerator` interface now contains all required methods (#1656)
 - use PHP 7.4 features where possible
 - the namespace has been renamed from `Spatie\MediaLibrary` to `Spatie\Medialibrary`.
+- added support for the `loading` attribute (#1667)
 
 ## 7.18.2 - 2020-01-25
 
diff --git a/config/medialibrary.php b/config/medialibrary.php
index 8712c749f..a0ba4d21f 100644
--- a/config/medialibrary.php
+++ b/config/medialibrary.php
@@ -63,6 +63,17 @@
         'tiny_placeholder_generator' => Spatie\Medialibrary\ResponsiveImages\TinyPlaceholderGenerator\Blurred::class,
     ],
 
+    /*
+     * When converting Media instances to response the medialibrary will add
+     * a `loading` attribute to the `img` tag. Here you can set the default
+     * value of that attribute.
+     *
+     * Possible values: 'auto', 'lazy' and 'eager,
+     *
+     * More info: https://css-tricks.com/native-lazy-loading/
+     */
+    "default_loading_attribute_value" => 'auto',
+
     /*
      * When urls to files get generated, this class will be called. Leave empty
      * if your files are stored locally above the site root or on s3.
diff --git a/docs/api/defining-conversions.md b/docs/api/defining-conversions.md
index c6949159b..f727fe754 100644
--- a/docs/api/defining-conversions.md
+++ b/docs/api/defining-conversions.md
@@ -55,9 +55,15 @@ public function performOnCollections($collectionNames)
  *
  * @return $this
  */
-public function nonQueued()
+public function nonQueued(): self
 ```
 
+### useLoadingAttributeValue
+
+This is the value that, when this conversation is converted to html, will be used in the `loading` attribute. The loading attribute is a standardised attribute that controls lazy loading behaviour of the browser. Possible values are `lazy`, `eager` and `auto`.
+
+You can learn more on native lazy loading [in this post on css-tricks](https://css-tricks.com/native-lazy-loading/).
+
 ## Image manipulations
 
 You may add any call to one of [the manipulation functions](https://docs.spatie.be/image) available on [the spatie/image package](https://github.com/spatie/image).
diff --git a/docs/installation-setup.md b/docs/installation-setup.md
index 8e7db9667..03c697b55 100644
--- a/docs/installation-setup.md
+++ b/docs/installation-setup.md
@@ -28,8 +28,7 @@ This is the default content of the config file:
 
 ```php
 return [
-
-    /*
+/*
      * The disk on which to store added files and derived images by default. Choose
      * one or more of the disks you've configured in config/filesystems.php.
      */
@@ -73,7 +72,7 @@ return [
          * images. By default we optimize for filesize and create variations that each are 20%
          * smaller than the previous one. More info in the documentation.
          *
-         * https://docs.spatie.be/laravel-medialibrary/v8/advanced-usage/generating-responsive-images
+         * https://docs.spatie.be/laravel-medialibrary/v7/advanced-usage/generating-responsive-images
          */
         'width_calculator' => Spatie\Medialibrary\ResponsiveImages\WidthCalculator\FileSizeOptimizedWidthCalculator::class,
 
@@ -90,6 +89,17 @@ return [
         'tiny_placeholder_generator' => Spatie\Medialibrary\ResponsiveImages\TinyPlaceholderGenerator\Blurred::class,
     ],
 
+    /*
+     * When converting Media instances to response the medialibrary will add
+     * a `loading` attribute to the `img` tag. Here you can set the default
+     * value of that attribute.
+     *
+     * Possible values: 'auto', 'lazy' and 'eager,
+     *
+     * More info: https://css-tricks.com/native-lazy-loading/
+     */
+    "default_loading_attribute_value" => 'auto',
+
     /*
      * When urls to files get generated, this class will be called. Leave empty
      * if your files are stored locally above the site root or on s3.
diff --git a/resources/views/image.blade.php b/resources/views/image.blade.php
index 4c78aab11..69916110a 100644
--- a/resources/views/image.blade.php
+++ b/resources/views/image.blade.php
@@ -1 +1 @@
-<img{!! $attributeString !!} src="{{ $media->getUrl($conversion) }}" alt="{{ $media->name }}">
\ No newline at end of file
+<img{!! $attributeString !!} loading="{{ $loadingAttributeValue }}" src="{{ $media->getUrl($conversion) }}" alt="{{ $media->name }}">
\ No newline at end of file
diff --git a/resources/views/responsiveImage.blade.php b/resources/views/responsiveImage.blade.php
index 667738d55..687df618f 100644
--- a/resources/views/responsiveImage.blade.php
+++ b/resources/views/responsiveImage.blade.php
@@ -1 +1 @@
-<img{!! $attributeString !!} srcset="{{ $media->getSrcset($conversion) }}" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}">
\ No newline at end of file
+<img{!! $attributeString !!} loading="{{ $loadingAttributeValue }}" srcset="{{ $media->getSrcset($conversion) }}" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}">
\ No newline at end of file
diff --git a/resources/views/responsiveImageWithPlaceholder.blade.php b/resources/views/responsiveImageWithPlaceholder.blade.php
index 7a7a81138..0e06e1dfb 100644
--- a/resources/views/responsiveImageWithPlaceholder.blade.php
+++ b/resources/views/responsiveImageWithPlaceholder.blade.php
@@ -1 +1 @@
-<img{!! $attributeString !!} srcset="{{ $media->getSrcset($conversion) }}" onload="this.onload=null;this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';" sizes="1px" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}">
+<img{!! $attributeString !!} loading="{{ $loadingAttributeValue }}" srcset="{{ $media->getSrcset($conversion) }}" onload="this.onload=null;this.sizes=Math.ceil(this.getBoundingClientRect().width/window.innerWidth*100)+'vw';" sizes="1px" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}">
\ No newline at end of file
diff --git a/src/Conversion/Conversion.php b/src/Conversion/Conversion.php
index 13d81148f..d734f6526 100644
--- a/src/Conversion/Conversion.php
+++ b/src/Conversion/Conversion.php
@@ -22,6 +22,8 @@ class Conversion
 
     protected bool $generateResponsiveImages = false;
 
+    protected string $loadingAttributeValue;
+
     public function __construct(string $name)
     {
         $this->name = $name;
@@ -29,6 +31,8 @@ public function __construct(string $name)
         $this->manipulations = (new Manipulations())
             ->optimize(config('medialibrary.image_optimizers'))
             ->format(Manipulations::FORMAT_JPG);
+
+        $this->loadingAttributeValue = config('medialibrary.default_loading_attribute_value');
     }
 
     public static function create(string $name)
@@ -211,4 +215,16 @@ public function getConversionFile(string $file): string
 
         return "{$fileName}-{$this->getName()}.{$extension}";
     }
+
+    public function useLoadingAttributeValue(string $value): self
+    {
+        $this->loadingAttributeValue = $value;
+
+        return $this;
+    }
+
+    public function getLoadingAttributeValue(): string
+    {
+        return $this->loadingAttributeValue;
+    }
 }
diff --git a/src/Models/Media.php b/src/Models/Media.php
index 1011ff334..764e2ff97 100644
--- a/src/Models/Media.php
+++ b/src/Models/Media.php
@@ -281,6 +281,14 @@ public function img($conversion = '', array $extraAttributes = []): string
             $attributeString = ' '.$attributeString;
         }
 
+        $loadingAttributeValue = config('medialibrary.default_loading_attribute_value');
+        if ($conversion !== '') {
+            /** @var Conversion $conversionObject */
+            $conversionObject = ConversionCollection::createForMedia($this)->getByName($conversion);
+
+            $loadingAttributeValue = $conversionObject->getLoadingAttributeValue();
+        }
+
         $media = $this;
 
         $viewName = 'image';
@@ -299,6 +307,7 @@ public function img($conversion = '', array $extraAttributes = []): string
             'media',
             'conversion',
             'attributeString',
+            'loadingAttributeValue',
             'width'
         ));
     }
diff --git a/tests/Feature/Media/ToHtmlTest.php b/tests/Feature/Media/ToHtmlTest.php
index 9b444b793..7e9824b02 100644
--- a/tests/Feature/Media/ToHtmlTest.php
+++ b/tests/Feature/Media/ToHtmlTest.php
@@ -4,6 +4,9 @@
 
 use Illuminate\Support\Str;
 use Spatie\Medialibrary\Models\Media;
+use Spatie\Medialibrary\Tests\Support\TestModels\TestModel;
+use Spatie\Medialibrary\Tests\Support\TestModels\TestModelWithConversion;
+use Spatie\Medialibrary\Tests\Support\TestModels\TestModelWithCustomLoadingAttribute;
 use Spatie\Medialibrary\Tests\TestCase;
 use Spatie\Snapshots\MatchesSnapshots;
 
@@ -24,20 +27,20 @@ public function setUp(): void
     /** @test */
     public function it_can_render_itself_as_an_image()
     {
-        $this->assertEquals('<img src="/media/1/test.jpg" alt="test">', Media::first()->img());
+        $this->assertEquals('<img loading="auto" src="/media/1/test.jpg" alt="test">', Media::first()->img());
     }
 
     /** @test */
     public function it_can_render_a_conversion_of_itself_as_an_image()
     {
-        $this->assertEquals('<img src="/media/1/conversions/test-thumb.jpg" alt="test">', Media::first()->img('thumb'));
+        $this->assertEquals('<img loading="auto" src="/media/1/conversions/test-thumb.jpg" alt="test">', Media::first()->img('thumb'));
     }
 
     /** @test */
     public function it_can_render_extra_attributes()
     {
         $this->assertEquals(
-            '<img class="my-class" id="my-id" src="/media/1/conversions/test-thumb.jpg" alt="test">',
+            '<img class="my-class" id="my-id" loading="auto" src="/media/1/conversions/test-thumb.jpg" alt="test">',
              Media::first()->img('thumb', ['class' => 'my-class', 'id' => 'my-id'])
         );
     }
@@ -46,7 +49,7 @@ public function it_can_render_extra_attributes()
     public function attributes_can_be_passed_to_the_first_argument()
     {
         $this->assertEquals(
-            '<img class="my-class" id="my-id" src="/media/1/test.jpg" alt="test">',
+            '<img class="my-class" id="my-id" loading="auto" src="/media/1/test.jpg" alt="test">',
              Media::first()->img(['class' => 'my-class', 'id' => 'my-id'])
         );
     }
@@ -55,7 +58,7 @@ public function attributes_can_be_passed_to_the_first_argument()
     public function both_the_conversion_and_extra_attributes_can_be_passed_as_the_first_arugment()
     {
         $this->assertEquals(
-            '<img class="my-class" id="my-id" src="/media/1/conversions/test-thumb.jpg" alt="test">',
+            '<img class="my-class" id="my-id" loading="auto" src="/media/1/conversions/test-thumb.jpg" alt="test">',
              Media::first()->img(['class' => 'my-class', 'id' => 'my-id', 'conversion' => 'thumb'])
         );
     }
@@ -67,7 +70,7 @@ public function a_media_instance_is_htmlable()
 
         $renderedView = $this->renderView('media', compact('media'));
 
-        $this->assertEquals('<img src="/media/1/test.jpg" alt="test"> <img src="/media/1/conversions/test-thumb.jpg" alt="test">', $renderedView);
+        $this->assertEquals('<img loading="auto" src="/media/1/test.jpg" alt="test"> <img loading="auto" src="/media/1/conversions/test-thumb.jpg" alt="test">', $renderedView);
     }
 
     /** @test */
@@ -119,6 +122,23 @@ public function it_will_not_rendering_extra_javascript_or_including_base64_svg_w
 
         $imgTag = $media->refresh()->img();
 
-        $this->assertEquals('<img srcset="http://localhost/media/2/responsive-images/test___medialibrary_original_340_280.jpg 340w, http://localhost/media/2/responsive-images/test___medialibrary_original_284_233.jpg 284w, http://localhost/media/2/responsive-images/test___medialibrary_original_237_195.jpg 237w" src="/media/2/test.jpg" width="340">', $imgTag);
+        $this->assertEquals('<img loading="auto" srcset="http://localhost/media/2/responsive-images/test___medialibrary_original_340_280.jpg 340w, http://localhost/media/2/responsive-images/test___medialibrary_original_284_233.jpg 284w, http://localhost/media/2/responsive-images/test___medialibrary_original_237_195.jpg 237w" src="/media/2/test.jpg" width="340">', $imgTag);
+    }
+    
+    /** @test */
+    public function the_loading_attribute_can_be_specified_on_the_conversion()
+    {
+        $media = TestModelWithCustomLoadingAttribute::create(['name' => 'test'])
+            ->addMedia($this->getTestJpg())
+            ->toMediaCollection();
+
+        $originalImgTag = $media->refresh()->img();
+        $this->assertEquals('<img loading="auto" src="/media/2/test.jpg" alt="test">', $originalImgTag);
+
+        $lazyConversionImageTag = $media->refresh()->img('lazy-conversion');
+        $this->assertEquals('<img loading="lazy" src="/media/2/conversions/test-lazy-conversion.jpg" alt="test">', $lazyConversionImageTag);
+
+        $eagerConversionImageTag = $media->refresh()->img('eager-conversion');
+        $this->assertEquals('<img loading="eager" src="/media/2/conversions/test-eager-conversion.jpg" alt="test">', $eagerConversionImageTag);
     }
 }
diff --git a/tests/Support/TestModels/TestModelWithCustomLoadingAttribute.php b/tests/Support/TestModels/TestModelWithCustomLoadingAttribute.php
new file mode 100644
index 000000000..c66d31576
--- /dev/null
+++ b/tests/Support/TestModels/TestModelWithCustomLoadingAttribute.php
@@ -0,0 +1,21 @@
+<?php
+
+namespace Spatie\Medialibrary\Tests\Support\TestModels;
+
+use Spatie\Medialibrary\Models\Media;
+
+class TestModelWithCustomLoadingAttribute extends TestModelWithConversion
+{
+    public function registerMediaConversions(Media $media = null): void
+    {
+        $this
+            ->addMediaConversion('lazy-conversion')
+            ->useLoadingAttributeValue('lazy')
+            ->nonQueued();
+
+        $this
+            ->addMediaConversion('eager-conversion')
+            ->useLoadingAttributeValue('eager')
+            ->nonQueued();
+    }
+}

From 13ef67b8f244b247dc4fc1fa53158e40aa117639 Mon Sep 17 00:00:00 2001
From: freek <freek@spatie.be>
Date: Tue, 11 Feb 2020 13:48:38 +0100
Subject: [PATCH 2/2] wip

---
 config/medialibrary.php    | 2 +-
 docs/installation-setup.md | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/medialibrary.php b/config/medialibrary.php
index a0ba4d21f..f9a2f5efc 100644
--- a/config/medialibrary.php
+++ b/config/medialibrary.php
@@ -46,7 +46,7 @@
          * images. By default we optimize for filesize and create variations that each are 20%
          * smaller than the previous one. More info in the documentation.
          *
-         * https://docs.spatie.be/laravel-medialibrary/v7/advanced-usage/generating-responsive-images
+         * https://docs.spatie.be/laravel-medialibrary/v8/advanced-usage/generating-responsive-images
          */
         'width_calculator' => Spatie\Medialibrary\ResponsiveImages\WidthCalculator\FileSizeOptimizedWidthCalculator::class,
 
diff --git a/docs/installation-setup.md b/docs/installation-setup.md
index 03c697b55..e90e1d752 100644
--- a/docs/installation-setup.md
+++ b/docs/installation-setup.md
@@ -72,7 +72,7 @@ return [
          * images. By default we optimize for filesize and create variations that each are 20%
          * smaller than the previous one. More info in the documentation.
          *
-         * https://docs.spatie.be/laravel-medialibrary/v7/advanced-usage/generating-responsive-images
+         * https://docs.spatie.be/laravel-medialibrary/v8/advanced-usage/generating-responsive-images
          */
         'width_calculator' => Spatie\Medialibrary\ResponsiveImages\WidthCalculator\FileSizeOptimizedWidthCalculator::class,