Automatic generation of social images (#549)

* Install intervention/image

* Add command to generate image

* Add route to generate social image

* Render social share image

* Apply PHP CS Fixer changes

* Update formatting

Author: joedixon

app/Http/Controllers/SocialImageController.php

@@ -0,0 +1,14 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Jobs\GenerateSocialShareImage;
+use App\Models\Article;
+
+class SocialImageController extends Controller
+{
+    public function __invoke(Article $article)
+    {
+        return $this->dispatchNow(new GenerateSocialShareImage($article));
+    }
+}

app/Jobs/GenerateSocialShareImage.php

@@ -0,0 +1,46 @@
+<?php
+
+namespace App\Jobs;
+
+use App\Models\Article;
+use Intervention\Image\ImageManager;
+
+final class GenerateSocialShareImage
+{
+    private $article;
+
+    const TEXT_X_POSITION = 50;
+
+    const TEXT_Y_POSITION = 100;
+
+    const TEXT_COLOUR = '#161e2e';
+
+    const FONT = 'inter.ttf';
+
+    const FONT_SIZE = 50;
+
+    const CHARACTERS_PER_LINE = 30;
+
+    const TEMPLATE = 'social-share-template.png';
+
+    const CACHE_LIFETIME = 43200;
+
+    public function __construct(Article $article)
+    {
+        $this->article = $article;
+    }
+
+    public function handle(ImageManager $image)
+    {
+        $text = wordwrap($this->article->title(), self::CHARACTERS_PER_LINE);
+
+        return $image->cache(function ($image) use ($text) {
+            $image->make(storage_path('images/' . self::TEMPLATE))
+                ->text($text, self::TEXT_X_POSITION, self::TEXT_Y_POSITION, function ($font) {
+                    $font->file(storage_path('fonts/' . self::FONT));
+                    $font->size(self::FONT_SIZE);
+                    $font->color(self::TEXT_COLOUR);
+                });
+        }, self::CACHE_LIFETIME, true)->response('png');
+    }
+}

composer.json

@@ -14,6 +14,8 @@
         "fideloper/proxy": "^4.2",
         "fruitcake/laravel-cors": "^1.0",
         "guzzlehttp/guzzle": "^6.3",
+        "intervention/image": "^2.5",
+        "intervention/imagecache": "^2.4",
         "laravel/framework": "^7.0",
         "laravel/horizon": "^4.0",
         "laravel/socialite": "^4.3",

composer.lock

@@ -21,3 +21,7 @@
 Blade::directive('title', function ($expression) {
     return "<?php \$title = $expression ?>";
 });
+
+Blade::directive('shareImage', function ($expression) {
+    return "<?php \$shareImage = $expression ?>";
+});

resources/macros/blade.php

@@ -1,4 +1,5 @@
 @title($article->title())
+@shareImage(route('articles.image', $article->slug()))
 
 @extends('layouts.default')
 

resources/views/articles/show.blade.php

@@ -7,5 +7,11 @@
 <!-- Facebook sharing -->
 <meta property="og:url" content="{{ url()->current() }}" />
 <meta property="og:title" content="{{ isset($title) ? $title.' | ' : '' }}{{ config('app.name') }}" />
-<meta property="og:image" content="{{ asset('images/laravelio-share.png') }}" />
+
+@if (isset($shareImage))
+    <meta property="og:image" content="{{ $shareImage }}" />
+@else
+    <meta property="og:image" content="{{ asset('images/laravelio-share.png') }}" />
+@endif
+
 <!-- /Facebook sharing -->

resources/views/layouts/_social.blade.php

@@ -11,6 +11,8 @@
 Route::get('privacy', 'HomeController@privacy')->name('privacy');
 Route::get('bin/{paste?}', 'HomeController@pastebin');
 
+Route::get('articles/{article}/social.png', 'SocialImageController')->name('articles.image');
+
 // Authentication
 Route::namespace('Auth')->group(function () {
     // Sessions