PHPackages                             wayborne/dynamic-meta-images - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. wayborne/dynamic-meta-images

ActiveCraft-plugin[Image & Media](/categories/media)

wayborne/dynamic-meta-images
============================

Create dynamic meta images with your entry's content

5.0.1(1y ago)1231[1 issues](https://github.com/wayborne/craft-dynamic-meta-images/issues)proprietaryPHPPHP >=8.2

Since Sep 19Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/wayborne/craft-dynamic-meta-images)[ Packagist](https://packagist.org/packages/wayborne/dynamic-meta-images)[ RSS](/packages/wayborne-dynamic-meta-images/feed)WikiDiscussions craft-5 Synced today

READMEChangelog (6)Dependencies (3)Versions (6)Used By (0)

Dynamic meta images
===================

[](#dynamic-meta-images)

Dynamic meta images is a Craft CMS plugin that lets you generate dynamic meta images from your website's content.

Requirements
------------

[](#requirements)

This plugin requires Craft CMS 4.0 or 5.0 or later, and PHP 8.0 or later. Additional requiremens are node, npm and puppeteers.

Installation
------------

[](#installation)

You can install this plugin from the Plugin Store or with Composer.

### From the Plugin Store

[](#from-the-plugin-store)

Go to the Plugin Store in your project’s Control Panel and search for “Dynamic meta images”. Then press “Install”.

### With Composer

[](#with-composer)

Open your terminal and run the following commands:

```
# go to the project directory
cd /path/to/project

# tell Composer to load the plugin
composer require wayborne/dynamic-meta-images

# tell Craft to install the plugin
./craft plugin/install dynamic-meta-images
```

### Additional steps

[](#additional-steps)

#### Puppeteer

[](#puppeteer)

This plugin requires you to install Puppeteer

`npm i puppeteer`

#### Node and NPM binary

[](#node-and-npm-binary)

Create the following enviroment variables in your `.env` file to point at the Node and NPM binary

```
NODE_BINARY="/usr/bin/node"
NPM_BINARY="/usr/bin/npm"
```

#### Template folder

[](#template-folder)

Create a new folder inside your templates folder (for example `_dynamic-meta-images`). Inside the plugins ('src/templates/examples`) you can find some example templates showcasing some techniques.

Usage
-----

[](#usage)

Dynamic meta images are being created from a twig/html template every time an entry gets saved. The template is rendered in a headless browser and an image is created and saved to a Craft asset sources.

### Options

[](#options)

- Pick a template per section: if you leave the template section empty, image generation is disabled for this section (per site)

### File naming

[](#file-naming)

By default the entry id will be used as file name. You can customize (per template) this by passing a `title` tag inside your template:

```
{{ entry.title }}

```

creates a new file:@ `title-of-the-entry.png`

### Styling the template

[](#styling-the-template)

You can style your templates however you want, however it's important that all of your styling resources (css/fonts/...) have a public url. That means that for local development it's easier to use some an existing CDN:

#### TailwindCSS

[](#tailwindcss)

Include the following script to your header:

```

```

You can even pass it your local theme to overwrite your defeault:

#### Fonts

[](#fonts)

Any public CDN, for example google fonts:

```

.poetsen {
    font-family: "Poetsen One", sans-serif;
    font-weight: 400;
    font-style: normal;
}

```

### Example templates

[](#example-templates)

You can find some examples in the plugin directory: `src/templates/examples/`

### Together with existing SEO plugins:

[](#together-with-existing-seo-plugins)

#### SEOmatic

[](#seomatic)

Using SEOmatic's existing api you can set the meta images:

```
{#-- Get the title --#}
{% set image_name  = entry.id %}
{#-- Check if the asset exists --#}
{% set dynamic_meta_image =  craft.assets().fileName(image_name).one() ?? null  %}
{#-- Test for a public url --#}
{% if  dynamic_meta_image.url %}
    {#-- Set the meta image --#}
    {% do seomatic.meta.seoImage(dynamic_meta_image.url) %}
{% else %}
... fallback
{% endif %}
```

[Source](https://nystudio107.com/docs/seomatic/advanced.html#variables)

#### SEO fields

[](#seo-fields)

Using SEO fields you can manually set the Facebook and Twitter image:

```
{#-- Get the title --#}
{% set image_name  = entry.id %}
{#-- Check if the asset exists --#}
{% set dynamic_meta_image =  craft.assets().fileName(image_name).one() ?? null  %}
{#-- Set the meta image --#}
{% if dynamic_meta_image %}
    {% do entry.setFacebookImage(dynamic_meta_image) %}
    {% do entry.setTwitterImage(dynamic_meta_image) %}
{% else %}
    ... fallback
{% endif %}
```

[Source](https://studioespresso.github.io/craft-seo-fields/templating.html)

Troubleshooting
---------------

[](#troubleshooting)

### I'm not sure if Puppeteer is installed

[](#im-not-sure-if-puppeteer-is-installed)

Run `npm list puppeteer` to see if it's listed there. You can also check your `package.json` file and see if `puppeteer` is listed under the dependencies and make sure `npm install` runs without any issues.

### I'm having trouble installing Puppeteer on Linux

[](#im-having-trouble-installing-puppeteer-on-linux)

Following the official Puppeteer docs, here are all the required dependencies for Puppeteer to run on Linux:

### I can't find the path to my Node or NPM binary

[](#i-cant-find-the-path-to-my-node-or-npm-binary)

For Node.js: Type which node (macOS/Linux) or where node (Windows) and press Enter. This will display the path to the Node.js binary. For npm: Type which npm (macOS/Linux) or where npm (Windows) and press Enter. This will display the path to the npm binary.

### Images aren't being generated:

[](#images-arent-being-generated)

All image creation is being done in the queue logs so if you experience any issues, that's a good place to check. Make sure that:

- Puppeteer is installed
- The NODE\_BINARY and NPM\_BINARY is set

To enable Puppeteer Headless Chrome support, add the following line to your `/.ddev/config.yaml` file:

```
webimage_extra_packages: [ gconf-service, libasound2, libatk1.0-0, libcairo2, libgconf-2-4, libgdk-pixbuf2.0-0, libgtk-3-0, libnspr4, libpango-1.0-0, libpangocairo-1.0-0, libx11-xcb1, libxcomposite1, libxcursor1, libxdamage1, libxfixes3, libxi6, libxrandr2, libxrender1, libxss1, libxtst6, fonts-liberation, libappindicator1, libnss3, xdg-utils ].
```

For Apple Silicon support, you will have to override that configuration by adding a config.m1.yaml file in your ddev folder along with the config.yaml one with the following content:

```
webimage_extra_packages : [chromium]
web_environment:
- CPPFLAGS=-DPNG_ARM_NEON_OPT=0
- PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
- PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
```

Brought to you by [Wayborne](https://wayborne.com)

###  Health Score

31

—

LowBetter than 66% of packages

Maintenance41

Moderate activity, may be stable

Popularity9

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity56

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 94.1% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

4

Last Release

648d ago

Major Versions

4.0.0 → 5.0.02024-09-19

4.0.1 → 5.0.12024-09-22

PHP version history (2 changes)4.0.0PHP ^8.0

5.0.0PHP >=8.2

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/171188324?v=4)[Wayborne](/maintainers/Wayborne)[@wayborne](https://github.com/wayborne)

---

Top Contributors

[![jan-dh](https://avatars.githubusercontent.com/u/5801781?v=4)](https://github.com/jan-dh "jan-dh (32 commits)")[![mlathrom](https://avatars.githubusercontent.com/u/373889?v=4)](https://github.com/mlathrom "mlathrom (2 commits)")

---

Tags

cmsCraftcraftcmscraft-pluginseodynamic-meta-imagesmeta-imagessocial-images

### Embed Badge

![Health badge](/badges/wayborne-dynamic-meta-images/health.svg)

```
[![Health](https://phpackages.com/badges/wayborne-dynamic-meta-images/health.svg)](https://phpackages.com/packages/wayborne-dynamic-meta-images)
```

###  Alternatives

[verbb/image-resizer

Resize assets when they are uploaded.

127276.0k8](/packages/verbb-image-resizer)[verbb/formie

The most user-friendly forms plugin for Craft.

102393.6k60](/packages/verbb-formie)[spacecatninja/imager-x

Ninja powered image transforms.

29405.1k38](/packages/spacecatninja-imager-x)[verbb/vizy

A flexible visual editor field for Craft.

4250.4k](/packages/verbb-vizy)[verbb/hyper

A user-friendly links field for Craft.

24147.8k12](/packages/verbb-hyper)[doublesecretagency/craft-googlemaps

Maps in minutes. Powered by the Google Maps API.

1270.1k](/packages/doublesecretagency-craft-googlemaps)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)