diff --git a/README.md b/README.md index ea0db18..c56a17e 100644 --- a/README.md +++ b/README.md @@ -272,9 +272,31 @@ echo $image
- +Options passed into `img()` are included as HTML attributes on the element. Some attributes are automatically generated (e.g. `src`, `width`, `height`, etc.). You can override them with a `!` prefix: + +```php +echo $image + ->render() + ->img(['!width' => false, '!height' => false]); +``` + +
+See HTML Output + +```html +Lorem ipsum +``` +
+
-Options passed into `img()` are included as HTML attributes on the element. + + +#### Render options The `ImageRender` object can be configured to optimize the HTML output: diff --git a/src/ImageRender.php b/src/ImageRender.php index 12f01fd..d9b94b0 100644 --- a/src/ImageRender.php +++ b/src/ImageRender.php @@ -32,6 +32,8 @@ public function img(array $attributes = []): string $attributes['width'] = $this->main()->width(); $attributes['height'] = $this->main()->height(); + $attributes = $this->handleAttributeOverrides($attributes); + return $this->renderImg($attributes); } @@ -50,6 +52,8 @@ public function noScript(array $attributes = []): string $attributes['width'] = $noScript->main()->width(); $attributes['height'] = $noScript->main()->height(); + $attributes = $this->handleAttributeOverrides($attributes); + return $noScript->renderImg($attributes); } } diff --git a/src/ImageSetRender.php b/src/ImageSetRender.php index d59ccdf..1bbadef 100644 --- a/src/ImageSetRender.php +++ b/src/ImageSetRender.php @@ -40,6 +40,8 @@ public function picture(array $attributes = []): string $attributes['width'] = $this->main()->width(); $attributes['height'] = $this->main()->height(); + $attributes = $this->handleAttributeOverrides($attributes); + $output = []; foreach ($this->data['sources'] as $source) { @@ -84,6 +86,8 @@ public function img(array $attributes = []): string $attributes['data-srcset'] = $this->getSrcset($this->data['sources'][0]); $attributes['data-sizes'] = $this->getSizes($this->data['sources'][0]); + $attributes = $this->handleAttributeOverrides($attributes); + return $this->renderImg($attributes); } @@ -104,6 +108,8 @@ public function noScript(array $attributes = []): string $attributes['srcset'] = $noScript->getSrcset($noScript->data['sources'][0]); $attributes['sizes'] = $noScript->getSizes($noScript->data['sources'][0]); + $attributes = $this->handleAttributeOverrides($attributes); + return $noScript->renderImg($attributes); } diff --git a/src/ImgRenderable.php b/src/ImgRenderable.php index 228becb..65404c4 100644 --- a/src/ImgRenderable.php +++ b/src/ImgRenderable.php @@ -167,6 +167,29 @@ protected function prepareAttributes(array $attributes = []): array return $attributes; } + protected function handleAttributeOverrides(array $attributes = []): array + { + // attribute overrides start with a '!' (e.g. `['!src' => false]`) + $attributeOverrides = array_filter(array_keys($attributes), fn ($key) => $key[0] === '!'); + + foreach ($attributeOverrides as $override) { + $name = substr($override, 1); + $value = $attributes[$override]; + + if ($value === false) { + unset($attributes[$name]); + } elseif ($value === true) { + $attributes[$name] = ""; + } else { + $attributes[$name] = $value; + } + + unset($attributes[$override]); + } + + return $attributes; + } + protected function renderImg(array $attributes = []): string { $img = $this->htmlTag('img', $attributes); diff --git a/tests/ImageRenderTest.php b/tests/ImageRenderTest.php index 17cd521..662dac9 100644 --- a/tests/ImageRenderTest.php +++ b/tests/ImageRenderTest.php @@ -201,6 +201,41 @@ public function test_can_render_using_options_array() ); } + public function test_can_override_img_attributes() + { + $prepared = $this->prepareImageRender(); + + $output = $prepared->imageRender->img([ + 'alt' => 'test', + '!data-src' => '/test.jpg', + '!src' => true, + '!width' => false, + '!height' => false, + ]); + + $this->assertEquals( + 'test', + $output + ); + } + + public function test_can_override_noscript_attributes() + { + $prepared = $this->prepareImageRender(); + + $output = $prepared->imageRender->noscript([ + 'alt' => 'test', + '!src' => '/test.jpg', + '!width' => false, + '!height' => false, + ]); + + $this->assertEquals( + 'test', + $output + ); + } + protected function prepareImageRender($options = []): object { $prepared = $this->prepareImage(); diff --git a/tests/ImageSetRenderTest.php b/tests/ImageSetRenderTest.php index 397774d..b8d0c39 100644 --- a/tests/ImageSetRenderTest.php +++ b/tests/ImageSetRenderTest.php @@ -264,6 +264,59 @@ public function test_can_render_picture_using_options_array() ); } + public function test_can_override_picture_attributes() + { + $prepared = $this->prepareForImg(); + + $output = $prepared->imageSetRender->picture([ + 'alt' => 'test', + '!data-src' => '/test.jpg', + '!src' => true, + '!width' => false, + '!height' => false, + ]); + + $this->assertEquals( + 'test', + $output + ); + } + + public function test_can_override_img_attributes() + { + $prepared = $this->prepareForImg(); + + $output = $prepared->imageSetRender->img([ + 'alt' => 'test', + '!data-src' => '/test.jpg', + '!src' => true, + '!width' => false, + '!height' => false, + ]); + + $this->assertEquals( + 'test', + $output + ); + } + + public function test_can_override_noscript_attributes() + { + $prepared = $this->prepareForImg(); + + $output = $prepared->imageSetRender->noscript([ + 'alt' => 'test', + '!src' => '/test.jpg', + '!width' => false, + '!height' => false, + ]); + + $this->assertEquals( + 'test', + $output + ); + } + protected function prepareAllImages(): array { $image1 = $this->prepareImage();