Crear OG images con laravel y browsershot
Este artículo tiene más de un año de antigüedad, el contenido pudiera estar obsoleto.
Hay muchos servicios por ahi que sirven para crear este tipo de imágenes 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 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 GenerateOgImageCambiamos la firma del comando a algo como esto:
1protected $signature = 'generate:ogimage';No se olviden de que tienen que ejecutar:
1php artisan storage:linkEn 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): 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 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.
