Social Images Generator
The social images generator provides an easy way to generate unique Open Graph and Twitter images for your entries.
Last updated
The social images generator provides an easy way to generate unique Open Graph and Twitter images for your entries.
Last updated
The generator leverages Browsershot and requires a working installation of Puppeteer on your server and local machine.
Enable the social images generator in the addon's config:
Next, head over to the Social Media site defaults in the CP and enable the collections you want to generate images for:
This will add a Social Images Generator section to the SEO fields of each enabled collection:
There are a couple of different ways to generate your social images. Choose whichever approach makes sense to you.
By default, images are generated every time you save an entry.
Generating images can be a time-consuming task. It's a good idea to use a queue driver like Redis to move the process into the background. You may configure the queue in the config:
When an entry is saved, its previously generated social images are deleted. The new images are generated on-demand with the first request of the entry. Note that this will result in a slower response time on the first request.
To use this approach, set generate_on_save to false in the config:
You may also generate the images at any time using the action in the collection listing view:
Advanced SEO also provides a command to generate the social images of all entries at once. This can be useful when enabling the generator for an existing collection with many entries.
You can design your images like a regular Statamic template, using the full power of Antlers like variables, tags, and partials.
The generator is built around the concept of themes. You need at least one theme, but you can have as many as you’d like.
Run the following command to create your first theme:
This will publish a default layout as well as a template for each social image type to resources/views/social_images.
If you created multiple themes, you will be able to select the theme of your choice in the Theme dropdown:
The type of Twitter image that will be generated is determined by the selected Twitter Card. Select Regular to generate the image using the twitter_summary template or select Large Image to generate the images using the twitter_summary_large_image template.
When building your templates, you most likely want to see what you’re doing. You can view your templates according to this pattern:
| Variable | Description | Values |
|---|---|---|
| The theme to use | e.g. |
| The type of social image |
|
| The ID of the entry | e.g. |
A couple of example:
You may use Statamic’s live preview feature to preview your social images when editing an entry. Simply click the Live Preview button and select the Open Graph Image or Twitter Image in the target dropdown.
You may configure the asset container for your social images. The images will be saved into a social_images directory in the configured container.
Social image sizes are constantly evolving. You may easily change the width and height of the generated images by editing the presets config:
