Merge pull request #8 from fuelviews/patch-0.0.3

Chore: Refactor DX, add support for attributes, add basic defaults.

Author: thejmitchener

README.md

@@ -36,22 +36,17 @@ php artisan vendor:publish --provider="Fuelviews\ResponsiveImages\ResponsiveImag
 
 ## Basic usage
 
-Process images using [Process Responsive Images Script](https://github.com/fuelviews/responsiveimages)
-
-Copy processed images into the public/images/ directory
-
-Do not forget double and single quotes `"'$value'"`
-
 ```
 <x-fuelviews::responsive-images
-    :imageName="'logo'"
-    :imageExt="'png'"
-    :imageWidth="'350'"
-    :imageHeight="'167'"
-    :loading="''"
-    :altText="''"
-    :class="''"
+    image="logo.png"
+    class="h-96 w-auto"
 />
 ```
 
+or
+
+```
+<x-fuelviews::responsive-images image="logo.png" class="h-96 w-auto" />
+```
+
 ### [Fuelviews](https://feulviews.com)

resources/views/components/responsive-images.blade.php

@@ -1,10 +1,11 @@
 <img
-     src="{{ $imgsrc }}"
-     srcset="{{ $srcset }}"
-     alt="{{ $altText }}"
-     class="{{ $class }}"
-     width="{{ $imageWidth }}"
-     height="{{  $imageHeight }}"
-     loading="{{ $loading }}"
+        src="{{ $imgsrc }}"
+        srcset="{{ $srcset }}"
+        {{ $attributes->merge([
+            'alt' => $altText,
+            'loading' => $loading,
+            'width' => $imageWidth,
+            'height' => $imageHeight
+            ]) }}
 >
 {{ $slot }}

resources/views/welcome.blade.php

@@ -1,9 +1 @@
-<x-fuelviews::responsive-images
-    :imageName="'logo'"
-    :imageExt="'png'"
-    :imageWidth="'350'"
-    :imageHeight="'167'"
-    :loading="''"
-    :altText="''"
-    :class="''"
-/>
+<x-fuelviews::responsive-images image="logo.png" class="h-96 w-auto" />

src/View/Components/ResponsiveImages.php

@@ -10,7 +10,7 @@ class ResponsiveImages extends Component
 {
     public $imageName;
 
-    public $imageExt;
+    private $imageExt;
 
     public $imageWidth;
 
@@ -27,21 +27,18 @@ class ResponsiveImages extends Component
     private $imagePath;
 
     public function __construct(
-        $imageName,
-        $imageExt,
-        $imageWidth,
-        $imageHeight,
-        $altText,
+        $image,
+        $imageWidth = '300',
+        $imageHeight = '200',
+        $altText = 'Alt text',
         $loading = 'lazy',
-        $class = 'w-full'
     ) {
-        $this->imageName = $imageName;
-        $this->imageExt = $imageExt;
+        $this->imageName = $image;
+        $this->imageExt = pathinfo($this->imagePath . $this->imageName, PATHINFO_EXTENSION);
         $this->imageWidth = $imageWidth;
         $this->imageHeight = $imageHeight;
         $this->altText = $altText;
         $this->loading = $loading;
-        $this->class = $class;
         $this->imagePath = config('responsive-images.image_path');
         $this->dimensions = config('responsive-images.dimensions');
     }
@@ -51,18 +48,17 @@ public function render(): View|Closure|string
         $imageSet = [];
 
         foreach ($this->dimensions as $dimension) {
-            $src = asset($this->imagePath.$this->imageName.'-'.$dimension[0].'.'.'webp');
+            $src = asset($this->imagePath . pathinfo($this->imageName, PATHINFO_FILENAME) . '-' . $dimension[0] . '.webp');
             $descriptor = $dimension[1].'w';
             $imageSet[] = "{$src} {$descriptor}";
         }
 
         $srcset = implode(', ', $imageSet);
 
         return view('fuelviews::responsive-images', [
-            'imgsrc' => asset($this->imagePath.$this->imageName.'-'.$this->dimensions[1][0].'.'.$this->imageExt),
+            'imgsrc' => asset($this->imagePath . pathinfo($this->imageName, PATHINFO_FILENAME) . '-' . $this->dimensions[1][0] . '.' . $this->imageExt),
             'srcset' => $srcset,
             'altText' => $this->altText,
-            'class' => $this->class,
             'imageWidth' => $this->imageWidth,
             'imageHeight' => $this->imageHeight,
             'loading' => $this->loading,