[Feat/1173] implement fallback article images (#1178)

* feat: add fallback image to article image on summary page

* feat: we don't need to add class

* feat: fix quotes

* feat: add fallback image to article image on show page

* fix: update alt tag

* fix: use asset so the fallback image loads

* feat: add object-over to img to match behaviour when it used to be div

* feat: add back up image to article on overview summary

* feat: add back up image to article on user summary

* feat: add gradient background

* feat: fix gradient background

* feat: remove hasHeroImage because it is now handled in front end

* feat: fix indentation

* wip

---------

Co-authored-by: Dries Vints <dries@vints.be>

Author: Nathan-Cowin

app/Models/Article.php

@@ -101,11 +101,6 @@ public function excerpt(int $limit = 100): string
         return Str::limit(strip_tags(md_to_html($this->body())), $limit);
     }
 
-    public function hasHeroImage(): bool
-    {
-        return $this->hero_image_url !== null;
-    }
-
     public function hasHeroImageAuthor(): bool
     {
         return $this->hero_image_author_name !== null &&
@@ -114,11 +109,7 @@ public function hasHeroImageAuthor(): bool
 
     public function heroImage($width = 400, $height = 300): string
     {
-        if ($this->hasHeroImage()) {
-            return "{$this->hero_image_url}&fit=clip&w={$width}&h={$height}&utm_source=Laravel.io&utm_medium=referral";
-        }
-
-        return asset('images/default-background.svg');
+        return "{$this->hero_image_url}&fit=clip&w={$width}&h={$height}&utm_source=Laravel.io&utm_medium=referral";
     }
 
     public function originalUrl(): ?string

resources/views/articles/show.blade.php

@@ -21,9 +21,18 @@
         <div class="container mx-auto">
             <div class="px-4 lg:px-0 lg:mx-48">
                 <div
-                    class="w-full bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800 p-6 lg:p-8"
-                    style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url({{ $article->heroImage(2000,384) }});"
+                    class="w-full bg-center bg-gray-800"
+                    style="background-image: url('{{ asset('images/default-background.svg') }}')"
                 >
+                <div class="relative w-full bg-center p-6 lg:p-8 z-10">
+                    <img class="absolute w-full h-full left-0 top-0 object-cover -z-10"
+                         src="{{ $article->heroImage(2000,384) }}"
+                         alt="Article Hero Image"
+                         onerror="
+                            this.onerror=null
+                            this.src=''"
+                    >
+                    <div class="absolute inset-0 bg-gradient-to-b from-black/40 to-black/40 -z-10"></div>
                     <div class="flex items-center justify-between mb-28 text-sm lg:text-base">
                         <a href="{{ route('articles') }}" class="flex items-center text-white hover:underline">
                             <x-heroicon-s-arrow-left class="w-4 h-4 fill-current" />
@@ -158,7 +167,7 @@ class="prose prose-lg text-gray-800 prose-lio"
                                 @endif
 
                                 @if ($article->author()->hasTwitterAccount())
-                                    <a href="https://x.com/{{ $article->author()->twitter() }}" class="text-twitter">
+                                    <a href="https://twitter.com/{{ $article->author()->twitter() }}" class="text-twitter">
                                         <x-si-x class="w-6 h-6" />
                                     </a>
                                 @endif

resources/views/components/articles/overview-summary.blade.php

@@ -6,12 +6,14 @@
 
 <div class="h-full rounded-lg shadow-lg bg-white lg:p-5">
     <div class="flex flex-col gap-x-8 lg:flex-row">
-        <a href="{{ route('articles.show', $article->slug()) }}" class="block">
-            <div
-                class="w-full h-32 rounded-t-lg bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800 lg:w-48 lg:h-full lg:rounded-lg"
-                style="background-image: url({{ $article->heroImage() }});"
+        <a href="{{ route('articles.show', $article->slug()) }}" class="block lg:aspect-video">
+            <img class="w-full h-32 rounded-t-lg bg-center bg-gray-800 lg:h-full lg:w-48 lg:rounded-lg object-none max-w-none"
+                 src="{{ $article->heroImage() }}"
+                 alt="Article Hero Image"
+                 onerror="
+                    this.onerror=null;
+                    this.src='images/default-background.svg';"
             >
-            </div>
         </a>
 
         <div class="flex flex-col gap-y-3 p-4 lg:p-0 lg:gap-y-3.5 w-full">

resources/views/components/articles/summary.blade.php

@@ -7,7 +7,13 @@
     <div class="break-words">
         @if ($isFeatured)
             <a href="{{ route('articles.show', $article->slug()) }}">
-                <div class="w-full h-72 mb-6 rounded-lg bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800" style="background-image: url({{ $article->heroImage() }});"></div>
+                <img class="w-full h-72 mb-6 rounded-lg bg-center bg-gray-800 object-cover"
+                     src="{{ $article->heroImage() }}"
+                     alt="Article Hero Image"
+                     onerror="
+                        this.onerror=null;
+                        this.src='{{ asset('images/default-background.svg') }}'"
+                >
             </a>
         @endif
 

resources/views/components/articles/user-summary.blade.php

@@ -5,11 +5,13 @@
 <div class="h-full rounded-lg shadow-lg bg-white">
     <div class="flex flex-col h-full gap-x-8">
         <a href="{{ route('articles.show', $article->slug()) }}" class="block">
-            <div
-                class="w-full h-32 rounded-t-lg bg-center {{ $article->hasHeroImage() ? 'bg-cover' : '' }} bg-gray-800 lg:h-40"
-                style="background-image: url({{ $article->heroImage() }});"
+            <img class="w-full h-32 rounded-t-lg bg-center bg-gray-800 lg:h-40 object-cover"
+                 src="{{ $article->heroImage() }}"
+                 alt="Article Hero Image"
+                 onerror="
+                    this.onerror=null;
+                    this.src='{{ asset('images/default-background.svg') }}'"
             >
-            </div>
         </a>
 
         <div class="flex flex-col h-full gap-y-3 p-4">