From 6614589673d72c66fe36b5db09e626f12b69169d Mon Sep 17 00:00:00 2001
From: Robin Cramer <mail@robincramer.de>
Date: Mon, 26 Oct 2020 11:34:49 +0100
Subject: [PATCH] Set height attribute

---
 resources/views/responsiveImage.blade.php                | 2 +-
 resources/views/responsiveImageWithPlaceholder.blade.php | 2 +-
 src/MediaCollections/HtmlableMedia.php                   | 7 ++++++-
 tests/Feature/Media/ToHtmlTest.php                       | 2 +-
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/resources/views/responsiveImage.blade.php b/resources/views/responsiveImage.blade.php
index 4f90ec397..d98852b20 100644
--- a/resources/views/responsiveImage.blade.php
+++ b/resources/views/responsiveImage.blade.php
@@ -1 +1 @@
-<img{!! $attributeString !!}@if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}">
\ No newline at end of file
+<img{!! $attributeString !!}@if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}" height="{{ $height }}">
\ No newline at end of file
diff --git a/resources/views/responsiveImageWithPlaceholder.blade.php b/resources/views/responsiveImageWithPlaceholder.blade.php
index 8b0d2e3b7..00ec43194 100644
--- a/resources/views/responsiveImageWithPlaceholder.blade.php
+++ b/resources/views/responsiveImageWithPlaceholder.blade.php
@@ -1 +1 @@
-<img{!! $attributeString !!} @if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}">
+<img{!! $attributeString !!} @if($loadingAttributeValue) loading="{{ $loadingAttributeValue }}"@endif srcset="{{ $media->getSrcset($conversion) }}" onload="window.requestAnimationFrame(function(){if(!(size=getBoundingClientRect().width))return;onload=null;sizes=Math.ceil(size/window.innerWidth*100)+'vw';});" sizes="1px" src="{{ $media->getUrl($conversion) }}" width="{{ $width }}" height="{{ $height }}">
diff --git a/src/MediaCollections/HtmlableMedia.php b/src/MediaCollections/HtmlableMedia.php
index c59a526a2..ddfd7eb6e 100644
--- a/src/MediaCollections/HtmlableMedia.php
+++ b/src/MediaCollections/HtmlableMedia.php
@@ -70,13 +70,17 @@ public function toHtml()
 
         $viewName = 'image';
         $width = '';
+        $height = '';
 
         if ($this->media->hasResponsiveImages($this->conversionName)) {
             $viewName = config('media-library.responsive_images.use_tiny_placeholders')
                 ? 'responsiveImageWithPlaceholder'
                 : 'responsiveImage';
 
-            $width = $this->media->responsiveImages($this->conversionName)->files->first()->width();
+            $responsiveImage = $this->media->responsiveImages($this->conversionName)->files->first();
+
+            $width = $responsiveImage->width();
+            $height = $responsiveImage->height();
         }
 
         $media = $this->media;
@@ -88,6 +92,7 @@ public function toHtml()
             'attributeString',
             'loadingAttributeValue',
             'width',
+            'height',
         ))->render();
     }
 
diff --git a/tests/Feature/Media/ToHtmlTest.php b/tests/Feature/Media/ToHtmlTest.php
index aa869505d..17501aa94 100644
--- a/tests/Feature/Media/ToHtmlTest.php
+++ b/tests/Feature/Media/ToHtmlTest.php
@@ -111,7 +111,7 @@ 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___media_library_original_340_280.jpg 340w, http://localhost/media/2/responsive-images/test___media_library_original_284_233.jpg 284w, http://localhost/media/2/responsive-images/test___media_library_original_237_195.jpg 237w" src="/media/2/test.jpg" width="340">', $imgTag);
+        $this->assertEquals('<img srcset="http://localhost/media/2/responsive-images/test___media_library_original_340_280.jpg 340w, http://localhost/media/2/responsive-images/test___media_library_original_284_233.jpg 284w, http://localhost/media/2/responsive-images/test___media_library_original_237_195.jpg 237w" src="/media/2/test.jpg" width="340" height="280">', $imgTag);
     }
 
     /** @test */