Download the PHP package mauricerenck/ogimage without Composer
On this page you can find all versions of the php package mauricerenck/ogimage. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download mauricerenck/ogimage
More information about mauricerenck/ogimage
Files in mauricerenck/ogimage
Package ogimage
Short Description Creates an Open Graph Image for each page
License MIT
Homepage https://github.com/mauricerenck/og-image
Informations about the package ogimage
OG Image
A Kirby OpenGraph Image Plugin
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
Use one of these methods to install the plugin:
- composer (recommended):
composer require mauricerenck/ogimage
- zip file: unzip main.zip as folder
site/plugins/ogimage
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
This plugins listens to /og-image
on any page. It will go through the following steps:
- Check if the page has a
ogimage
field - If you have anogimage
field, the plugin will use the image from that field and deliver it as the og-image. - Check if the page has a
hero
image - If you have ahero
image, the plugin can use that image and place it under the template image. - 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
Add the following meta tags to your HTML <head>
tag:
In your config
Given you have True Type Font and a template image, you want to add a text to, you can configure the plugin in your config.php
. Let say you have a transparent area in your template which should be filled with the hero image of your page. Let's also say, you want to fill that transparent area with a color if no hero image is set:
Options
Please make sure to prefix all the options with mauricerenck.ogimage.
.
Option | Default | Description |
---|---|---|
width |
1600 |
width of the resulting og-image |
height |
900 |
height of the resulting og-image |
field |
'ogImage' |
field for manualy setting an image |
image.template |
./../assets/template.png |
path to your og-image template image |
font.path |
'' |
mandatory (missing font will result in an error) |
font.color |
[0, 0, 0] |
color of the font [r,g,b] |
font.size |
80 |
size of the font |
heroImage.field |
hero |
path to your og-image template image |
heroImage.cropSize |
[600, 600] |
Size in pixels of the rendered hero image |
heroImage.position |
[0,0] |
x,y position of the hero image on the template image |
heroImage.fallbackColor |
[255, 123, 123] |
[r,g,b] color to fill the hero-image area if no image given |
heroImage.fallbackImage |
null |
path to a fallback when the hero image is not given |
title.field |
title |
The name of the field your want to use as title |
title.position |
[0, 0] |
[x,y] position of your text |
title.charactersPerLine |
20 |
Number of characters before a line break |