Crear OG images con laravel y browsershot

Primero que todo es importante seguir los pasos de instalación del paquete que en su documentacion explica como hacerlo.

Spoiler: necesitas tener nodejs, puppeteer y chromium.

como se usa

Asumiendo que leyeron la documentación del propio paquete ya saben como se usa, por lo que voy a pasar a explicarles un ejemplo práctico

En mi caso tengo una serie de publicaciones en este blog al cual quería actualizar la "og image" y lo que hice fue crear un comando para hacerlo automatico.

hagamos la magia

Primero creamos el comando:

1php artisan make:command GenerateOgImage

Cambiamos la firma del comando a algo como esto:

1protected $signature = 'generate:ogimage';

No se olviden de que tienen que ejecutar:

1php artisan storage:link

En mi caso, tengo un campo en la base de datos llamado file el cual vamos a actualizar con el nuevo valor correspondiente a la imagen que vamos a crear.

Ahora pasamos hacer lo siguiente:

 1/**
 2 * Execute the console command.
 3 *
 4 * @return int
 5 */
 6public function handle()
 7{
 8    $articles = Article::get();
 9    $articles->each(function ($item, $key) {
10        $item->file = $this->browswerShoot($item);
11        $item->save();
12    });
13 
14    return self::SUCCESS;
15}

Lo que hacemos acá es simplemente es encontrar todos los artículos e iterar por cada uno de ellos para actualizar el campo file

Y ya para finalizar:

 1 
 2public function browswerShoot($item)
 3{
 4    $html = view('ogImage', ['post' => $item])->render();
 5    $imageData = Browsershot::html($html)
 6    ->devicePixelRatio(2)
 7    ->windowSize(1200, 630)
 8    ->screenshot();
 9 
10    $this->saveOgImage($imageData, $item->slug);
11    return $this->ogImageUrl($item->slug);
12}
13 
14public function saveOgImage(string $file, $param)
15{
16    Storage::disk('public')->put($this->ogImagePath($param), $file);
17}
18 
19public function ogImagePath($param): string
20{
21    return "post/{$param}.png";
22}
23 
24public function ogImageUrl($param): string
25{
26    return Storage::disk('public')->url($this->ogImagePath($param));
27}

Y bueno, creo que todo esto se explica solo pero por si acaso:

Creamos una instancia de browsershot donde le indicamos una vista que va a renderizar y le pasamos una variable, esta variable contiene el título de nuestro artículo.

a partir de este momento, browsershot se encarga de hacer su magia y genera el screenshot y guarda la imagen en una carpeta llamada post y el nombre de la imagen será el slug de dicho artículo y ya por ultimo lo que hacemos es retornar la url de la imagen para que sea actualizado en nuestra base de datos.

Espero que les sea de utilidad.