­čĹő Enjoying the content? Subscribe to our Medium publication for more articles like this. ­čĹç
Keep Learning

Create OG Image With PHP

BY Atakan Demircio─člu ÔÇó
Table of Contents

Adding text to an image using PHP can be crucial for various purposes, such as generating SEO images for Open Grapth images with post titles overlaid on a template background.

In this post, we will cover how to create an Open Graph image easily with using PHP.

Using the-og library

the-og-php-lib

 

GitHub: https://github.com/simonhamp/the-og

The-og library is a powerful tool that allows developers to generate Open Graph images programmatically with PHP. It provides a simple interface for adding text, shapes and making it ideal for dynamically generating images for web content.

Installation

composer require simonhamp/the-og

Here's a basic example:

use SimonHamp\TheOg\Background;
use SimonHamp\TheOg\Image;

(new Image())
    ->accentColor('#cc0000')
    ->border()
    ->url('https://example.com/blog/some-blog-post-url')
    ->title('Some blog post title that is quite big and quite long')
    ->description(<<<'TEXT'
        Some slightly smaller but potentially much longer subtext. It could be really long so we might need to trim it completely after many words.

        Some slightly smaller but potentially much longer subtext. It could be really long so we might need to trim it completely after many words.
    TEXT)
    ->background(Background::JustWaves, 0.2)
    ->save(__DIR__.'/test.png');

Writing Your Own Image Generator

Create OG Image With PHP image 1

It is not more than adding some text to an image. So you can use GDImage or Imagick to generate this type of image.

$title = $post->title ?? '';
$description = $post->meta_description ?? '';
$url = BASE_URL . "/{$post->slug}";
// Set the dimensions for the image

$width = 1280;
$height = 640;

// Create a new image with the specified dimensions

$image = \imagecreatetruecolor($width, $height);

// Load the background image

$imgPath = __DIR__ . "/../../public/images/og-bg.png";
$background = imagecreatefrompng($imgPath);

// Resize the background image to fit the canvas

imagecopyresampled($image, $background, 0, 0, 0, 0, $width, $height, imagesx($background), imagesy($background));

// Set text color to black

$textColor = imagecolorallocate($image, 0, 0, 0);

// Load font file

$font = __DIR__ . "/../../public/fonts/Inter/Inter-VariableFont_slnt,wght.ttf";
$boldFont = __DIR__ . "/../../public/fonts/Inter/static/Inter-Bold.ttf";
$semiboldFont = __DIR__ . "/../../public/fonts/Inter/static/Inter-SemiBold.ttf";

$titleX = 20;
$titleY = 175;

$descriptionX = 20;
$descriptionY = 250;

$urlX = 20;
$urlY = 100;

// Add text to the image

imagettftext($image, 16, 0, $urlX, $urlY, $textColor, $semiboldFont, $url);
imagettftext($image, 32, 0, $titleX, $titleY, $textColor, $boldFont, $title);
imagettftext($image, 20, 0, $descriptionX, $descriptionY, $textColor, $font, $description);

// Set content type header

header("Content-type: image/jpeg");
// cache the image for 30 days

header('Cache-Control: max-age=2592000');
header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 2592000) . ' GMT');

// Output the image

imagejpeg($image);

// Free up memory

imagedestroy($image);
imagedestroy($background);

Do not forget to download the fonts and set your paths correctly.

php