Pascal Baljet

Never waste precious time reinventing tables again. Impress your clients with a modern, fast, and responsive table component. Inertia Table is the ultimate table package for Laravel and Inertia.js. It is compatible with React and Vue and is stuffed with features like extensive filters, row links, bulk actions, dark mode, exports, a built-in query builder, and it is super customizable!

Create beautiful Open Graph images with Browsershot and Tailwind CSS

For Artisan School, I wanted to create custom Open Graph images for each video page. For example, when somebody shares a link on social media, platforms like Facebook and Twitter use the OG image to represent the shared link. There are many services to create and serve OG images, but I didn't want to depend on an external service. For the website, I already had a Laravel application up and running with Tailwind CSS.

The routes file for this app is quite simple. Based on the slug URI segment of the route, I fetch the video from the database and return a Blade view:

use App\Models\Video;
 
Route::get('/{slug}', function ($slug) {
    $video = Video::whereSlug($slug)->firstOrFail();
 
    return view('video', ['video' => $video]);
});

I added a second route, which also returns a Blade view, just to render the OG image.

Route::get('/{slug}/openGraphImage', function ($slug) {
    $video = Video::whereSlug($slug)->firstOrFail();
 
    return view('videoOpenGraphImage', ['video' => $video]);
})->name('video.openGraphImage');

These images are typically 1200x630 pixels, so I created a container with those dimensions and centered it on the page. Be sure to enable Tailwind's JIT mode to get the square-bracket notation to work. In this container, I added the Artisan School logo and the title of the video.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    </head>
    <body class="flex items-center justify-center min-h-screen">
        <div class="bg-blue-500 w-[1200px] h-[630px]">
            <!-- your content -->
        </div>
    </body>
</html>

Now how do we store an image out of this Blade view? There's a gorgeous package called Browsershot by Spatie. It converts a webpage to an image or PDF using a headless version of Google Chrome. It needs some setup, but it's straightforward to use. I added a method within my Video model that handles the conversion and saves the image to the public folder of my app.

use Illuminate\Database\Eloquent\Model;
use Illuminate\Support\Facades\Storage;
use Spatie\Browsershot\Browsershot;
 
class Video extends Model
{
    public function saveOpenGraphImage()
    {
        $path = Storage::disk('public')->path("{$this->slug}.jpg");
 
        Browsershot::url(route('video.openGraphImage', ['slug' => $this->slug]))
            ->waitUntilNetworkIdle()
            ->showBackground()
            ->windowSize(1200, 630)
            ->setScreenshotType('jpeg', 100)
            ->save($path);
    }
 
    public function getOpenGraphImageUrl(): string
    {
        return Storage::disk('public')->url("{$this->slug}.jpg");
    }
}

To make my life easy, I also added a method to return the full URL of the OG image. You can use this in the header section of the HTML page or with an SEO package like artesaos/seotools.

<meta property="og:image" content="{{ $video->getOpenGraphImageUrl() }}">