From 55e4cc802a73187a8ef0d7f5812fb6e9eae0ab67 Mon Sep 17 00:00:00 2001
From: Florence Randaxhe <43472197+FlorenceRandaxhe@users.noreply.github.com>
Date: Thu, 21 Aug 2025 14:14:21 +0200
Subject: [PATCH 1/5] added layout image component

---
 components/image/Component.php      | 46 ++++++++++++++++++++++++
 components/image/style.scss         | 30 ++++++++++++++++
 components/image/view.blade.php     |  9 +++++
 src/Components/Publishers/Image.php | 54 +++++++++++++++++++++++++++++
 4 files changed, 139 insertions(+)
 create mode 100644 components/image/Component.php
 create mode 100644 components/image/style.scss
 create mode 100644 components/image/view.blade.php
 create mode 100644 src/Components/Publishers/Image.php

diff --git a/components/image/Component.php b/components/image/Component.php
new file mode 100644
index 0000000..a3cbe75
--- /dev/null
+++ b/components/image/Component.php
@@ -0,0 +1,46 @@
+<?php
+
+namespace App\View\Components;
+
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+use Whitecube\BemComponents\HasBemClasses;
+
+class LayoutImage extends Component
+{
+    use HasBemClasses;
+
+    /**
+     * The LayoutImage's title.
+     */
+    public string $image;
+
+    /**
+     * The LayoutImage's image.
+     */
+    public string $alt;
+
+    /**
+     * The LayoutImage's image alt.
+     */
+    public string $caption;
+
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(string $image, string $alt, string $caption)
+    {
+        $this->image = $image;
+        $this->alt = $alt;
+        $this->caption = $caption;
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('components.layout-image');
+    }
+}
diff --git a/components/image/style.scss b/components/image/style.scss
new file mode 100644
index 0000000..a43a6e2
--- /dev/null
+++ b/components/image/style.scss
@@ -0,0 +1,30 @@
+.layout-image {
+    width: 100%;
+
+    &__fig {
+        margin: 0 auto;
+        width: col(6, 12);
+    }
+
+    &__img {
+        width: 100%;
+    }
+
+    &__caption {
+        font-size: rem(12);
+        line-height: 130%;
+        margin-top: rem(8);
+    }
+
+    @include mq($until: l) {
+        &__fig {
+            width: col(10, 12);
+        }
+    }
+
+    @include mq($until: s) {
+        &__fig {
+            width: auto;
+        }
+    }
+}
diff --git a/components/image/view.blade.php b/components/image/view.blade.php
new file mode 100644
index 0000000..1444177
--- /dev/null
+++ b/components/image/view.blade.php
@@ -0,0 +1,9 @@
+<div {{ $attributes->bem('layout-image') }}>
+    <figure class="layout-image__fig">
+        <img class="layout-image__img" src="{{ $image }}" alt="{{ $alt }}">
+
+        @if($caption)
+            <figcaption class="layout-image__caption">{{ $caption }}</figcaption>
+        @endif
+    </figure>
+</div>
diff --git a/src/Components/Publishers/Image.php b/src/Components/Publishers/Image.php
new file mode 100644
index 0000000..2e2cebb
--- /dev/null
+++ b/src/Components/Publishers/Image.php
@@ -0,0 +1,54 @@
+<?php
+
+namespace Whitecube\LaravelPreset\Components\Publishers;
+
+use Whitecube\LaravelPreset\Components\File;
+use Whitecube\LaravelPreset\Components\FilesCollection;
+use Whitecube\LaravelPreset\Components\PublisherInterface;
+
+class Image implements PublisherInterface
+{
+    /**
+     * Get the component's displayable name.
+     */
+    public function label(): string
+    {
+        return 'Image';
+    }
+
+    /**
+     * Let the publisher prompt for eventual extra input
+     * and return a collection of publishable files.
+     */
+    public function handle(): FilesCollection
+    {
+        $style = File::makeFromStub(
+            stub: 'components/image/style.scss',
+            destination: resource_path('sass/parts/_layout-image.scss'),
+        );
+
+        $view = File::makeFromStub(
+            stub: 'components/image/view.blade.php',
+            destination: resource_path('views/components/layout-image.blade.php'),
+        );
+
+        $component = File::makeFromStub(
+            stub: 'components/image/Component.php',
+            destination: base_path('app/View/Components/LayoutImage.php'),
+        );
+
+        return FilesCollection::make([
+            $style,
+            $view,
+            $component,
+        ]);
+    }
+
+    /**
+     * Get the component's usage instructions
+     */
+    public function instructions(): ?string
+    {
+        return "1. Add `@import 'parts/layout-image';` to `resources/sass/app.scss`\r\n2. Use the blade component: `<x-layout-image :image=\"asset('img/money.png')\" alt=\"the money these components will give us !!!\" caption=\"all the money !!!\" />`";
+        }
+}

From 01c6cb1a17e6ea465a9933ef60f2c443a7d94462 Mon Sep 17 00:00:00 2001
From: Florence Randaxhe <43472197+FlorenceRandaxhe@users.noreply.github.com>
Date: Thu, 21 Aug 2025 15:05:28 +0200
Subject: [PATCH 2/5] fixed doc blocks

---
 components/image/Component.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/image/Component.php b/components/image/Component.php
index a3cbe75..25c6e51 100644
--- a/components/image/Component.php
+++ b/components/image/Component.php
@@ -12,17 +12,17 @@ class LayoutImage extends Component
     use HasBemClasses;
 
     /**
-     * The LayoutImage's title.
+     * The LayoutImage's image.
      */
     public string $image;
 
     /**
-     * The LayoutImage's image.
+     * The LayoutImage's image alt.
      */
     public string $alt;
 
     /**
-     * The LayoutImage's image alt.
+     * The LayoutImage's caption.
      */
     public string $caption;
 

From 8e0f78369e6bbfa66fbaf12fb53ec8554eab2e7d Mon Sep 17 00:00:00 2001
From: Florence Randaxhe <43472197+FlorenceRandaxhe@users.noreply.github.com>
Date: Thu, 21 Aug 2025 15:15:52 +0200
Subject: [PATCH 3/5] added layout

---
 components/image/Layout.php         | 72 +++++++++++++++++++++++++++++
 src/Components/Publishers/Image.php |  6 +++
 2 files changed, 78 insertions(+)
 create mode 100644 components/image/Layout.php

diff --git a/components/image/Layout.php b/components/image/Layout.php
new file mode 100644
index 0000000..f144ed1
--- /dev/null
+++ b/components/image/Layout.php
@@ -0,0 +1,72 @@
+<?php
+
+namespace App\Layouts;
+
+use Hiker\Cms\Layouts\BaseLayout;
+use Hiker\Components\DataList\DataList;
+use Hiker\Components\Editor\Step;
+use Hiker\Components\Fields\Image\Image as HikerImage;
+use Hiker\Components\Fields\Text\Text;
+use Hiker\Components\Image\Image as ImageComponent;
+use Hiker\Components\Text\Text as TextComponent;
+use Hiker\Tracks\Baggage;
+use Illuminate\Support\Facades\Storage;
+
+class Image extends BaseLayout
+{
+    /**
+     * The label of the layout
+     */
+    public function label(): string
+    {
+        return 'Image';
+    }
+
+    public function view(): string
+    {
+        return 'image';
+    }
+
+    /**
+     * The list of steps to display in the form
+     */
+    public function form(Baggage $bag): array
+    {
+        return [
+            Step::make(static::label(), 'edit_image_layout')
+                ->fields([
+                    HikerImage::make('Image', 'image')
+                        ->rules('required')
+                        ->disk('public'),
+
+                    Text::make('Caption', 'caption')
+                        ->rules('required'),
+
+                    Text::make('Alternative text', 'alt')
+                        ->rules('required')
+                        ->help('<strong>Hidden</strong>. An alternative text is used to give a description of the content of an image so that the visually impaired and search engines can understand the image.'),
+                ]),
+        ];
+    }
+
+    /**
+     * The layout's display components
+     */
+    public function display(): array
+    {
+        return [
+            DataList::make()
+                ->row('Image', ImageComponent::make(Storage::url($this->image))->aspectRatio('16/9'))
+                ->row('Caption', TextComponent::make($this->caption))
+                ->row('Alternative text', TextComponent::make($this->alt)),
+        ];
+    }
+
+    /**
+     * Extract the values from the bag to store them in the database.
+     */
+    public function fillAttributes(Baggage $bag): array
+    {
+        return $bag->only(['image', 'alt', 'caption']);
+    }
+}
diff --git a/src/Components/Publishers/Image.php b/src/Components/Publishers/Image.php
index 2e2cebb..0e33a6c 100644
--- a/src/Components/Publishers/Image.php
+++ b/src/Components/Publishers/Image.php
@@ -37,10 +37,16 @@ public function handle(): FilesCollection
             destination: base_path('app/View/Components/LayoutImage.php'),
         );
 
+        $layout = File::makeFromStub(
+            stub: 'components/image/Layout.php',
+            destination: base_path('app/Layouts/Image.php'),
+        );
+
         return FilesCollection::make([
             $style,
             $view,
             $component,
+            $layout
         ]);
     }
 

From b701972adca7735594253ac1d65de07540b08b46 Mon Sep 17 00:00:00 2001
From: Florence Randaxhe <43472197+FlorenceRandaxhe@users.noreply.github.com>
Date: Mon, 25 Aug 2025 11:02:51 +0200
Subject: [PATCH 4/5] Update Layout.php

---
 components/image/Layout.php | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/image/Layout.php b/components/image/Layout.php
index f144ed1..fc81aad 100644
--- a/components/image/Layout.php
+++ b/components/image/Layout.php
@@ -39,12 +39,12 @@ public function form(Baggage $bag): array
                         ->rules('required')
                         ->disk('public'),
 
-                    Text::make('Caption', 'caption')
-                        ->rules('required'),
-
                     Text::make('Alternative text', 'alt')
                         ->rules('required')
                         ->help('<strong>Hidden</strong>. An alternative text is used to give a description of the content of an image so that the visually impaired and search engines can understand the image.'),
+
+                    Text::make('Caption', 'caption')
+                        ->rules('required'),
                 ]),
         ];
     }
@@ -57,8 +57,8 @@ public function display(): array
         return [
             DataList::make()
                 ->row('Image', ImageComponent::make(Storage::url($this->image))->aspectRatio('16/9'))
-                ->row('Caption', TextComponent::make($this->caption))
-                ->row('Alternative text', TextComponent::make($this->alt)),
+                ->row('Alternative text', TextComponent::make($this->alt))
+                ->row('Caption', TextComponent::make($this->caption)),
         ];
     }
 

From 2d6950121577e31dc6d925642f14ae9cfed9ae86 Mon Sep 17 00:00:00 2001
From: Florence Randaxhe <43472197+FlorenceRandaxhe@users.noreply.github.com>
Date: Mon, 25 Aug 2025 11:07:30 +0200
Subject: [PATCH 5/5] Update style.scss

---
 components/image/style.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/components/image/style.scss b/components/image/style.scss
index a43a6e2..209fd18 100644
--- a/components/image/style.scss
+++ b/components/image/style.scss
@@ -1,5 +1,6 @@
 .layout-image {
     width: 100%;
+    margin: rem(32) 0;
 
     &__fig {
         margin: 0 auto;
@@ -13,7 +14,7 @@
     &__caption {
         font-size: rem(12);
         line-height: 130%;
-        margin-top: rem(8);
+        margin-top: rem(12);
     }
 
     @include mq($until: l) {