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.

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:

php artisan make:command GenerateOgImage

Cambiamos la firma del comando a algo como esto:

protected $signature = 'generate:ogimage';

No se olviden de que tienen que ejecutar:

php 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:

/**
 * Execute the console command.
 *
 * @return int
 */
public function handle()
{
	$articles = Article::get();
    $articles->each(function ($item, $key) {
		$item->file = $this->browswerShoot($item);
		$item->save();
    });

	return self::SUCCESS;
}

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:

public function browswerShoot($item)
{
	$html = view('ogImage', ['post' => $item])->render();
    $imageData = Browsershot::html($html)
        ->devicePixelRatio(2)
        ->windowSize(1200, 630)
        ->screenshot();

    $this->saveOgImage($imageData, $item->slug);
    return $this->ogImageUrl($item->slug);
}

public function saveOgImage(string $file, $param)
{
    Storage::disk('public')->put($this->ogImagePath($param), $file);
}

public function ogImagePath($param): string
{
	return "post/{$param}.png";
}

public function ogImageUrl($param): string
{
	return Storage::disk('public')->url($this->ogImagePath($param));
}

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.