Fix: Reversing the Image transformations order for srcset() was break…

…ing the default picture/srcset views. If picture worked responsively img src didn’t and vice versa
RicLeP · Mar 30, 2022 · 1d48017 · 1d48017
1 parent 336873c
commit 1d48017
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 14 deletions.
diff --git a/src/Fields/Image.php b/src/Fields/Image.php
@@ -168,7 +168,7 @@ public function picture($alt = '', $default = null, $attributes = [], $view = 'l
 	 * @return string
 	 */
 	public function srcset($alt = '', $default = null, $attributes = [], $view = 'laravel-storyblok::srcset') {
-		return $this->picture($alt, $default, $attributes, 'laravel-storyblok::srcset', true);
+		return $this->picture($alt, $default, $attributes, 'laravel-storyblok::srcset');
 	}
 
 	/**

diff --git a/src/resources/views/srcset.blade.php b/src/resources/views/srcset.blade.php
@@ -1,2 +1,2 @@
 
-<img srcset="@foreach($transformations as $key => $transformation) {{ $transformation['src']  }} {{ $transformation['src']->width() }}w, @endforeach" sizes="@foreach($transformations as $key => $transformation) @if ($default !== $key) @if (!$loop->last) {{ $transformation['media'] }} @endif {{ $transformation['src']->width() }}px, @endif @endforeach" src="{{ $imgSrc }}" alt="{{ $alt }}" @foreach ($attributes as $attribute => $value) {{$attribute}}="{{$value}}" @endforeach>
+<img srcset="@foreach($transformations as $key => $transformation) {{ $transformation['src']  }} {{ $transformation['src']->width() }}w, @endforeach" sizes="@foreach($transformations as $key => $transformation) @if ($default !== $key) {{ $transformation['media'] }} {{ $transformation['src']->width() }}px, @endif @endforeach" src="{{ $imgSrc }}" alt="{{ $alt }}" @foreach ($attributes as $attribute => $value) {{$attribute}}="{{$value}}" @endforeach>
diff --git a/tests/FieldTest.php b/tests/FieldTest.php
@@ -402,12 +402,7 @@ public function can_create_img_srcset()
 		$field = new HeroImage($this->getFieldContents('hero'), null);
 
 		$this->assertEquals(<<<'SRCSET'
-<img srcset=" https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/500x400 500w,  https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp) 100w, " sizes="   (min-width: 1200px)  500px,     100px,  " src="https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg" alt="Some alt text with &quot;" >
-SRCSET
-			, str_replace("\t", '', $field->srcset('Some alt text with "')));
-
-		$this->assertEquals(<<<'SRCSET'
-<img srcset=" https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/500x400 500w,  https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp) 100w, " sizes="   (min-width: 1200px)  500px,     100px,  " src="https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg" alt="Some alt text with &quot;" >
+<img srcset=" https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp) 100w,  https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/500x400 500w, " sizes="   (min-width: 600px)  100px,     500px,  " src="https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg" alt="Some alt text with &quot;" >
 SRCSET
 			, str_replace("\t", '', $field->srcset('Some alt text with "')));
 	}
@@ -421,12 +416,7 @@ public function can_create_img_srcset_with_custom_domains()
 		$field = new HeroImage($this->getFieldContents('hero'), null);
 
 		$this->assertEquals(<<<'SRCSET'
-<img srcset=" https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/500x400 500w,  https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp) 100w, " sizes="   (min-width: 1200px)  500px,     100px,  " src="https://custom.asset.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg" alt="Some alt text with &quot;" >
-SRCSET
-			, str_replace("\t", '', $field->srcset('Some alt text with "')));
-
-		$this->assertEquals(<<<'SRCSET'
-<img srcset=" https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/500x400 500w,  https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp) 100w, " sizes="   (min-width: 1200px)  500px,     100px,  " src="https://custom.asset.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg" alt="Some alt text with &quot;" >
+<img srcset=" https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp) 100w,  https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/500x400 500w, " sizes="   (min-width: 600px)  100px,     500px,  " src="https://custom.asset.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg" alt="Some alt text with &quot;" >
 SRCSET
 			, str_replace("\t", '', $field->srcset('Some alt text with "')));
 	}