包简介

Creates an Open Graph Image for each page

README 文档

README

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 an ogimage 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 a hero 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:

<meta property="og:image" content="<?= $page->url(); ?>/og-image" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />

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:

<?php
return [
    "mauricerenck.ogimage" => [
        "font.path" => "assets/spectral-regular-webfont.ttf", // path to your ttf font relative from your document root
        "font.size" => 50,
        "font.lineheight" => 1.5,
        "image.template" => "assets/img/og-image-template.png", // path to your template image relative from your document root
        "title.position" => [300, 35], // x,y position of your text in pixel
        "title.charactersPerLine" => 30, // number of characters before a line break
        "heroImage.field" => 'myHero', // fieldname of the hero image
        "heroImage.cropsize" => [738, 465], // size in pixels of the rendered hero image
        "heroImage.position" => [429, 287], // x,y position of the hero image on the template image
        "heroImage.fallbackColor" => [3, 105, 161], // r,g,b color to fill the hero-image area if no image given
        "heroImage.fallbackImage" => "assets/img/og-image-hero-fallback.png", // OR path to a fallback when the hero image is not given
    ]
]

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
`title.centerX`	`false`	Center text on x-axis
`title.centerY`	`false`	Center text on y-axis

mauricerenck/ogimage 适用场景与选型建议

mauricerenck/ogimage 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 3.32k 次下载、GitHub Stars 达 20，最近一次更新时间为 2024 年 10 月 30 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 mauricerenck/ogimage 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 mauricerenck/ogimage 我们能提供哪些服务？

定制开发 / 二次开发

基于 mauricerenck/ogimage 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

mauricerenck/ogimage

包简介