state/og-generator

v1.0.0 2024-07-29 13:23 UTC

Requires

• illuminate/support: >=10
• intervention/image: ^2.7
• statamic/cms: ^5.7

Requires (Dev)

• orchestra/testbench: ^9.1
• pestphp/pest: ^2.34

proprietary

• Christian Pav

README

Automatically generate images based on the title of your entries, customize backgrounds and fonts via the cp!

How to Install

You can search for this addon in the Tools > Addons section of the Statamic control panel and click install, or run the following command from your project root:

BASH

composer require state/og-generator

Configuration

You can configure via the cp by clicking "OG Generator" in the sidebar, and customize the form.

Options

Background

You can customize the background by choosing either background image or color, then choose an image or pick a color.

Font

You can upload your own ttf files, you can download ttf files from google fonts. Then you can set your font size and color.

Top and left will offset and place the text based on the values.

Size

To set the size of the image set the width and height. I recommend creating a higher resolution image initially, because the text can be fuzzy at a lower resolution.

Text wrapping

To wrap text at a certain point set the wrap at value, it is the number of characters until wrap, not pixels.

Collections

The last option to configure is to pick which collections the og generator will run on when saved.

Usage

If you configured the addon to generate on save for collections you can access the og_generator_image field on your entry as a normal asset field.

HTML

{{ if og_generator_image }}
    <meta property="og:image" content="{{ og_generator_image:permalink }}" />
{{ else }}
    {{ asset url="/assets/ogimage-default.jpg" }}
        <meta property="og:image" content="{{ permalink }}" />
    {{ /asset }}
{{ /if }}

Otherwise, you could use the built-in tags, these will generate new images if they don't exist and work on every collection.

HTML

{{ og_generator:og_image }}
<!-- outputs -->
<meta property="og:image" content="https://example.com/assets/post-slug.png" />

{{ og_generator:image class="rounded" }}
<!-- outputs -->
<img src="https://example.com/assets/post-slug.png" alt="Post Title" class="rounded" />