Crear OG images con laravel y browsershot
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): string20{21 return "post/{$param}.png";22}23 24public function ogImageUrl($param): string25{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.