Crear OG images con laravel y browsershot

Jan 16, 2022

Hay muchos servicios por ahi que sirven para crear este tipo de imagenes pero para no depender de ellos usaremos browsershot, que es un paquete creado por la gente de spatie.

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

Spoiler: necesitas tener nodejs, puppeteer y chromium.

como se usa

Asumiendo que leyenron la documentacion del propio paquete ya saben como se usa, por lo que voy a pasar a explicarles un ejemplo praáctico

En mi caso tengo una serie de publicaciones en este blog al cual queria 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 articulos 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 redenrizar y le pasamos una variable, esa variable contiene el titulo de nuestro articulo.

a partir de este momento, browsershot se encarga de hacer su magia y genera el screen shot y guarda la imagen en una carpeta llamada post y el nombre de la imagen sera el slug de dicho articulo 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.

Suscribete al Newsletter

By subscribing, you agree with Revue’s Terms of Service and Privacy Policy.

Te puede interesar

Sponsors