From c80c98158137dd46c7053b5aa13337333c5b7e98 Mon Sep 17 00:00:00 2001
From: indy koning <indy@justbetter.nl>
Date: Fri, 19 Dec 2025 10:45:52 +0100
Subject: [PATCH 1/3] Added external video support

---
 config/rapidez/models.php                     |  1 +
 resources/js/components/Product/Images.vue    |  8 ++-
 .../product/partials/gallery/popup.blade.php  | 18 ++++-
 .../product/partials/gallery/slider.blade.php | 25 +++++--
 .../partials/gallery/thumbnails.blade.php     | 15 ++--
 .../gallery/thumbnails/show-more.blade.php    |  8 +--
 .../views/product/partials/images.blade.php   |  2 +-
 src/Http/Controllers/ProductController.php    |  1 +
 src/Models/Product.php                        | 16 ++++-
 src/Models/ProductImage.php                   |  7 +-
 src/Models/ProductVideoValue.php              | 10 +++
 src/RapidezServiceProvider.php                | 72 +++++++++++++++++++
 12 files changed, 158 insertions(+), 25 deletions(-)
 create mode 100644 src/Models/ProductVideoValue.php

diff --git a/config/rapidez/models.php b/config/rapidez/models.php
index 864efc62c..d1575a9dc 100644
--- a/config/rapidez/models.php
+++ b/config/rapidez/models.php
@@ -15,6 +15,7 @@
     'option_value'              => Rapidez\Core\Models\OptionValue::class,
     'product_image'             => Rapidez\Core\Models\ProductImage::class,
     'product_image_value'       => Rapidez\Core\Models\ProductImageValue::class,
+    'product_video_value'       => Rapidez\Core\Models\ProductVideoValue::class,
     'product_link'              => Rapidez\Core\Models\ProductLink::class,
     'product_view'              => Rapidez\Core\Models\ProductView::class,
     'product_option'            => Rapidez\Core\Models\ProductOption::class,
diff --git a/resources/js/components/Product/Images.vue b/resources/js/components/Product/Images.vue
index 3318c00aa..9906a1d11 100644
--- a/resources/js/components/Product/Images.vue
+++ b/resources/js/components/Product/Images.vue
@@ -4,6 +4,7 @@ import { useEventListener } from '@vueuse/core'
 export default {
     data: () => ({
         images: config.product.images,
+        media: config.product.product_gallery,
         active: 0,
         zoomed: false,
         touchStartX: 0,
@@ -30,7 +31,8 @@ export default {
                     Object.values(window.config.product.super_attributes).filter((attribute) => attribute.update_image).length
                 ) {
                     self.images = simpleProduct.images
-                    self.active = Math.min(self.active, self.images.length - 1)
+                    self.media = simpleProduct.product_gallery
+                    self.active = Math.min(self.active, self.media.length - 1)
                 }
             })
         })
@@ -52,7 +54,7 @@ export default {
             if (e.key == 'ArrowLeft' && this.active > 0) {
                 // left
                 this.active--
-            } else if (e.key == 'ArrowRight' && this.active < this.images.length - 1) {
+            } else if (e.key == 'ArrowRight' && this.active < this.media.length - 1) {
                 // right
                 this.active++
             } else if (e.key == 'Escape') {
@@ -77,7 +79,7 @@ export default {
                 return
             }
 
-            if (distance < 0 && this.active < this.images.length - 1) {
+            if (distance < 0 && this.active < this.media.length - 1) {
                 this.change(this.active + 1)
             } else if (distance > 0 && this.active > 0) {
                 this.change(this.active - 1)
diff --git a/resources/views/product/partials/gallery/popup.blade.php b/resources/views/product/partials/gallery/popup.blade.php
index 1959bbaec..642ff12f1 100644
--- a/resources/views/product/partials/gallery/popup.blade.php
+++ b/resources/views/product/partials/gallery/popup.blade.php
@@ -1,11 +1,23 @@
-<div v-if="images.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup" v-cloak>
+<div v-if="media.length && zoomed" class="fixed inset-0 bg-white cursor-zoom-out flex z-popup" v-cloak>
     <div class="flex flex-1 items-center justify-center" v-on:click.prevent="toggleZoom">
         <img
-            :src="config.media_url + '/catalog/product' + images[active]"
+            v-if="media[active].media_type === 'image'"
+            :src="config.media_url + '/catalog/product' + media[active].image"
             alt="{{ $product->name }}"
             class="object-contain max-h-full mx-auto block"
             loading="lazy"
         />
+        <iframe
+            v-else-if="media[active].media_type === 'external-video'"
+            class="h-[calc(100%-200px)] w-[calc(100%-200px)]"
+            :src="media[active].video_url"
+            allow="autoplay"
+            width="100%"
+            height="100%"
+            frameborder="0"
+            loading="lazy"
+        >
+        </iframe>
         <div class="z-popup-actions pointer-events-none fixed top-3 right-3">
             <x-heroicon-o-x-mark class="size-6" />
         </div>
@@ -13,7 +25,7 @@ class="object-contain max-h-full mx-auto block"
     <button class="z-popup-actions top-1/2 left-3 -translate-y-1/2 absolute" v-if="active" v-on:click="change(active-1)" aria-label="@lang('Prev')">
         <x-heroicon-o-chevron-left class="size-8 text-muted" />
     </button>
-    <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != images.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
+    <button class="z-popup-actions top-1/2 right-3 -translate-y-1/2 absolute" v-if="active != media.length-1" v-on:click="change(active+1)" aria-label="@lang('Next')">
         <x-heroicon-o-chevron-right class="size-8 text-muted" />
     </button>
 </div>
diff --git a/resources/views/product/partials/gallery/slider.blade.php b/resources/views/product/partials/gallery/slider.blade.php
index 018e951a4..8034524c9 100644
--- a/resources/views/product/partials/gallery/slider.blade.php
+++ b/resources/views/product/partials/gallery/slider.blade.php
@@ -1,13 +1,14 @@
-<div class="relative" v-if="images.length">
+<div class="relative" v-if="media.length">
     <a
         v-on:click.prevent="toggleZoom"
-        v-bind:href="config.media_url + '/catalog/product' + images[active]"
+        v-bind:href="config.media_url + '/catalog/product' + media[active].image"
         class="flex h-[440px] cursor-zoom-in items-center justify-center rounded border p-5"
     >
         <img
             {{-- src should always be above v-bind:src --}}
-            src="{{ url('/storage/'.config('rapidez.store').'/resizes/400/magento/catalog/product'.Arr::first($selectedChild->images).'.webp') }}"
-            v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + images[active] + '.webp' | url"
+            v-if="media[active].media_type === 'image'"
+            v-bind:src="window.url('/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + media[active].image + '.webp')"
+            src="{{ url('/storage/'.config('rapidez.store').'/resizes/400/magento/catalog/product'.Arr::first($selectedChild->product_gallery)['image'].'.webp') }}"
             alt="{{ $product->name }}"
             class="max-h-full object-contain"
             style="view-transition-name: image-{{ $product->sku }}"
@@ -15,13 +16,25 @@ class="max-h-full object-contain"
             width="400"
             height="400"
         />
+        <iframe
+            v-else-if="media[active].media_type === 'external-video'"
+            v-cloak
+            class="h-full w-full"
+            :src="media[active].video_url"
+            allow="autoplay"
+            width="100%"
+            height="100%"
+            frameborder="0"
+            loading="lazy"
+        >
+        </iframe>
     </a>
 
-    @if (count($selectedChild->images ?? []) > 1)
+    @if (count($selectedChild->product_gallery ?? []) > 1)
         <button v-if="active" v-on:click="change(active-1)" class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" aria-label="@lang('Prev')" v-cloak>
             <x-heroicon-o-chevron-left class="size-8 text" />
         </button>
-        <button v-if="active != images.length-1" v-on:click="change(active+1)" class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" aria-label="@lang('Next')">
+        <button v-if="active != media.length-1" v-on:click="change(active+1)" class="z-10 top-1/2 right-3 -translate-y-1/2 absolute" aria-label="@lang('Next')">
             <x-heroicon-o-chevron-right class="size-8 text" />
         </button>
     @endif
diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index a9595c6b2..7760f2dba 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -10,8 +10,8 @@
     @for ($imageId = 0; $imageId < max($breakpoints); $imageId++)
         <button
             @attributes([
-                'v-cloak' => !($imageId < count($selectedChild->images) && count($selectedChild->images) > 1),
-                'v-if' => $imageId . ' < images.length && images.length > 1',
+                'v-cloak' => !($imageId < count($selectedChild->product_gallery) && count($selectedChild->product_gallery) > 1),
+                'v-if' => $imageId . ' < media.length && media.length > 1',
             ])
             @class([
                 'max-w-24 relative flex aspect-square flex-1 items-center justify-center overflow-hidden rounded border bg-white p-1.5 outline-primary transition-all',
@@ -30,11 +30,14 @@
         >
             <img
                 {{-- src should always be above v-bind:src --}}
-                @if ($imageId < count($selectedChild->images))
-                    src="{{ url('/storage/'.config('rapidez.store').'/resizes/80x80/magento/catalog/product'.$selectedChild->images[$imageId].'.webp') }}"
+                @if ($imageId < count($selectedChild->product_gallery))
+                    @if ($selectedChild->product_gallery[$imageId]['media_type'] === 'external-video')
+                        src="{{ config('rapidez.media_url') }}/catalog/product{{ $selectedChild->product_gallery[$imageId]['image'] }}"
+                    @else
+                        src="{{ url('/storage/'.config('rapidez.store').'/resizes/80x80/magento/catalog/product'.$selectedChild->product_gallery[$imageId]['image'].'.webp') }}"
+                    @endif
                 @endif
-                v-bind:src="'/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + images[{{ $imageId }}] + '.webp' | url"
-                alt="{{ $product->name }}"
+                v-bind:src="window.url(media[{{ $imageId }}].media_type === 'external-video' ? window.config.media_url + '/catalog/product' + media[{{ $imageId }}].image : '/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + media[{{ $imageId }}].image + '.webp')"                alt="{{ $product->name }}"
                 class="block max-h-full w-auto object-contain"
                 width="80"
                 height="80"
diff --git a/resources/views/product/partials/gallery/thumbnails/show-more.blade.php b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
index 72ca15a8e..de3a3cac4 100644
--- a/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
@@ -1,8 +1,8 @@
 {{-- This component shows an overlay on the last shown thumbnail if there are more thumbnails after it. --}}
 
 <div @attributes([
-    'v-cloak' => !(count($selectedChild->images) - $imageId - 1),
-    'v-if' => 'images.length - ' . $imageId . ' - 1',
+    'v-cloak' => !(count($selectedChild->product_gallery) - $imageId - 1),
+    'v-if' => 'media.length - ' . $imageId . ' - 1',
 ])>
     <span
         @class([
@@ -17,9 +17,9 @@
     >
         <span
             class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-md"
-            v-text="'+' + (images.length - {{ $imageId }} - 1)"
+            v-text="'+' + (media.length - {{ $imageId }} - 1)"
         >
-            +{{ count($selectedChild->images) - $imageId - 1 }}
+            +{{ count($selectedChild->product_gallery) - $imageId - 1 }}
         </span>
     </span>
 </div>
diff --git a/resources/views/product/partials/images.blade.php b/resources/views/product/partials/images.blade.php
index 2b781038c..a9067ac13 100644
--- a/resources/views/product/partials/images.blade.php
+++ b/resources/views/product/partials/images.blade.php
@@ -1,6 +1,6 @@
 <div class="relative flex flex-col flex-1">
     <images>
-        <div class="flex-1" slot-scope="{ images, active, zoomed, toggleZoom, change }">
+        <div class="flex-1" slot-scope="{ images, media, active, zoomed, toggleZoom, change }">
             <div class="sticky top-5 bg-white">
                 @include('rapidez::product.partials.gallery.slider')
                 @include('rapidez::product.partials.gallery.thumbnails')
diff --git a/src/Http/Controllers/ProductController.php b/src/Http/Controllers/ProductController.php
index cc11e2460..47dc2b277 100644
--- a/src/Http/Controllers/ProductController.php
+++ b/src/Http/Controllers/ProductController.php
@@ -26,6 +26,7 @@ public function show(int $productId)
             'price',
             'special_price',
             'images',
+            'product_gallery',
             'url',
             'min_sale_qty',
             'max_sale_qty',
diff --git a/src/Models/Product.php b/src/Models/Product.php
index 1d1de2a09..e1fccf9ed 100644
--- a/src/Models/Product.php
+++ b/src/Models/Product.php
@@ -8,6 +8,7 @@
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Illuminate\Database\Eloquent\Relations\HasOne;
 use Illuminate\Database\Eloquent\Relations\HasOneThrough;
+use Illuminate\Support\Str;
 use Rapidez\Core\Casts\Children;
 use Rapidez\Core\Casts\CommaSeparatedToArray;
 use Rapidez\Core\Casts\CommaSeparatedToIntegerArray;
@@ -49,7 +50,7 @@ class Product extends Model
         self::CREATED_AT => 'datetime',
     ];
 
-    protected $appends = ['url'];
+    protected $appends = ['url', 'product_gallery'];
 
     protected static function booting(): void
     {
@@ -234,6 +235,19 @@ protected function url(): Attribute
         );
     }
 
+    protected function productGallery(): Attribute
+    {
+        return Attribute::get(
+            fn (): array => $this->gallery->sortBy('productImageValue.position')->map(function (ProductImage $value) {
+                return [
+                    'media_type' => $value->media_type,
+                    'image'      => $value->value,
+                    'video_url'  => isset($value->video) ? Str::embedUrl($value->video->url) : null,
+                ];
+            })->values()->toArray()
+        );
+    }
+
     protected function images(): Attribute
     {
         return Attribute::make(
diff --git a/src/Models/ProductImage.php b/src/Models/ProductImage.php
index 779539ed1..25242a275 100644
--- a/src/Models/ProductImage.php
+++ b/src/Models/ProductImage.php
@@ -11,7 +11,7 @@ class ProductImage extends Model
 
     protected $primaryKey = 'value_id';
 
-    protected $with = ['productImageValue'];
+    protected $with = ['productImageValue', 'video'];
 
     protected static function booted(): void
     {
@@ -31,4 +31,9 @@ public function productImageValue(): BelongsTo
     {
         return $this->belongsTo(config('rapidez.models.product_image_value'), 'value_id', 'value_id');
     }
+
+    public function video(): BelongsTo
+    {
+        return $this->belongsTo(config('rapidez.models.product_video_value'), 'value_id', 'value_id');
+    }
 }
diff --git a/src/Models/ProductVideoValue.php b/src/Models/ProductVideoValue.php
new file mode 100644
index 000000000..66bf8cae5
--- /dev/null
+++ b/src/Models/ProductVideoValue.php
@@ -0,0 +1,10 @@
+<?php
+
+namespace Rapidez\Core\Models;
+
+class ProductVideoValue extends Model
+{
+    protected $table = 'catalog_product_entity_media_gallery_value_video';
+
+    protected $primaryKey = 'value_id';
+}
diff --git a/src/RapidezServiceProvider.php b/src/RapidezServiceProvider.php
index 18000ed0f..f9f67a3c6 100644
--- a/src/RapidezServiceProvider.php
+++ b/src/RapidezServiceProvider.php
@@ -301,6 +301,78 @@ function ($filename) use ($manifest) {
             );
         });
 
+        Str::macro(
+            'embedUrl',
+            function ($url) {
+                if (Str::contains($url, 'vimeo')) {
+                    $url = str_replace('/vimeo.com', '/player.vimeo.com/video', $url);
+
+                    // Handle private vimeo urls.
+                    $hash = null;
+                    if (! Str::contains($url, 'progressive_redirect') && Str::substrCount($url, '/') > 4) {
+                        $hash = Str::afterLast($url, '/');
+                        $url = Str::beforeLast($url, '/');
+
+                        if (Str::contains($hash, '?')) {
+                            $url .= '?' . Str::after($hash, '?');
+                            $hash = Str::before($hash, '?');
+                        }
+                    }
+
+                    $paramsToAdd = '?dnt=1&watch_full_video=false&vimeo_logo=false&speed=false&chromecast=false&byline=false&badge=false&ask_ai=false&airplay=false';
+                    if ($hash) {
+                        $paramsToAdd .= '&h=' . $hash;
+                    }
+
+                    if (Str::contains($url, '?')) {
+                        $url = str_replace('?', $paramsToAdd . '&', $url);
+                    } else {
+                        $url .= $paramsToAdd;
+                    }
+
+                    return $url;
+                }
+
+                if (Str::contains($url, 'youtu.be')) {
+                    $url = str_replace('youtu.be', 'www.youtube.com/embed', $url);
+
+                    // Check for start at point and replace it with correct parameter.
+                    if (Str::contains($url, '?t=')) {
+                        $url = str_replace('?t=', '?start=', $url);
+                    }
+                }
+
+                if (Str::contains($url, 'youtube.com/watch?v=')) {
+                    $url = str_replace('watch?v=', 'embed/', $url);
+
+                    if (Str::contains($url, '&t=')) {
+                        $url = str_replace('&t=', '?start=', $url);
+                    }
+                }
+
+                if (Str::contains($url, 'youtube.com/shorts/')) {
+                    $url = str_replace('shorts/', 'embed/', $url);
+                }
+
+                if (Str::contains($url, 'youtube.com')) {
+                    $url = str_replace('youtube.com', 'youtube-nocookie.com', $url);
+                }
+
+                // This avoids SSL issues when using the non-www version
+                if (Str::contains($url, '//youtube-nocookie.com')) {
+                    $url = str_replace('//youtube-nocookie.com', '//www.youtube-nocookie.com', $url);
+                }
+
+                $url .= '&fs=0';
+
+                if (Str::contains($url, '&') && ! Str::contains($url, '?')) {
+                    $url = Str::replaceFirst('&', '?', $url);
+                }
+
+                return $url;
+            }
+        );
+
         return $this;
     }
 

From de0e377aab96022ade55ee2c9560dd0f05062e45 Mon Sep 17 00:00:00 2001
From: indykoning <15870933+indykoning@users.noreply.github.com>
Date: Mon, 12 Jan 2026 14:32:02 +0100
Subject: [PATCH 2/3] Rename productGallery to media

---
 resources/js/components/Product/Images.vue             |  4 ++--
 .../views/product/partials/gallery/slider.blade.php    |  4 ++--
 .../product/partials/gallery/thumbnails.blade.php      | 10 +++++-----
 .../partials/gallery/thumbnails/show-more.blade.php    |  4 ++--
 src/Http/Controllers/ProductController.php             |  2 +-
 src/Models/Product.php                                 |  4 ++--
 6 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/resources/js/components/Product/Images.vue b/resources/js/components/Product/Images.vue
index 9906a1d11..06152efbe 100644
--- a/resources/js/components/Product/Images.vue
+++ b/resources/js/components/Product/Images.vue
@@ -4,7 +4,7 @@ import { useEventListener } from '@vueuse/core'
 export default {
     data: () => ({
         images: config.product.images,
-        media: config.product.product_gallery,
+        media: config.product.media,
         active: 0,
         zoomed: false,
         touchStartX: 0,
@@ -31,7 +31,7 @@ export default {
                     Object.values(window.config.product.super_attributes).filter((attribute) => attribute.update_image).length
                 ) {
                     self.images = simpleProduct.images
-                    self.media = simpleProduct.product_gallery
+                    self.media = simpleProduct.media
                     self.active = Math.min(self.active, self.media.length - 1)
                 }
             })
diff --git a/resources/views/product/partials/gallery/slider.blade.php b/resources/views/product/partials/gallery/slider.blade.php
index 8034524c9..32246bd52 100644
--- a/resources/views/product/partials/gallery/slider.blade.php
+++ b/resources/views/product/partials/gallery/slider.blade.php
@@ -8,7 +8,7 @@ class="flex h-[440px] cursor-zoom-in items-center justify-center rounded border
             {{-- src should always be above v-bind:src --}}
             v-if="media[active].media_type === 'image'"
             v-bind:src="window.url('/storage/{{ config('rapidez.store') }}/resizes/400/magento/catalog/product' + media[active].image + '.webp')"
-            src="{{ url('/storage/'.config('rapidez.store').'/resizes/400/magento/catalog/product'.Arr::first($selectedChild->product_gallery)['image'].'.webp') }}"
+            src="{{ url('/storage/'.config('rapidez.store').'/resizes/400/magento/catalog/product'.Arr::first($selectedChild->media)['image'].'.webp') }}"
             alt="{{ $product->name }}"
             class="max-h-full object-contain"
             style="view-transition-name: image-{{ $product->sku }}"
@@ -30,7 +30,7 @@ class="h-full w-full"
         </iframe>
     </a>
 
-    @if (count($selectedChild->product_gallery ?? []) > 1)
+    @if (count($selectedChild->media ?? []) > 1)
         <button v-if="active" v-on:click="change(active-1)" class="z-10 top-1/2 left-3 -translate-y-1/2 absolute" aria-label="@lang('Prev')" v-cloak>
             <x-heroicon-o-chevron-left class="size-8 text" />
         </button>
diff --git a/resources/views/product/partials/gallery/thumbnails.blade.php b/resources/views/product/partials/gallery/thumbnails.blade.php
index 7760f2dba..f6095914c 100644
--- a/resources/views/product/partials/gallery/thumbnails.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails.blade.php
@@ -10,7 +10,7 @@
     @for ($imageId = 0; $imageId < max($breakpoints); $imageId++)
         <button
             @attributes([
-                'v-cloak' => !($imageId < count($selectedChild->product_gallery) && count($selectedChild->product_gallery) > 1),
+                'v-cloak' => !($imageId < count($selectedChild->media) && count($selectedChild->media) > 1),
                 'v-if' => $imageId . ' < media.length && media.length > 1',
             ])
             @class([
@@ -30,11 +30,11 @@
         >
             <img
                 {{-- src should always be above v-bind:src --}}
-                @if ($imageId < count($selectedChild->product_gallery))
-                    @if ($selectedChild->product_gallery[$imageId]['media_type'] === 'external-video')
-                        src="{{ config('rapidez.media_url') }}/catalog/product{{ $selectedChild->product_gallery[$imageId]['image'] }}"
+                @if ($imageId < count($selectedChild->media))
+                    @if ($selectedChild->media[$imageId]['media_type'] === 'external-video')
+                        src="{{ config('rapidez.media_url') }}/catalog/product{{ $selectedChild->media[$imageId]['image'] }}"
                     @else
-                        src="{{ url('/storage/'.config('rapidez.store').'/resizes/80x80/magento/catalog/product'.$selectedChild->product_gallery[$imageId]['image'].'.webp') }}"
+                        src="{{ url('/storage/'.config('rapidez.store').'/resizes/80x80/magento/catalog/product'.$selectedChild->media[$imageId]['image'].'.webp') }}"
                     @endif
                 @endif
                 v-bind:src="window.url(media[{{ $imageId }}].media_type === 'external-video' ? window.config.media_url + '/catalog/product' + media[{{ $imageId }}].image : '/storage/{{ config('rapidez.store') }}/resizes/80x80/magento/catalog/product' + media[{{ $imageId }}].image + '.webp')"                alt="{{ $product->name }}"
diff --git a/resources/views/product/partials/gallery/thumbnails/show-more.blade.php b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
index de3a3cac4..65b2e57c9 100644
--- a/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
+++ b/resources/views/product/partials/gallery/thumbnails/show-more.blade.php
@@ -1,7 +1,7 @@
 {{-- This component shows an overlay on the last shown thumbnail if there are more thumbnails after it. --}}
 
 <div @attributes([
-    'v-cloak' => !(count($selectedChild->product_gallery) - $imageId - 1),
+    'v-cloak' => !(count($selectedChild->media) - $imageId - 1),
     'v-if' => 'media.length - ' . $imageId . ' - 1',
 ])>
     <span
@@ -19,7 +19,7 @@
             class="size-9 flex items-center justify-center rounded-full bg-white text-sm font-bold text shadow-md"
             v-text="'+' + (media.length - {{ $imageId }} - 1)"
         >
-            +{{ count($selectedChild->product_gallery) - $imageId - 1 }}
+            +{{ count($selectedChild->media) - $imageId - 1 }}
         </span>
     </span>
 </div>
diff --git a/src/Http/Controllers/ProductController.php b/src/Http/Controllers/ProductController.php
index 47dc2b277..98a85b786 100644
--- a/src/Http/Controllers/ProductController.php
+++ b/src/Http/Controllers/ProductController.php
@@ -26,7 +26,7 @@ public function show(int $productId)
             'price',
             'special_price',
             'images',
-            'product_gallery',
+            'media',
             'url',
             'min_sale_qty',
             'max_sale_qty',
diff --git a/src/Models/Product.php b/src/Models/Product.php
index e1fccf9ed..73ca7f602 100644
--- a/src/Models/Product.php
+++ b/src/Models/Product.php
@@ -50,7 +50,7 @@ class Product extends Model
         self::CREATED_AT => 'datetime',
     ];
 
-    protected $appends = ['url', 'product_gallery'];
+    protected $appends = ['url', 'media'];
 
     protected static function booting(): void
     {
@@ -235,7 +235,7 @@ protected function url(): Attribute
         );
     }
 
-    protected function productGallery(): Attribute
+    protected function media(): Attribute
     {
         return Attribute::get(
             fn (): array => $this->gallery->sortBy('productImageValue.position')->map(function (ProductImage $value) {

From 7e4888e5afbe8a3ad097105f1491f8066f0ef799 Mon Sep 17 00:00:00 2001
From: indykoning <15870933+indykoning@users.noreply.github.com>
Date: Tue, 13 Jan 2026 14:48:47 +0100
Subject: [PATCH 3/3] Ignore embedurl warning

---
 src/Models/Product.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Models/Product.php b/src/Models/Product.php
index 73ca7f602..5f24b233a 100644
--- a/src/Models/Product.php
+++ b/src/Models/Product.php
@@ -242,7 +242,7 @@ protected function media(): Attribute
                 return [
                     'media_type' => $value->media_type,
                     'image'      => $value->value,
-                    'video_url'  => isset($value->video) ? Str::embedUrl($value->video->url) : null,
+                    'video_url'  => isset($value->video) ? Str::embedUrl($value->video->url) : null, // @phpstan-ignore-line
                 ];
             })->values()->toArray()
         );