Create eye-catching Open Graph images for each (or some) site pages

Last update: Jun 30, 2022

Open Graph Image Generator for Laravel

Create Open Graph images (og:image, twitter:image, vk:image) for each (or some) site pages.

Open Graph Images Generator

Packagist Version GitHub Tests Status GitHub Code Style Status Packagist PHP Version Support License

Use page title to create an eye-catching page preview when users share the link on social networks or instant messengers. Learn more about Open Graph.

Features:

  • Image generation with your text and site name
  • Fully customizable (see configuration)
  • Small image size (15-50 Kb) with high resolution and quality (check it)
  • Aspect ratios presets for popular social networks

See examples

Requirements

  • PHP 7.4 or higher
  • Laravel 8 or higher
  • The Imagick PHP extension

Installation

You can install the package via composer:

composer require abordage/laravel-og-images

You can publish config file with:

php artisan vendor:publish --tag="og-images-config"

You can access the Open Graph Generator using the following facade:

Abordage\LaravelOpenGraphImages\Facades\OpenGraphImages

You can set a short alias for this facade in your config/app.php file:

return [
    // ...
    'aliases' => Facade::defaultAliases()->merge([
        // ...
        'OpenGraphImages' => Abordage\LaravelOpenGraphImages\Facades\OpenGraphImages::class,
    ])->toArray()
    // ...
];

Quick start

use Abordage\LaravelOpenGraphImages\Facades\OpenGraphImages;

$text = 'The adventures first, explanations take such a dreadful time!';
$path = \Storage::put('first-og-image.png');

$opengraph = OpenGraphImages::make($text)->save($path);

Note
All images are encoded in PNG format as it provides the best ratio between size/quality. For the same reason, the package uses the Imagick driver - in tests, it showed an advantage in speed and final size of the generated images.

Usage

// for <og:image>
OpenGraphImages::make($text)->save($path);
// or
OpenGraphImages::make($text, 'opengraph')->save($path);

// for <twitter:image>
OpenGraphImages::make($text, 'twitter')->save($path);

// for <vk:image>
OpenGraphImages::make($text, 'vk')->save($path);

// custom size
OpenGraphImages::makeCustom($text, 600, 400)->save($path);

After generation, you need to somehow organize the relationship of images with a specific page (for example, attach to a model). If you already have a solution ready to accept an image and attach it to a specific page, you can get the image as a string instead of saving it:

$imageBlob = OpenGraphImages::make($text)->get();

If after generation you need to get sizes of the image, you can get it as follows:

$openGraphImage = OpenGraphImages::make($text, 'twitter');
$openGraphImage->save($path);
$imageSizes = $openGraphImage->getImageSizes();
// return [
//    'width' => 1200,
//    'height' => 600
// ];

Usage with spatie/laravel-medialibrary

spatie/laravel-medialibrary is a great package for associate all sorts of files with Eloquent models. If you are using this package (or similar), all you need to do is to add new collections to the model and attach images using media library.

class Page extends Model implements HasMedia
{
    use InteractsWithMedia;
    
    // ...

    public function registerMediaCollections(): void
    {
        // ...
        
        $this->addMediaCollection('opengraph')
             ->singleFile();
       
        $this->addMediaCollection('twitter')
             ->singleFile();
    }
    
    // ...
}

Next, when creating a new page (or updating), generate an og-image and attach it:

$page = new Page();
$page->title = 'Your awesome title';
$page->save();

// generate image and attach to model
$image = OpenGraphImages::make($page->title);
$page->addMediaFromString($image->get())
     ->usingFileName(\Str::slug($page->title) . '.png')
     ->withCustomProperties($image->getImageSizes())
     ->toMediaCollection('opengraph');

Multiple images:

$page = new Page();
$page->title = 'Your awesome title';
$page->save();

$presets = ['opengraph', 'twitter', 'vk'];
foreach ($presets as $preset) {
    $image = OpenGraphImages::make($page->title, $preset);
    $page->addMediaFromString($image->get())
         ->usingFileName(\Str::slug($page->title) . '-' . $preset . '.png')
         ->withCustomProperties($image->getImageSizes())
         ->toMediaCollection($preset);
}

Now you can get the link for the og:image meta tag as follows:

$ogImageUrl = $page->getFirstMediaUrl('opengraph');
$twitterImageUrl = $page->getFirstMediaUrl('twitter');
$vkImageUrl = $page->getFirstMediaUrl('vk');

Configuration

$config = [
    /*
    |--------------------------------------------------------------------------
    | Background Color
    |--------------------------------------------------------------------------
    |
    | Supported: HEX, RGB or RGBA format
    |
    */
    'background_color' => '#474761',

    /*
    |--------------------------------------------------------------------------
    | Text Color
    |--------------------------------------------------------------------------
    |
    | Supported: HEX, RGB or RGBA format
    |
    */
    'text_color' => '#eee',

    /*
    |--------------------------------------------------------------------------
    | App Name
    |--------------------------------------------------------------------------
    |
    | Set null to disable
    |
    | Supported: string or null
    |
    */
    'app_name' => config('app.name'),

    /*
    |--------------------------------------------------------------------------
    | App Name Text Color
    |--------------------------------------------------------------------------
    |
    | Supported: HEX, RGB or RGBA format
    |
    */
    'app_name_color' => '#eee',

    /*
    |--------------------------------------------------------------------------
    | App Name Decoration Color
    |--------------------------------------------------------------------------
    |
    | Supported: HEX, RGB or RGBA format
    |
    */
    'app_name_decoration_color' => '#fb3361',

    /*
    |--------------------------------------------------------------------------
    | Text Alignment
    |--------------------------------------------------------------------------
    |
    | Multiline text alignment
    |
    | Supported: "left", "center", "right"
    |
    */
    'text_alignment' => 'left',

    /*
    |--------------------------------------------------------------------------
    | Text Sticky
    |--------------------------------------------------------------------------
    |
    | Supported: "left", "center", "right"
    |
    */
    'text_sticky' => 'center',

    /*
    |--------------------------------------------------------------------------
    | App Name Position
    |--------------------------------------------------------------------------
    |
    | Supported: "top-left", "top-center", "top-right",
    |            "bottom-left", "bottom-center", "bottom-right"
    |
    */
    'app_name_position' => 'bottom-center',

    /*
    |--------------------------------------------------------------------------
    | App Name Decoration Style
    |--------------------------------------------------------------------------
    |
    | Set null to disable
    |
    | Supported: "line", "label", "rectangle", null
    |
    */
    'app_name_decoration_style' => 'line',

    /*
    |--------------------------------------------------------------------------
    | Font Size
    |--------------------------------------------------------------------------
    |
    */
    'font_size' => 55,

    /*
    |--------------------------------------------------------------------------
    | App Name Font Size
    |--------------------------------------------------------------------------
    |
    */
    'app_name_font_size' => 30,

    /*
    |--------------------------------------------------------------------------
    | Text Font
    |--------------------------------------------------------------------------
    |
    | If set null, will be used Preset Font (Roboto Regular)
    |
    | Supported: "absolute/path/to/your/font.ttf", null
    |
    */
    'font_path' => null,

    /*
    |--------------------------------------------------------------------------
    | App Name Font
    |--------------------------------------------------------------------------
    |
    | If set null, will be used Preset Font (Roboto Medium)
    |
    | Supported: "absolute/path/to/your/font.ttf", null
    |
    */
    'app_name_font_path' => null,
];

API Reference

Method Returns Added in Changed in
make(string $text, string $preset = 'opengraph') self 0.1.0 0.2.0
makeCustom(string $text, int $width, int $height) self 0.2.0 -
get() string 0.1.0 -
save(string $path) boolean 0.1.0 -
getImageSizes() array 0.3.0 -

Images aspect ratios

Preset Aspect ratios Docs
make(string $text) 1200 x 630 (1.91:1)
make(string $text, 'opengraph') 1200 x 630 (1.91:1)
make(string $text, 'facebook') 1200 x 630 (1.91:1) fb
make(string $text, 'twitter') 1200 x 600 (2:1) twitter
make(string $text, 'vk') 1200 x 536 (2.2:1) vk

Roadmap

Add ability to use gradients and images for the background.

Testing

Run all tests

composer test:all

or

composer test:phpunit
composer test:phpstan
composer test:phpcs

Feedback

Find a bug or have a feature request? Open an issue, or better yet, submit a pull request - contribution welcome!

Contributing

Please see CONTRIBUTING for details.

Credits

License

The MIT License (MIT). Please see License File for more information.

GitHub

https://github.com/abordage/laravel-og-images
You might also like...

Site Web pour un site de conciergerie d'entreprise

DATE DE CREATION : 30 novembre 2021 • Développement d'un site Web pour une entreprise de conciergerie pour entreprise, une interface pour les dirigea

Jan 10, 2022

An object graph visualizer

An object graph visualizer

print_o An object graph visualizer for PHP What is object graph ? Object-oriented applications contain complex webs of interrelated objects. Objects a

Jun 11, 2022

Microsoft Graph Library for PHP.

Get started with the Microsoft Graph SDK for PHP If your project uses the Microsoft Graph API, you should use this library to make it easier to implem

Jan 5, 2022

Dependency graph visualization for composer.json (PHP + Composer)

Dependency graph visualization for composer.json (PHP + Composer)

clue/graph-composer Graph visualization for your project's composer.json and its dependencies: Table of contents Usage graph-composer show graph-compo

Jul 22, 2022

Shortest Path - have a function ShortestPath (strArr) take strArr which will be an array of strings which models a non-looping Graph.

Have the function ShortestPath(strArr) take strArr which will be an array of strings which models a non-looping Graph

Feb 5, 2022

Quickly and easily preview and test your Magento 2 order confirmation page, without hacks or spending time placing new order each time

Quickly and easily preview and test your Magento 2 order confirmation page, without hacks or spending time placing new order each time

Preview Order Confirmation Page for Magento 2 For Magento 2.0.x, 2.1.x, 2.2.x and 2.3.x Styling and testing Magento's order confirmation page can be a

May 19, 2022

A SilverStripe module for conveniently injecting JSON-LD metadata into the header of each rendered page in SilverStripe

A SilverStripe module for conveniently injecting JSON-LD metadata into the header of each rendered page in Silver

Apr 20, 2022

Another initiative where patient in need of Blood and recovered patients willing to donate Blood can come together under one platform and connect with each other.

Another initiative where patient in need of Blood and recovered patients willing to donate Blood can come together under one platform and connect with each other.

This is yet another initiative where patient in need of Blood and recovered patients willing to donate Blood can come together under one platform and connect with each other.

May 5, 2022

This Validate Class is for those who are looking for a validator that returns a code for every each error (Laravel/Api)

This Validate Class is for those who are looking for a validator that returns a code for every each error (Laravel/Api)

Validator-Class This Validate Class is for those who are looking for a validator that returns a code for every each error (Laravel/Api) Requirements A

Jul 18, 2022
Comments
  • 1. Bump lycheeverse/lychee-action from 1.5.0 to 1.5.1

    Bumps lycheeverse/lychee-action from 1.5.0 to 1.5.1.

    Release notes

    Sourced from lycheeverse/lychee-action's releases.

    Version 1.5.1

    Summary

    Bump lychee version to fix some regressions and extend the documentation.

    What's Changed

    New Contributors

    Full Changelog: https://github.com/lycheeverse/lychee-action/compare/v1.5.0...v1.5.1

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-08-01 07:54
  • 2. Bump dependabot/fetch-metadata from 1.3.1 to 1.3.3

    Bumps dependabot/fetch-metadata from 1.3.1 to 1.3.3.

    Release notes

    Sourced from dependabot/fetch-metadata's releases.

    v1.3.3

    What's Changed

    New Contributors

    Full Changelog: https://github.com/dependabot/fetch-metadata/compare/v1.3.2...v1.3.3

    v1.3.2

    What's Changed

    New Contributors

    Full Changelog: https://github.com/dependabot/fetch-metadata/compare/v1.3.1...v1.3.2

    Commits
    • 605e039 Merge pull request #233 from dependabot/v1.3.3-release-notes
    • e0f3842 v1.3.3
    • ac6adf8 Merge pull request #232 from jsok/patch-1
    • 15259f7 action.yaml: fix skip-commit-verification quoting
    • 90ed90d Merge pull request #226 from dependabot/v1.3.2-release-notes
    • 28b141f v1.3.2
    • cfb7274 Merge pull request #225 from dependabot/brrygrdn/skip-commit-verification
    • 6c87543 Bump dist/
    • d882a80 Update documentation
    • b1673a7 Add skip-commit-verification input
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-07-04 07:50
  • 3. Bump peter-evans/create-issue-from-file from 3 to 4

    Bumps peter-evans/create-issue-from-file from 3 to 4.

    Release notes

    Sourced from peter-evans/create-issue-from-file's releases.

    Create Issue From File v4.0.0

    What's new

    • Updated runtime to Node.js 16
      • The action now requires a minimum version of v2.285.0 for the Actions Runner.
      • If using GitHub Enterprise Server, the action requires GHES 3.4 or later.

    What's Changed

    Full Changelog: https://github.com/peter-evans/create-issue-from-file/compare/v3.0.0...v4.0.0

    Commits
    • 99b87c3 Merge pull request #569 from peter-evans/v4
    • 54e9f89 Update runtime to node 16
    • 23531c9 Merge pull request #564 from peter-evans/rm-workflow
    • a44b01c Remove workflow
    • 1c4be51 Merge pull request #543 from peter-evans/update-distribution
    • 14b06cf Update distribution
    • 3fbe775 Merge pull request #530 from peter-evans/update-dependencies
    • 5ff4717 Update dependencies
    • f99d147 Merge pull request #520 from peter-evans/dependabot/npm_and_yarn/ansi-regex-5...
    • 958c8dd Merge pull request #523 from peter-evans/update-distribution
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-06 07:24
This app is to measure the hand and eye co-ordination speed based on the score generated taken from Database
This app is to measure the hand and eye co-ordination speed based on the score generated taken from Database

CoOrdinationSpeedTest Website link: https://skyward-punctures.000webhostapp.com/ Try this only when you are a psychiatrist ?? ?? This app runs as php

Jan 12, 2022
This is an experiment to export all RFCs from the PHP wiki into Git, including the change history for each RFC (along with the date and author of each change). This is not meant to replace the wiki.

PHP Requests for Comments (RFCs) About This repository is an experiment to export all RFCs from the PHP wiki into Git, including the change history fo

Jun 20, 2022
Allow SVG images to be used in Magento CMS blocks and pages via the TinyMCE Wysiwyg Editor.
Allow SVG images to be used in Magento CMS blocks and pages via the TinyMCE Wysiwyg Editor.

Hyvä Themes - SVG support for the Magento CMS Wysiwyg Editor Allow SVG images to be used in CMS blocks and pages via the TinyMCE Wysiwyg Editor. hyva-

Jul 22, 2022
An open source tool that lets you create a SaaS website from docker images in 10 minutes.
An open source tool that lets you create a SaaS website from docker images in 10 minutes.

简体中文 Screenshots for members ( who subscribe the plan ) for admin ⚠️ This document was translated into English by deepl and can be improved by PR An o

Aug 6, 2022
A web app for the resolution of a mobile game in wich you have 4 images and a list of letters, then a few boxes to fill with the word connecting the four images.

4images_1mot_solutions A web app for the resolution of a mobile game in wich you have 4 images and a list of letters, then a few boxes to fill with th

Jan 13, 2022
Blacksmith is a code generation tool which automates the creation of common files that you'd typically create for each entity in your application.
Blacksmith is a code generation tool which automates the creation of common files that you'd typically create for each entity in your application.

Blacksmith is a code generation tool which automates the creation of common files that you'd typically create for each entity in your application.

Feb 10, 2022
This plugin allows you to create many-to-many relationships between pages in Kirby and synchronizes them on both sides.
This plugin allows you to create many-to-many relationships between pages in Kirby and synchronizes them on both sides.

Kirby 3 Many To Many Field This plugin allows you to create many-to-many relationships between pages in Kirby.

Jul 1, 2022
Coder Metabox for WordPress - Create Pages, Posts Custom Meta Fields options

Coder Metabox for WordPress Coder Metabox for WordPress - Create Pages, Posts Custom Meta Fields options. Step 1 call coder-metabox.php file in functi

Feb 19, 2022
The fixture plugin is really helpful if you want to create some static demo data for your shopware instance.

Fixture Plugin The fixture plugin is really helpful if you want to create some static demo data for your shopware instance. Installation Just add it t

Aug 8, 2022