fix: adding ability to update artist bg

site/app/Livewire/Artist/Avatar.php

@@ -36,6 +36,10 @@ public function save()
         Image::load($disk->path($avatar))
             ->manualCrop($this->width, $this->height, $this->x, $this->y)
             ->save();
+        Image::load($disk->path($avatar))
+            ->width(350)
+            ->height(350)
+            ->save();
         ImageOptimizer::optimize($disk->path($avatar));
         auth()->user()->artists()->first()->update(compact('avatar'));
         $this->avatar = null;

site/app/Livewire/Artist/Header.php

@@ -0,0 +1,48 @@
+<?php
+
+namespace App\Livewire\Artist;
+
+use Livewire\Component;
+use Livewire\WithFileUploads;
+use Spatie\Image\Image;
+use Intervention\Image\Facades\Image as InterventionImage;
+use ImageOptimizer;
+use Illuminate\Support\Facades\Storage;
+use Illuminate\Validation\Rules\File;
+use Illuminate\Http\RedirectResponse;
+use Livewire\Attributes\Validate;
+
+class Header extends Component
+{
+    use WithFileUploads;
+
+    public $header;
+
+    public $x;
+    public $y;
+    public $width;
+    public $height;
+
+    public function render()
+    {
+        return view('livewire.artist.header');
+    }
+
+    public function save()
+    {
+        $disk = Storage::disk('static');
+        $header = $this->header->store('artist_headers', 'static');
+
+        Image::load($disk->path($header))
+            ->manualCrop($this->width, $this->height, $this->x, $this->y)
+            ->save();
+        Image::load($disk->path($header))
+            ->width(270)
+            ->height(185)
+            ->save();
+        ImageOptimizer::optimize($disk->path($header));
+        auth()->user()->artists()->first()->update(compact('header'));
+        $this->header = null;
+        return redirect(request()->header('Referer'));
+    }
+}

site/app/Models/Artist.php

@@ -64,9 +64,17 @@ public function wallets()
     public function avatar()
     {
         if (!$this->avatar) {
-            return config('app.static_asset_url') . '/' . ('avatars/default_avatar_male.svg');
+            return config('app.static_asset_url') . '/avatars/default_avatar_male.svg';
         }
         return config('app.static_asset_url') . '/' . $this->avatar;
     }
 
+    public function header()
+    {
+        if (!$this->header) {
+            return config('app.static_asset_url') . '/artist_headers/default_artist_banner.png';
+        }
+        return config('app.static_asset_url') . '/' . $this->header;
+    }
+
 }

site/resources/views/livewire/artist/avatar.blade.php

@@ -21,7 +21,7 @@ class="d-flex flex-column justify-content-center"
             x-init="setUp"
         >
             <div class="d-flex justify-content-center text-center mt-4 mb-4">
-                <img id="avatar" src="{{ $avatar->temporaryUrl() }}" style="width: 100%; max-width: 100%;">
+                <img id="avatar" src="{{ $avatar->temporaryUrl() }}" style="width: 100%; max-width: 350px; margin:5px auto;">
             </div>
             <div class="d-flex justify-content-end text-end mt-4 mb-4">
                 <button type="submit" class="btn btn-gradient btn-small">
@@ -32,7 +32,7 @@ class="d-flex flex-column justify-content-center"
     @else
         <div class="mb-2 mx-2">
             <label for="avatar" style="width: 100%;">
-                <img src="{{ auth()->user()->artists()->first()->avatar() }}" style="width: 100%; max-width: 100%;">
+                <img src="{{ auth()->user()->artists()->first()->avatar() }}" style="width: 100%; max-width: 350px;">
             </label>
         </div>
         <div class="mb-2 mx-2">

site/resources/views/livewire/artist/header.blade.php

@@ -0,0 +1,42 @@
+<form wire:submit.prevent="save">
+    @if($header)
+        <div
+            class="d-flex flex-column justify-content-center"
+            wire:ignore
+            x-data="{
+                setUp() {
+                    const cropper = new Cropper(document.getElementById('header'), {
+                        aspectRatio: 1.46,
+                        autoCropArea: 1,
+                        viewMode: 1,
+                        crop (event) {
+                            @this.set('x', event.detail.x)
+                            @this.set('y', event.detail.y)
+                            @this.set('width', event.detail.width)
+                            @this.set('height', event.detail.height)
+                        }
+                    })
+                }
+            }"
+            x-init="setUp"
+        >
+            <div class="d-flex justify-content-center text-center mt-4 mb-4">
+                <img id="header" src="{{ $header->temporaryUrl() }}" style="width: 100%; max-width: 270px; margin:5px auto;">
+            </div>
+            <div class="d-flex justify-content-end text-end mt-4 mb-4">
+                <button type="submit" class="btn btn-gradient btn-small">
+                    <span>Save Profile Header</span>
+                </button>
+            </div>
+        </div>
+    @else
+        <div class="mb-2 mx-2">
+            <label for="header" style="width: 100%;">
+                <img src="{{ auth()->user()->artists()->first()->header() }}" style="width: 100%; max-width: 270px; margin:5px auto;">
+            </label>
+        </div>
+        <div class="mb-2 mx-2">
+            <input type="file" name="header" id="header" class="sr-only" wire:model="header">
+        </div>
+    @endif
+</form>

site/resources/views/partials/nav/head.blade.php

@@ -77,9 +77,6 @@
                     </ul>
                 </li>
                 @endif
-                @if (auth()->user())
-                <livewire:themeswitch />
-                @else
                 <li>
                     <label class="theme-switcher-label d-flex" for="theme-switcher">
                         <input type="checkbox" class="theme-switcher" id="theme-switcher">
@@ -89,7 +86,6 @@
                         </div>
                     </label>
                 </li>
-                @endif
                 <li class="setting-option mobile-menu-bar d-block d-xl-none">
                     <button class="hamburger-button">
                         <i class="ri-menu-2-fill"></i>
@@ -121,7 +117,19 @@
             </div>
         </div>
         <nav>
+            <ul class="mainmenu">
             @include('partials/nav/main')
+            <li class="has-dropdown has-menu-child-item">
+                <a {!! request()->is(['podcasts', 'podcasts/*']) ? 'class="active"' : '' !!}>Podcasts</a>
+                <ul class="submenu">
+                    @foreach ($navPodcasts as $cast)
+                        <li>
+                            <a href="/podcasts/{{ $cast->slug }}">{{ $cast->name }}</a>
+                        </li>
+                    @endforeach
+                </ul>
+            </li>
+            </ul>
         </nav>
     </div>
 </div>

site/resources/views/partials/nav/main.blade.php

@@ -5,7 +5,7 @@
     <a {!! request()->is(['artworks', 'artworks/*']) ? 'class="active"' : '' !!} href="/artworks">Submitted</a>
 </li>
 <li>
-    <a {!! request()->is(['artists', 'artists/*']) ? 'class="active"' : '' !!} href="/artists">Artists</a>
+    <a {!! request()->is(['artists', 'artists/*', 'artist', 'artist/*', 'profile']) ? 'class="active"' : '' !!} href="/artists">Artists</a>
 </li>
 @if (auth()->user())
 <li>

site/resources/views/profile/edit.blade.php

@@ -27,6 +27,9 @@
                 <div class="col-xl-4 col-lg-12 mb-4">
                     @include('profile.partials.update-avatar-form')
                 </div>
+                <div class="col-xl-4 col-lg-12 mb-4">
+                    @include('profile.partials.update-header-form')
+                </div>
             </div>
         </div>
     </section>

site/resources/views/profile/partials/single-artist-card.blade.php

@@ -1,6 +1,6 @@
 <div class="single-author profile flex-stretch">
     <div class="thumb">
-        <img src="{{ Vite::asset($artist->header ?? 'resources/img/artist-dark-banner-default.png') }}" alt="{{ $artist->name }}'s Cover Photo" />
+        <img src="{{ $artist->header() }}" alt="{{ $artist->name }}'s Cover Photo" />
     </div>
     <div class="content">
         <a href="/artist/{{ $artist->slug }}"><img class="author-thumb avatar_img" src="{{ $artist->avatar() }}"

site/resources/views/profile/partials/update-avatar-form.blade.php

@@ -1,10 +1,11 @@
-<div class="authbox">
+<div class="authbox" style="min-height: 100%;">
     <div class="row mt-4 gutter-2">
         <div class="col">
             <div class="signin-content">
                 <div class="mb-6">
-                    <h2 class="mb-2">{{ __('Update Artist Avatar') }}</h2>
+                    <h3 class="mb-2">{{ __('Update Artist Avatar') }}</h3>
                     <p class="normal">{{ __('This avatar will be used on the artist gallery and artist profile page.') }}</p>
+                    <p class="small">Be patient, it takes a moment to process.</p>
                 </div>
             </div>
         </div>

site/resources/views/profile/partials/update-header-form.blade.php

@@ -0,0 +1,18 @@
+<div class="authbox" style="min-height: 100%;">
+    <div class="row mt-4 gutter-2">
+        <div class="col">
+            <div class="signin-content">
+                <div class="mb-6">
+                    <h3 class="mb-2">{{ __('Update Profile Header') }}</h3>
+                    <p class="normal">{{ __('This header is used in the artist listing and artist profile page.') }}</p>
+                    <p class="small">Be patient, it takes a moment to process.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row mt-0 gutter-2">
+        <div class="col">
+            <livewire:artist.header />
+        </div>
+    </div>
+</div>

site/resources/views/profile/partials/update-password-form.blade.php

@@ -1,9 +1,9 @@
-<div class="authbox">
+<div class="authbox" style="min-height: 100%;">
     <div class="row mt-4 gutter-2">
         <div class="col">
             <div class="signin-content">
                 <div class="mb-6">
-                    <h2 class="mb-2">{{ __('Update Password') }}</h2>
+                    <h3 class="mb-2">{{ __('Update Password') }}</h3>
                     <p class="normal">{{ __('Ensure your account is using a long, random password to stay secure.') }}</p>
                 </div>
             </div>

site/resources/views/profile/partials/update-profile-information-form.blade.php

@@ -1,9 +1,9 @@
-<div class="authbox">
+<div class="authbox" style="min-height: 100%;">
     <div class="row mt-4 gutter-2">
         <div class="col">
             <div class="signin-content">
                 <div class="mb-6">
-                    <h2 class="mb-2">{{ __('Update Login') }}</h2>
+                    <h3 class="mb-2">{{ __('Update Login') }}</h3>
                     <p class="normal">{{ __("Update your account's username and email address. Note, your username may not be the same as your public artist profile.") }}</p>
                 </div>
             </div>