PHPackages                             mauricerenck/ogimage - 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. [Utility & Helpers](/categories/utility)
4. /
5. mauricerenck/ogimage

ActiveKirby-plugin[Utility & Helpers](/categories/utility)

mauricerenck/ogimage
====================

Creates an Open Graph Image for each page

1.1.9(8mo ago)192.7k↓14.3%1MITPHPPHP >=8.2.0CI failing

Since Oct 30Pushed 3mo ago1 watchersCompare

[ Source](https://github.com/mauricerenck/og-image)[ Packagist](https://packagist.org/packages/mauricerenck/ogimage)[ Docs](https://github.com/mauricerenck/og-image)[ RSS](/packages/mauricerenck-ogimage/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (13)Used By (0)

OG Image
========

[](#og-image)

#### A Kirby OpenGraph Image Plugin

[](#a-kirby-opengraph-image-plugin)

[![GitHub release](https://camo.githubusercontent.com/75ca315c405f1ed21d9c15a14066326ff3ec5d3c1443f2a0058557fb3890e780/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6d61757269636572656e636b2f6f672d696d6167652e7376673f6d61784167653d31383030)](https://camo.githubusercontent.com/75ca315c405f1ed21d9c15a14066326ff3ec5d3c1443f2a0058557fb3890e780/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f6d61757269636572656e636b2f6f672d696d6167652e7376673f6d61784167653d31383030) [![License](https://camo.githubusercontent.com/850eae1099d2b05f53383473d7cd51f9bc1ab09b7d0d9e5122f1dd930efdcc6d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d6173686170652f6170697374617475732e737667)](https://camo.githubusercontent.com/850eae1099d2b05f53383473d7cd51f9bc1ab09b7d0d9e5122f1dd930efdcc6d/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d6173686170652f6170697374617475732e737667) [![Kirby Version](https://camo.githubusercontent.com/d7946edb7ed5ab7a2f6c7b4e446bb41e28877763edf7d667ed5e85f0467c87e5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4b697262792d342532422d626c61636b2e737667)](https://camo.githubusercontent.com/d7946edb7ed5ab7a2f6c7b4e446bb41e28877763edf7d667ed5e85f0467c87e5/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4b697262792d342532422d626c61636b2e737667)

---

This plugin creates an og-image for a page, based on a template image and a text input. Simply add `/og-image` to any url to get the og-image for that page.

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

[](#installation)

Use one of these methods to install the plugin:

- composer (recommended): `composer require mauricerenck/ogimage`
- zip file: unzip [main.zip](https://github.com/mauricerenck/ogimage/releases/latest) as folder `site/plugins/ogimage`

Prerequisites
-------------

[](#prerequisites)

This plugin requires the following assets to be present:

- a ttf font file
- a png template image

You can find a sample template image in the `assets` folder of this plugin.

How it works
------------

[](#how-it-works)

This plugins listens to `/og-image` on any page. It will go through the following steps:

1. Check if the page has a `ogimage` field - If you have an `ogimage` field, the plugin will use the image from that field and deliver it as the og-image.
2. Check if the page has a `hero` image - If you have a `hero` image, the plugin can use that image and place it under the template image.
3. Use the template image and place text on it.

You can configure the position of the text, and the hero image, even crop it to position it below transparent areas of your template image.

In your template
----------------

[](#in-your-template)

Add the following meta tags to your HTML `` tag:

```