Generate (Social Media) Image

This module automatically replaces image styles with a tokenized text overlay like [node:title] with a node's data, such as the title, the author or creation-date of the node, which can be used as a beautiful and meaningful image for social media.

You can use the generated image for example as image source for the og:image meta tag:
<meta property="og:image" content="http://domain.tld/my-dynamic-image.png"/>

Release 2.0.x

This release introduces a major restructuring of the module to provide a more flexible and robust architecture for dynamic image generation. It is easier to set up and to use. It supports Drupal 10.4, 11 and 12.

The new release uses Drupal core image-styles and the effect “Text overlay” from the “Image Effects” module with “Tokens” to dynamically build the images. This eliminates the need to implement the image layout programmatically.

Requirements: an image toolkit that supports the text overlay effect (GD or ImageMagick) and a font file (e.g. TTF) for it — the README.md explains where to download the free Ubuntu Bold font used in the examples and where to place it.

There is no upgrade path from 1.x to 2.x.

Usage

1. Create an image style with a text overlay effect from the Image Effects module. The text can (and should) contain node-tokens like [node:title], which will be replaced by this module.
   The README.md contains two ready-made example styles to import.
2. Visit the settings page: /admin/config/media/gsmi
3. Select the node type’s image-field (for example “field_seo_image”) and your new image style. A live preview below the settings shows the generated image for a node of your choice.
4. Use the following tokens (for example in the meta-tags) to output the full path of the node’s generated image:

[node:generate-style] → styled with the image-style and field from the settings page
[node:generate-style:STYLE_MACHINE_NAME] → … with a specific image-style
[node:generate-style:STYLE_MACHINE_NAME:FIELD_MACHINE_NAME] → … with a specific image-style and field

Node-tokens like [node:title] inside the text overlay are replaced with the node’s data. And that’s the magic of this module!

What else 2.0.x brings

• File-based caching: each image is generated once, written to the public file system and then served directly by the web server — no Drupal bootstrap on subsequent requests.
• Automatic cache invalidation when a node is updated or the module’s settings change, plus a drush gsmi:flush command to purge all generated images.
• Stale-URL redirect: if an external cache (CDN, social-media crawler, browser) still requests an old image URL, it is redirected to the current image instead of receiving a 404.
• Multilanguage: every translation of a node gets its own generated image, with tokens resolved in that translation’s language.
• Save as file or media entity directly from the settings page — repeated saves update the existing file and media entity instead of creating duplicates.

Release 1.0.x

You can use the generated image for example as image source like:
src="generate-social-media-image/returnasimage/123"

Or as a source for the og:image meta tag:

Please note:

The image will be generated by your server every time someone or something hits the path. There is no caching!

Pro: The image could be created depending on varying data, like time, user, weather or my account balance. ;-)

Contra: It can slow down your server if the image is called very often and at the same time.
For this reason, you must explicitly give permission for users, if you want allow them to generate images on the fly:
/admin/people/permissions/module/gsmi

Features:

The modules functions are based on the GD library.
Currently, the following functions, among others, are implemented:

Automatically generate the image for node [nid] on every call:

/generate-social-media-image/returnasimage/[nid]

Generate the image for node [nid] and save it to a managed file:

/generate-social-media-image/savetofile/[nid]

Generate the image to node [nid], save it as a file and create a new media image element

/generate-social-media-image/savetofile/[nid]/true

Token, which outputs the full path for the nodes generated image:

[node:generated-image]

Installation:

See the documentation on how to install sandbox-modules:

Add repository to your composer.json

"repositories": [
        {
            "type": "composer",
            "url": "https://packages.drupal.org/8"
        },
        {
            "type": "vcs",
            "url": "https://git.drupalcode.org/project/gsmi.git"
        }
    ],

After that require the sandbox-module:
composer require drupal/gsmi:1.0.x-dev

Configuration:

You can change colors, fonts, sizes and source of the image at the configurations-page.
(Manage > Configuration > Media > Generate Social Media Image)
/admin/config/system/generate-social-media-image

At the end of the form, you can find a preview-image of your settings.

Don't forget to give permission to anyone who should be able to generate images!
/admin/people/permissions/module/gsmi

Can i create my own template for an automatic social media image?

Yes, you can: there is a hook_gsmi_imagelayout for that.

As an example and starting point on how to create your own template for an image, the module contains a sub-module "Generate Social Media Image (Example)" (gsmi_example).
You can switch the templates on the configurations-page.

Contact me if you need paid help in creating your own image template for social media.

Similar Modules:

Image Effects: "The Image Effects module provides a suite of additional image effects". Most of the layout-stuff can be done with this module and it is better suited if you need caching. But you cannot add variable data (like time, user-data, role, ...) to the generated image.
Image Generator: "This module generates an image on the fly from [url-]parameters.". If you don't need complex layouts, this module maybe will suit your needs, too.