Merge branch 'release2.7.3'

RicLeP · Oct 15, 2021 · c698e9d · c698e9d
2 parents 0c62f4a + da45620
commit c698e9d
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 4 deletions.
diff --git a/src/Fields/Image.php b/src/Fields/Image.php
@@ -65,22 +65,33 @@ public function setTransformations($transformations) {
 		return $this;
 	}
 
-	public function picture($alt = '', $default = null, $attributes = [], $view = 'laravel-storyblok::picture-element') {
+	public function picture($alt = '', $default = null, $attributes = [], $view = 'laravel-storyblok::picture-element', $reverse = false) {
 		if ($default) {
 			$imgSrc = (string) $this->transformations[$default]['src'];
 		} else {
 			$imgSrc = $this->filename;
 		}
 
+		// srcset seems to work the opposite way to picture elements when working out sizes
+		if ($reverse) {
+			$transformations = array_reverse($this->transformations);
+		} else {
+			$transformations = $this->transformations;
+		}
+
 		return view($view, [
 			'alt' => $alt,
 			'attributes' => $attributes,
 			'default' => $default,
 			'imgSrc' => $imgSrc,
-			'transformations' => $this->transformations,
+			'transformations' => $transformations,
 		])->render();
 	}
 
+	public function srcset($alt = '', $default = null, $attributes = [], $view = 'laravel-storyblok::srcset') {
+		return $this->picture($alt, $default, $attributes, 'laravel-storyblok::srcset', true);
+	}
+
 	public function cssVars() {
 		if ($this->transformations) {
 			$vars = '';

diff --git a/src/resources/views/srcset.blade.php b/src/resources/views/srcset.blade.php
@@ -0,0 +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>
diff --git a/tests/FieldTest.php b/tests/FieldTest.php
@@ -269,8 +269,6 @@ public function can_get_create_picture_elements()
 </picture>
 PICTURE
 			, str_replace("\t", '', $field->picture('Some alt text with "', 'mobile', ['class' => 'laravel storyblok', 'id' => 'some-id'])));
-
-
 	}
 
 	/** @test */
@@ -335,6 +333,25 @@ public function can_get_create_picture_element_with_custom_domains()
 , str_replace("\t", '', $field->picture('Some alt text with "')));
 	}
 
+
+	/** @test */
+	public function can_create_img_srcset()
+	{
+		$field = new HeroImage($this->getFieldContents('hero'), null);
+
+		$this->assertEquals(<<<'SRCSET'
+<img srcset=" //img2.storyblok.com/500x400/f/87028/960x1280/31a1d8dc75/bottle.jpg 500w,  //img2.storyblok.com/100x120/filters:format(webp)/f/87028/960x1280/31a1d8dc75/bottle.jpg 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=" //img2.storyblok.com/500x400/f/87028/960x1280/31a1d8dc75/bottle.jpg 500w,  //img2.storyblok.com/100x120/filters:format(webp)/f/87028/960x1280/31a1d8dc75/bottle.jpg 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 "')));
+	}
+
+
+
 	/** @test */
 	public function can_get_asset_url_with_accessor()
 	{