Social Images Generator
Automatically generate social images for your entries and taxonomy terms using customizable themes.
Setup
Run the install command and select Social Images Generator:
php please seo:installThis installs the required dependencies, enables the feature in your config, and creates a default theme.
Requirements
The generator uses spatie/laravel-screenshot under the hood, which supports two screenshot drivers:
Browsershot (default) - Requires Puppeteer installed on your server.
Cloudflare Browser Rendering — A cloud-based alternative that doesn't require Puppeteer.
The install command lets you choose your driver and handles the setup. To configure the screenshot driver manually, publish the config:
php artisan vendor:publish --tag=laravel-screenshot-configBrowsershot requires Puppeteer installed on your server. Refer to the Browsershot documentation for setup instructions.
Cloudflare Browser Rendering is a cloud-based alternative that doesn't require Puppeteer. Configure the driver in your published config/screenshot.php:
'driver' => 'cloudflare',
'cloudflare' => [
'account_id' => env('CLOUDFLARE_ACCOUNT_ID'),
'api_token' => env('CLOUDFLARE_API_TOKEN'),
],Refer to the spatie/laravel-screenshot documentation for more details.
Enable Generator
Generating Images
On Save
Images are automatically generated when you save an entry or term. Smart regeneration ensures images are only regenerated when content actually changes. Saving without content changes won't trigger regeneration.
Generation runs asynchronously after the response is sent. For better performance, configure a queue:
On Demand
If a generated image is missing (e.g. accidentally deleted), it will be regenerated on-the-fly on the next frontend request.
Action
You can generate images at any time using the action in the collection or taxonomy listing view.
Command
Generate social images for all entries and terms at once:
Unified Social Image
The generator produces a single Open Graph image that is shared between Open Graph and X (Twitter) meta tags. The Twitter Card setting on each collection/taxonomy configuration determines which preset is used to resize the shared image for the Twitter meta tags.
Themes
Themes are Antlers templates that define the visual design of your generated social images. You can create multiple themes and switch between them in the publish form.
Creating a Theme
Run the following command to create a new theme:
This publishes a default layout and an open_graph.antlers.html template:
Template Structure
Each theme needs an open_graph.antlers.html template. Design your template like any Statamic view, using the full power of Antlers: variables, tags, partials, and any styling approach you prefer.
The template receives all of the entry or term's augmented data as variables.
Previewing
You can preview your templates in the browser using this URL pattern:
theme
The theme handle
default
id
The entry or term ID
4358df35-c7fe-4774-97ad-02af0e2dea3b
site
The site handle
default
Theme Restrictions
You can restrict which themes are available for a specific collection or taxonomy in its configuration. When themes are restricted, only the selected themes appear in the theme dropdown on entries and terms.
Inline Preview
The social preview in the publish form renders the template used to generate the social image. It updates in real time as you edit the entry or term. When multiple themes are available, you can switch between them to see how each looks before saving.
Last updated