Display a little thumbnail next to the title, using the image from the metatags

app/Helper/HtmlMeta.php

@@ -45,26 +45,43 @@ public static function getFromUrl(string $url, bool $flashAlerts = false): array
             return self::$fallback;
         }
 
-        return self::buildLinkMeta($meta);
+        return self::buildLinkMeta($meta, $url);
     }
 
     /**
      * Build a response array containing the link meta including a success flag.
      *
      * @param array $metaTags
+     * @param string $url
      * @return array
      */
-    protected static function buildLinkMeta(array $metaTags): array
+    protected static function buildLinkMeta(array $metaTags, string $url): array
     {
         $metaTags['description'] = $metaTags['description']
             ?? $metaTags['og:description']
             ?? $metaTags['twitter:description']
             ?? null;
 
+        $thumbnail = $metaTags['og:image']
+            ?? $metaTags['twitter:image']
+            ?? null;
+
+        //Edge case of Youtube only (because of Youtube EU cookie consent)
+        if (str_contains($url, 'youtube')
+            && str_contains($url, 'v=')
+            && is_null($thumbnail)
+        ) {
+            //Formula based on https://stackoverflow.com/a/2068371
+            $explode = explode('v=', $url);
+            //https://img.youtube.com/vi/[video-id]/mqdefault.jpg
+            $thumbnail = 'https://img.youtube.com/vi/' . $explode[1] . '/mqdefault.jpg';
+        }
+
         return [
             'success' => true,
             'title' => $metaTags['title'] ?? self::$fallback['title'],
             'description' => $metaTags['description'],
+            'thumbnail' => $thumbnail,
         ];
     }
 
@@ -79,6 +96,7 @@ protected static function buildFallback(string $url): void
             'success' => false,
             'title' => parse_url($url, PHP_URL_HOST) ?? $url,
             'description' => false,
+            'thumbnail' => null,
         ];
     }
 }

app/Models/Link.php

@@ -60,6 +60,7 @@ class Link extends Model
         'is_private',
         'status',
         'check_disabled',
+        'thumbnail',
     ];
 
     protected $casts = [

app/Repositories/LinkRepository.php

@@ -38,6 +38,7 @@ public static function create(array $data, bool $flashAlerts = false): Link
         $data['description'] = $data['description'] ?? $linkMeta['description'];
         $data['user_id'] = auth()->user()->id;
         $data['icon'] = LinkIconMapper::mapLink($data['url']);
+        $data['thumbnail'] = $linkMeta['thumbnail'];
 
         // If the meta helper was not successfull, disable future checks and set the status to broken
         if ($linkMeta['success'] === false) {

database/migrations/2021_04_15_165138_add_thumbnail_column_to_links_table.php

@@ -0,0 +1,32 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+class AddThumbnailColumnToLinksTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('links', function (Blueprint $table) {
+            $table->string('thumbnail', 255)->nullable()->default(null)->after('icon');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('links', function (Blueprint $table) {
+            $table->dropColumn('thumbnail');
+        });
+    }
+}

resources/assets/sass/custom/_app.scss

@@ -165,3 +165,22 @@ code {
 #loader {
   display: none !important;
 }
+
+.link-thumbnail-detail {
+  width: 180px;
+  height: 100px;
+  background-size: cover !important;
+}
+
+.link-thumbnail-list-holder {
+  width: 100%;
+  @include media-breakpoint-up('md') {
+    width: auto;
+  }
+
+  .link-thumbnail-list {
+    width: 100px;
+    height: 75px;
+    background-size: cover !important;
+  }
+}

resources/views/models/links/partials/single-detailed.blade.php

@@ -1,7 +1,13 @@
 <div class="card mb-4">
 
     <div class="card-header">
-        <div class="d-flex align-items-top flex-wrap">
+        <div class="d-flex align-items-top flex-wrap flex-md-nowrap">
+            @if($link->thumbnail)
+                <div class="d-flex justify-content-center mr-2 mb-2 mb-md-0 link-thumbnail-list-holder">
+                    <a href="{{ $link->url }}" {!! linkTarget() !!} class="border rounded d-block link-thumbnail-list" style="background: url('{{ $link->thumbnail }}') no-repeat center;">
+                    </a>
+                </div>
+            @endif
             <div class="mr-2 mw-100">
                 @if($link->is_private)
                     <span>

resources/views/models/links/show.blade.php

@@ -7,7 +7,15 @@
         <div class="col-12 col-md-8">
             <div class="card">
                 <div class="card-body">
-                    <div class="d-sm-flex mb-3">
+                    <div class="d-flex flex-column flex-lg-row mb-3">
+                        @if($link->thumbnail)
+                            <div class="mt-1 mr-2 align-self-center">
+                                <a href="{{ $link->url }}" {!! linkTarget() !!}
+                                class="border rounded d-block link-thumbnail-detail" style="background: url('{{ $link->thumbnail }}') no-repeat center;">
+                                </a>
+                            </div>
+
+                        @endif
                         <div class="d-sm-inline-block mt-1 mb-2 mb-sm-0">
                             {!! $link->getIcon('mr-1 mr-sm-2') !!}
                             @if($link->is_private)