Merge pull request #16 from pboivin/override-attributes

feat: Override generated html attributes

README.md

@@ -272,9 +272,31 @@ echo $image
 </details>
 <br>
 
-<a name="image-render-configuration"></a>
+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]);
+```
+
+<details>
+<summary>See HTML Output</summary>
+
+```html
+<img 
+  class="lazyload w-full" 
+  alt="Lorem ipsum" 
+  src="/images/cache/01.jpg/de828e8798017be816f79e131e41dcc9.gif" 
+  data-src="/images/source/01.jpg" 
+>
+```
+</details>
+<br>
 
-Options passed into `img()` are included as HTML attributes on the element.
+
+<a name="image-render-configuration"></a>
+#### Render options
 
 The `ImageRender` object can be configured to optimize the HTML output:
 

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);
     }
 }

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);
     }
 

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);

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(
+            '<img alt="test" class="lazyload" src="" data-src="/test.jpg">',
+            $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(
+            '<img alt="test" class="lazyload-noscript" src="/test.jpg">',
+            $output
+        );
+    }
+
     protected function prepareImageRender($options = []): object
     {
         $prepared = $this->prepareImage();

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(
+            '<picture><source data-sizes="50vw" data-srcset="cached1.jpg 500w, cached2.jpg 1000w"><img alt="test" class="lazyload" src="" data-src="/test.jpg"></picture>',
+            $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(
+            '<img alt="test" class="lazyload" src="" data-src="/test.jpg" data-srcset="cached1.jpg 500w, cached2.jpg 1000w" data-sizes="50vw">',
+            $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(
+            '<img alt="test" class="lazyload-noscript" src="/test.jpg" srcset="cached1.jpg 500w, cached2.jpg 1000w" sizes="50vw">',
+            $output
+        );
+    }
+
     protected function prepareAllImages(): array
     {
         $image1 = $this->prepareImage();