This Laravel package allows you to easily create Open Graph images for your application or website. Please go here if you're looking for the back-end repo.
Like our work? You can support us by sponsoring or purchasing one of our products and services.
You can install the package via composer:
composer require flowframe/og-image-clientYou can easily publish the config like so:
php artisan og-image-client:installOnce you have setup up the server you can start using the client side package.
First, setup your .env:
OG_IMAGE_URL=<your_server_url> // https://your-app-on.vercel.com/api
OG_IMAGE_TEMPLATE_PATH=<your_template_path> // default _og-image, we recommend to keep this
OG_IMAGE_SECRET_TOKEN=<your_secret_token_from_server>
Don't forget to add the /api suffix.
And then generate your image:
// helper function, you can also use the Facade: `OgImageClient::generate(...)`
$image = og()->generate([
'template' => '_og-images/example', // resources/views/_og-images/example.blade.php
// Attributes which will be used in the template view
'title' => 'Hello Flowframe',
'subtitle' => 'How are you doing?',
// Array are also supported
'options' => [
'Wow',
'Much',
'Cool',
],
]);When developing locally you can also preview your image by doing:
return og()->preview([
'template' => '_og-images/example',
'title' => 'Hello Flowframe',
'subtitle' => 'How are you doing?',
'options' => [
'Wow',
'Much',
'Cool',
],
]);This will render the template with data.
The templates get served from the website itself. Alternatively, you can override the url inside the payload to point to another site.
You're free in where you place the template, we suggest to place it in resources/views/_og-images.
Here's an example of a template:
<!-- HTML scaffolding... -->
<body>
<div>
<h1>{{ $payload['title] }}</h1>
<p>{{ $payload['subtitle] }}</p>
<ul>
@foreach($payload['options'] as $option)
<li>{{ $option }}</li>
@endforeach
</ul>
</div>
</body>Be aware that nullable values could raise an error. You can easily avoid it by creating classes which require you to implement certain fields or simple do: {{ $payload['title] ?? '' }}.
Please review our security policy on how to report security vulnerabilities.
The MIT License (MIT). Please see License File for more information.