Image transformations should be specified in the class in the same or…

…der you would use if writing the picture / src html by hand.
RicLeP · Mar 30, 2022 · da4a12e · da4a12e
1 parent 1d48017
commit da4a12e
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/tests/FieldTest.php b/tests/FieldTest.php
@@ -306,8 +306,8 @@ public function can_get_create_picture_elements()
 
 		$this->assertEquals(<<<'PICTURE'
 <picture>
-<source srcset="https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp)" type="image/webp" media="(min-width: 600px)">
 <source srcset="https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/500x400" type="image/jpeg" media="(min-width: 1200px)">
+<source srcset="https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp)" type="image/webp" media="(min-width: 600px)">
 
 <img src="https://a.storyblok.com/f/87028/960x1280/31a1d8dc75/bottle.jpg" alt="Some alt text with &quot;" >
 </picture>
@@ -386,8 +386,8 @@ public function can_get_create_picture_element_with_custom_domains()
 
 		$this->assertEquals(<<<'PICTURE'
 <picture>
-<source srcset="https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp)" type="image/webp" media="(min-width: 600px)">
 <source srcset="https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/500x400" type="image/jpeg" media="(min-width: 1200px)">
+<source srcset="https://custom.imageservice.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg/m/100x120/filters:format(webp)" type="image/webp" media="(min-width: 600px)">
 
 <img src="https://custom.asset.domain/f/87028/960x1280/31a1d8dc75/bottle.jpg" alt="Some alt text with &quot;" >
 </picture>
@@ -402,7 +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/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;" >
+<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,    (min-width: 600px) 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 "')));
 	}
@@ -416,7 +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/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;" >
+<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,    (min-width: 600px) 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 "')));
 	}

diff --git a/tests/Fixtures/Fields/HeroImage.php b/tests/Fixtures/Fields/HeroImage.php
@@ -11,14 +11,14 @@ class HeroImage extends Image
 
 	public function transformations() {
 		$this->transformations = [
-			'mobile' => [
-				'src' => $this->transform()->resize(100, 120)->format('webp'),
-				'media' => '(min-width: 600px)',
-			],
 			'desktop' => [
 				'src' => $this->transform()->resize(500, 400),
 				'media' => '(min-width: 1200px)',
 			],
+			'mobile' => [
+				'src' => $this->transform()->resize(100, 120)->format('webp'),
+				'media' => '(min-width: 600px)',
+			],
 		];
 	}
 }