PHPackages hosmelq/laravel-open-graph-image - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Image & Media](/categories/media) 4. / 5. hosmelq/laravel-open-graph-image ActiveLibrary[Image & Media](/categories/media) hosmelq/laravel-open-graph-image ================================ Generate Open Graph images for your Laravel application. v1.0.0(10mo ago)2233MITPHPPHP ^8.2CI passing Since Sep 2Pushed 10mo agoCompare [ Source](https://github.com/hosmelq/laravel-open-graph-image)[ Packagist](https://packagist.org/packages/hosmelq/laravel-open-graph-image)[ RSS](/packages/hosmelq-laravel-open-graph-image/feed)WikiDiscussions main Synced today READMEChangelog (1)Dependencies (23)Versions (2)Used By (0) Laravel Open Graph Image ======================== [](#laravel-open-graph-image) Generate dynamic Open Graph images for Laravel applications using Blade templates and Tailwind CSS. See it in action: a real Open Graph image generated from a Blade + Tailwind template. [![OG image example](https://camo.githubusercontent.com/bcfe30f36928126148077ff6b8d306b07aa1481447ac11c457abc095b12722cf/68747470733a2f2f6c61726176656c2d6f70656e2d67726170682d696d6167652e686f736d656c712e636f6d2f6f70656e2d67726170682d696d6167653f74656d706c6174653d64656d6f)](https://camo.githubusercontent.com/bcfe30f36928126148077ff6b8d306b07aa1481447ac11c457abc095b12722cf/68747470733a2f2f6c61726176656c2d6f70656e2d67726170682d696d6167652e686f736d656c712e636f6d2f6f70656e2d67726170682d696d6167653f74656d706c6174653d64656d6f) Source: Introduction ------------ [](#introduction) Using this package, you can generate Open Graph images from Blade templates styled with Tailwind CSS. Whether you want to create preview images for blog posts, product cards, or event announcements, this package handles it all. ``` {{-- In your Blade template --}} ``` The image is generated when accessed and cached for subsequent requests. Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 12+ - Node.js and npm - PHP extension ext-fileinfo (required for @embedImage) Installation & setup ------------------------ [](#installation--setup) You can install the package via composer: ``` composer require hosmelq/laravel-open-graph-image ``` ### Publishing the config file [](#publishing-the-config-file) Optionally, you can publish the config file with this command: ``` php artisan vendor:publish --tag="open-graph-image-config" ``` View the published config file.``` return [ /* |-------------------------------------------------------------------------- | Browsershot Configuration |-------------------------------------------------------------------------- | | Here you may configure various Browsershot options that control how | HTML content is converted into images. These settings will be passed | to the underlying Browsershot instance during image generation. | */ 'browsershot' => [ 'timeout' => (int) env('OPEN_GRAPH_IMAGE_BROWSERSHOT_TIMEOUT', 30), ], /* |-------------------------------------------------------------------------- | Cache Configuration |-------------------------------------------------------------------------- | | These settings determine the caching behavior for generated Open Graph | images and rendered views. You may specify different cache stores and | TTL values for images and views to optimize performance. | */ 'cache' => [ 'images' => [ 'enabled' => env('OPEN_GRAPH_IMAGE_CACHE_IMAGES_ENABLED', false), 'store' => env('OPEN_GRAPH_IMAGE_CACHE_IMAGES_STORE', 'file'), 'ttl' => (int) env('OPEN_GRAPH_IMAGE_CACHE_IMAGES_TTL', 604800), ], 'views' => [ 'enabled' => env('OPEN_GRAPH_IMAGE_CACHE_VIEWS_ENABLED', false), 'store' => env('OPEN_GRAPH_IMAGE_CACHE_VIEWS_STORE', 'file'), 'ttl' => (int) env('OPEN_GRAPH_IMAGE_CACHE_VIEWS_TTL', 3600), ], ], /* |-------------------------------------------------------------------------- | CSS Configuration |-------------------------------------------------------------------------- | | Here you may specify the CSS configuration for styling your Open Graph | images. These settings control how your generated images will be | visually styled and formatted. | */ 'css' => [ 'path' => env('OPEN_GRAPH_IMAGE_CSS_PATH', ''), ], /* |-------------------------------------------------------------------------- | Image Dimensions |-------------------------------------------------------------------------- | | These values determine the default dimensions for generated Open Graph | images. The standard recommended size for Open Graph images is | 1200x630 pixels, which provides optimal display across platforms. | */ 'dimensions' => [ 'height' => 630, 'width' => 1200, ], /* |-------------------------------------------------------------------------- | Route Configuration |-------------------------------------------------------------------------- | | These settings configure the HTTP routes that your Open Graph image | generator will respond to. You may customize the path, prefix, and | route names to fit your application's routing conventions. | */ 'route' => [ 'name' => env('OPEN_GRAPH_IMAGE_ROUTE_NAME', 'open-graph-image'), 'path' => env('OPEN_GRAPH_IMAGE_ROUTE_PATH', 'open-graph-image'), 'prefix' => env('OPEN_GRAPH_IMAGE_ROUTE_PREFIX', ''), 'preview' => [ 'enabled' => env('OPEN_GRAPH_IMAGE_ROUTE_PREVIEW_ENABLED', env('APP_ENV') === 'local'), 'name' => env('OPEN_GRAPH_IMAGE_ROUTE_PREVIEW_NAME', 'open-graph-image.preview'), 'path' => env('OPEN_GRAPH_IMAGE_ROUTE_PREVIEW_PATH', 'open-graph-image/preview'), ], ], ]; ``` ### Configuring Browsershot [](#configuring-browsershot) This package uses Browsershot for screenshot generation. For detailed requirements and installation instructions, see the [Browsershot requirements](https://spatie.be/docs/browsershot/v4/requirements). To get started, you'll need to install Puppeteer: ``` npm install puppeteer ``` ### Downloading Tailwind CLI [](#downloading-tailwind-cli) Download the Tailwind CSS v4 binary: ``` php artisan open-graph-image:download-tailwind-binary ``` Basic usage ----------- [](#basic-usage) ### Getting started [](#getting-started) Let's generate an Open Graph image for a blog post. We'll create a Blade template and add the meta component to your page. First, create a template in `resources/views/open-graph-image/templates/post.blade.php`: ``` {{ $title }} By {{ $author }} • {{ $date }} ``` Now, add the meta component to your page: ``` {{-- In your layout or page head --}} ``` The meta component outputs `og:image`, `og:image:width`, `og:image:height`, `og:image:type`, `twitter:card`, and `twitter:image` meta tags. The image is generated when accessed and cached for subsequent requests. ### Programmatically generating images [](#programmatically-generating-images) Generate images directly in your code: ``` use HosmelQ\OpenGraphImage\Facades\OpenGraphImage; $image = OpenGraphImage::template('post') ->with([ 'title' => 'Getting Started with Laravel', 'author' => 'Jane Smith', 'date' => 'December 1, 2024' ]) ->generate(); // Returns the PNG image as a string ``` ### Using the preview mode [](#using-the-preview-mode) During development, preview your templates as HTML without generating images: ``` http://your-app.test/open-graph-image/preview?template=post&title=Test&author=John ``` The preview route is only available in the local environment by default. Tip Use your browser's Responsive Mode with a 1200×630 viewport to preview templates at the exact Open Graph image dimensions. This speeds up design iteration without regenerating PNGs. Creating templates ------------------ [](#creating-templates) Templates are Blade views stored in `resources/views/open-graph-image/templates/`. ### Simple template [](#simple-template) ``` {{-- resources/views/open-graph-image/templates/simple.blade.php --}} {{ $text }} ``` ### Demo template [](#demo-template) ``` {{-- resources/views/open-graph-image/templates/demo.blade.php --}} Laravel Open Graph Image Generate Open Graph images for your Laravel application. Terminal $ composer require hosmelq/laravel-open-graph-image ``` ### Using the image embedding directive [](#using-the-image-embedding-directive) The `@embedImage` directive converts local images to data URIs. Use paths like `public_path('images/logo.png')`: ``` {{-- Embed a local image as a data URI --}} ``` Customizing CSS --------------- [](#customizing-css) The package processes your templates with Tailwind CSS v4. To use custom CSS, publish the default file: ``` php artisan vendor:publish --tag="open-graph-image-css" ``` This creates `resources/vendor/open-graph-image/css/open-graph-image.css` that you can modify: ``` @import "tailwindcss"; .gradient-text { @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent; } ``` Alternatively, use your own CSS file from any location: ``` // .env OPEN_GRAPH_IMAGE_CSS_PATH=/path/to/your/custom.css ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG.md](CHANGELOG.md) for more information on what has changed recently. Credits ------- [](#credits) - [Hosmel Quintana](https://github.com/hosmelq) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 33 — LowBetter than 72% of packages Maintenance54 Moderate activity, may be stable Popularity14 Limited adoption so far Community6 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 305d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/97fd048037c6d5ccfeebf11961838d5db2dca1baca14fefa373230b301389a03?d=identicon)[hosmelq](/maintainers/hosmelq) --- Top Contributors [![hosmelq](https://avatars.githubusercontent.com/u/1166143?v=4)](https://github.com/hosmelq "hosmelq (2 commits)") --- Tags meta-tagsopen-graphopen-graph-imageopen-graph-protocollaravelopen-graphmeta-tagshosmelqopen-graph-imageopen-graph-protocol ### Code Quality TestsPest Static AnalysisPHPStan, Rector Code StyleLaravel Pint Type Coverage Yes ### Embed Badge ![Health badge](/badges/hosmelq-laravel-open-graph-image/health.svg) ``` [![Health](https://phpackages.com/badges/hosmelq-laravel-open-graph-image/health.svg)](https://phpackages.com/packages/hosmelq-laravel-open-graph-image) ``` ### Alternatives [spatie/laravel-pdf Create PDFs in Laravel apps 1.0k4.8M47](/packages/spatie-laravel-pdf)[spatie/laravel-health Monitor the health of a Laravel application 87512.0M165](/packages/spatie-laravel-health)[spatie/laravel-medialibrary Associate files with Eloquent models 6.1k43.2M632](/packages/spatie-laravel-medialibrary)[finller/laravel-media A flexible media library for Laravel 472.1k](/packages/finller-laravel-media)[grumpydictator/firefly-iii Firefly III: a personal finances manager. 23.9k69.5k](/packages/grumpydictator-firefly-iii)[elegantly/laravel-media A flexible media library for Laravel 476.2k4](/packages/elegantly-laravel-media) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)