Use recipe image as background

app/Http/Controllers/RecipeController.php

@@ -61,7 +61,15 @@ class RecipeController extends Controller
      */
     public function show(Recipe $recipe): View
     {
-        return view('recipes.show')->with('recipe', $recipe);
+        // Set background image if media has been added.
+        $bg_image = NULL;
+        if ($recipe->hasMedia() && $recipe->getFirstMedia()->hasGeneratedConversion('header')) {
+            $bg_image = $recipe->getFirstMediaUrl('default', 'header');
+        }
+
+        return view('recipes.show')
+            ->with('recipe', $recipe)
+            ->with('bg_image', $bg_image);
     }
 
     /**

app/Models/Recipe.php

@@ -11,6 +11,7 @@ use Illuminate\Database\Eloquent\Factories\HasFactory;
 use Illuminate\Database\Eloquent\Model;
 use Illuminate\Database\Eloquent\Relations\HasMany;
 use Laravel\Scout\Searchable;
+use Spatie\Image\Manipulations;
 use Spatie\MediaLibrary\HasMedia;
 use Spatie\MediaLibrary\InteractsWithMedia;
 use Spatie\MediaLibrary\MediaCollections\Models\Media;
@@ -66,6 +67,8 @@ use Spatie\Tags\HasTags;
  * @method static \Illuminate\Database\Eloquent\Builder|Recipe withUniqueSlugConstraints(\Illuminate\Database\Eloquent\Model $model, string $attribute, array $config, string $slug)
  * @property string|null $description_delta
  * @method static \Illuminate\Database\Eloquent\Builder|Recipe whereDescriptionDelta($value)
+ * @property-read \Spatie\MediaLibrary\MediaCollections\Models\Collections\MediaCollection|Media[] $media
+ * @property-read int|null $media_count
  */
 final class Recipe extends Model implements HasMedia
 {
@@ -205,7 +208,13 @@ final class Recipe extends Model implements HasMedia
         $this->addMediaConversion('preview')
             ->width(368)
             ->height(232)
-            ->sharpen(10);
+            ->sharpen(10)
+            ->optimize();
+
+        $this->addMediaConversion('header')
+            ->fit(Manipulations::FIT_CROP, 1600, 900)
+            ->sharpen(10)
+            ->optimize();
     }
 
 }

app/View/Components/AppLayout.php

@@ -2,16 +2,15 @@
 
 namespace App\View\Components;
 
+use Illuminate\Contracts\View\View;
 use Illuminate\View\Component;
 
 class AppLayout extends Component
 {
     /**
      * Get the view / contents that represents the component.
-     *
-     * @return \Illuminate\View\View
      */
-    public function render()
+    public function render(): View
     {
         return view('layouts.app');
     }

app/View/Components/GuestLayout.php

@@ -2,16 +2,15 @@
 
 namespace App\View\Components;
 
+use Illuminate\Contracts\View\View;
 use Illuminate\View\Component;
 
 class GuestLayout extends Component
 {
     /**
      * Get the view / contents that represents the component.
-     *
-     * @return \Illuminate\View\View
      */
-    public function render()
+    public function render(): View
     {
         return view('layouts.guest');
     }

resources/views/layouts/app.blade.php

@@ -34,7 +34,11 @@
         </header>
 
         <!-- Page Content -->
-        <main>
+        @isset($bg_image)
+            <main class="bg-cover bg-no-repeat bg-top bg-fixed bg-clip-border" style="background-image: url('{{ $bg_image }}')">
+        @else
+            <main>
+        @endisset
             @if(session()->has('message'))
                 <div class="bg-green-200 p-2 mb-2">
                     {{ session()->get('message') }}
@@ -51,8 +55,8 @@
                 </div>
             @endif
 
-            <div class="pt-6 max-w-7xl mx-auto sm:px-6 lg:px-8">
-                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
+            <div class="{{ isset($bg_image) ? 'pt-64 md:pt-32' : 'pt-6' }} max-w-7xl mx-auto sm:px-6 lg:px-8">
+                <div class="bg-white {{ isset($bg_image) ? 'bg-opacity-95' : '' }} overflow-hidden shadow-sm sm:rounded-lg">
                     <article class="p-6 border-b border-gray-200">
                         {{ $slot }}
                     </article>

resources/views/recipes/show.blade.php

@@ -1,5 +1,8 @@
 <x-app-layout>
     <x-slot name="title">{{ $recipe->name }}</x-slot>
+    @if(!empty($bg_image))
+        <x-slot name="bg_image">{{ $bg_image }}</x-slot>
+    @endisset
     <x-slot name="header">
         <h1 class="font-semibold text-xl text-gray-800 leading-tight flex flex-auto">
             {{ $recipe->name }}