{"id":25861209,"url":"https://github.com/backstagephp/laravel-og-image","last_synced_at":"2025-10-17T17:52:02.947Z","repository":{"id":58935595,"uuid":"524980351","full_name":"backstagephp/laravel-og-image","owner":"backstagephp","description":"Dynamically create Open Graph images for your website","archived":false,"fork":false,"pushed_at":"2025-02-27T12:14:15.000Z","size":246,"stargazers_count":64,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-29T04:12:15.900Z","etag":null,"topics":["laravel","laravel-opengraph","open-graph","open-graph-protocol","social-graph","social-media"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/backstagephp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"backstagephp"}},"created_at":"2022-08-15T12:35:32.000Z","updated_at":"2025-02-26T21:53:23.000Z","dependencies_parsed_at":"2024-04-29T03:26:31.596Z","dependency_job_id":"05498f92-faf6-4c65-8297-0db92a8280c6","html_url":"https://github.com/backstagephp/laravel-og-image","commit_stats":{"total_commits":102,"total_committers":6,"mean_commits":17.0,"dds":0.4607843137254902,"last_synced_commit":"04a2237bf42113403f7076880090694da2963056"},"previous_names":["backstagephp/laravel-og-image"],"tags_count":30,"template":false,"template_full_name":"spatie/package-skeleton-laravel","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/backstagephp%2Flaravel-og-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/backstagephp%2Flaravel-og-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/backstagephp%2Flaravel-og-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/backstagephp%2Flaravel-og-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/backstagephp","download_url":"https://codeload.github.com/backstagephp/laravel-og-image/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289429,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel","laravel-opengraph","open-graph","open-graph-protocol","social-graph","social-media"],"created_at":"2025-03-01T23:23:31.560Z","updated_at":"2025-10-17T17:52:02.941Z","avatar_url":"https://github.com/backstagephp.png","language":"PHP","funding_links":["https://github.com/sponsors/backstagephp"],"categories":[],"sub_categories":[],"readme":"# Generate Dynamic Open Graph Images in Laravel using Blade Views\n\n![GitHub release (latest by date)](https://img.shields.io/github/v/release/backstagephp/laravel-og-image)\n[![Tests](https://github.com/backstagephp/laravel-og-image/actions/workflows/run-tests.yml/badge.svg?branch=main)](https://github.com/vormkracht10/laravel-og-image/actions/workflows/run-tests.yml)\n![Packagist PHP Version Support](https://img.shields.io/packagist/php-v/backstage/laravel-og-image)\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/backstage/laravel-og-image.svg?style=flat-square)](https://packagist.org/packages/vormkracht10/laravel-og-image)\n[![Total Downloads](https://img.shields.io/packagist/dt/backstage/laravel-og-image.svg?style=flat-square)](https://packagist.org/packages/vormkracht10/laravel-og-image)\n\nThis Laravel package enables you to dynamically create Open Graph images for your website based on a single Blade template with HTML and CSS. In our example we use the Tailwind CDN. So designing a dynamic Open Graph Image as a developer just got very easy using this package!\n\nJust add the meta tag with our url to the head of your page. The package will then generate the image and add it to the page. You can edit the view template which you can find in the resources folder.\n\n-   [Requirements](#requirements)\n-   [Installation](#installation)\n-   [Usage](#usage)\n    -   [Passing extra attributes](#passing-extra-attributes)\n    -   [Clearing cached images](#clearing-cached-images)\n-   [Changelog](#changelog)\n-   [Contributing](#contributing)\n-   [Security Vulnerabilities](#security-vulnerabilities)\n-   [Credits](#credits)\n-   [License](#license)\n\n## Requirements\n\n\u003cul\u003e\n  \u003cli\u003ePHP 8.2+\u003c/li\u003e\n\u003c/ul\u003e\n\n## Installation\n\nFirst install Google Chrome or Chromium, as you need the binary to use it as a headless browser.\n\n### On macOS\n\n```bash\n# Google Chrome\nbrew install --cask google-chrome \nsudo xattr -rd com.apple.quarantine /Applications/Chrome.app # Remove quarantine macOS protection mechanism\n\n# Chromium\nbrew install chromium\nsudo xattr -rd com.apple.quarantine /Applications/Chromium.app # Remove quarantine macOS protection mechanism\n```\n\n### On Debian/Ubuntu\n\nFor Ubuntu 22.04+ (Note: you'll need to update the environment variable of `CHROME_PATH` to `chomium-browser`)\n\n```bash\nsudo add-apt-repository ppa:savoury1/ffmpeg4\nsudo add-apt-repository ppa:savoury1/chromium\nsudo apt-get update\nsudo apt-get install chromium-browser\n```\n\nFor Ubuntu everything below 22.04\n\n```bash\n# Install chromium from PPA instead of snap, because of permission issues with snapd version\nsudo add-apt-repository ppa:saiarcot895/chromium-dev -y\nsudo apt update\nsudo apt install chromium-browser -y\n```\n\n### On Windows\n\nDownload and install [Google Chrome](https://google.com/chrome) or [Chromium](https://chromium.woolyss.com/download/) using on of these links.\n\n### Note: configure path to Chrome/Chromium\n\nSometimes it's necessary to point the package to a custom path where the binary is located, this can be set in the config `og-image.chrome.path`. The path can be retrieved using:\n\n```bash\n# macOS or Debian/Ubuntu\nwhich chrome # probably /Applications/Google\\ Chrome.app/Contents/MacOS/Google\\ Chrome\nwhich chromium # probably /opt/homebrew/bin/chromium\n\n# Windows\nwhere chrome # probably C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe\n```\n\n## Install and configure package\n\nYou can install the package via composer:\n\n```bash\ncomposer require backstage/laravel-og-image\n```\n\nRun the command to install the package:\n\n```bash\nphp artisan og-image:install\n```\n\nYou should also publish the views, to change the default layout of your Open Graph images:\n\n```bash\nphp artisan vendor:publish --tag=\"og-image-views\"\n```\n\nThis is the content of the published config file (published at `config/og-image.php`):\n\n```php\n\u003c?php\n\nreturn [\n    'debug' =\u003e env('OG_IMAGE_DEBUG', false), // disable caching og images for development\n\n    'extension' =\u003e 'jpg', // jpg, png, webp\n\n    'width' =\u003e 1200,\n    'height' =\u003e 630,\n\n    'chrome' =\u003e [\n        'path' =\u003e env('CHROME_PATH', 'chromium'),\n        'flags' =\u003e [\n            // '--disable-dev-shm-usage',\n            // '--disable-gpu',\n            // '--disable-setuid-sandbox',\n            // '--disable-software-rasterizer',\n            // '--hide-scrollbars',\n            // '--mute-audio',\n            // '--no-sandbox',\n        ],\n    ],\n\n    // The cache location to use.\n    'storage' =\u003e [\n        'disk' =\u003e 'public',\n        'path' =\u003e 'og-images',\n    ],\n\n    'metatags' =\u003e [\n        'og:title' =\u003e 'title',\n        'og:description' =\u003e 'description',\n        'og:type' =\u003e 'type',\n        'og:url' =\u003e 'url',\n    ],\n];\n```\n\n## Usage\n\nAdd the Blade component into the head of your page. Providing the attributes you need in your view file:\n\n```html\n\u003cx-og-image-tags title=\"Backstage\" subtitle=\"\" /\u003e\n```\n\nIf you want to use a different view than the default, add a `view` attribute with the path using dot or slash notation:\n\n```html\n\u003cx-og-image-tags title=\"Backstage\" subtitle=\"\" view=\"path.to.view.file\" /\u003e\n```\n\nIf you do not want to use a view but HTML directly in your view file, than you can use the slot to add the HTML to:\n\n\u003e [!NOTE]\n\u003e If you're using this option, make sure to clear caches before adding or changing the HTML using `php artisan og-image:clear` to see the result in your browser.\n\n```html\n\u003cx-og-image-tags title=\"Backstage\" subtitle=\"\" view=\"path.to.view.file\"\u003e\n    \u003ch1\u003eUse this HTML and inline CSS to style the open graph image...\u003c/h1\u003e\n\u003c/x-og-image-tags\u003e\n```\n\nIf you don't want to use the blade component you can also use the facade or helper method to generate the url to the image.\n\n```php\n// Facade\nuse Backstage\\OgImage\\Laravel\\Facades\\OgImage;\n\n$url = OgImage::url(['title' =\u003e 'Backstage', 'subtitle' =\u003e '...']);\n\n// or using the `og()` helper\n$url = og(['title' =\u003e 'Backstage', 'subtitle' =\u003e '...']);\n```\n\nAnd add it like this to your Blade file:\n\n```html\n\u003cmeta property=\"og:image\" content=\"{!! $url !!}\"\u003e\n\u003cmeta property=\"og:image:type\" content=\"image/{{ config('og-image.extension') }}\"\u003e\n\u003cmeta property=\"og:image:width\" content=\"{{ config('og-image.width') }}\"\u003e\n\u003cmeta property=\"og:image:height\" content=\"{{ config('og-image.height') }}\"\u003e\n```\n\nWhen you share the page on any platform, the image will automatically be generated, cached and then shown in your post. The image from the default template will look like this:\n\n![Default template](docs/og-image-template.jpeg)\n\nThis component uses the 'template' blade view by default. You can change this template to your needs. It is even possible to pass more attributes than the default ones. You can find the default template in the resources folder.\n\n### Passing extra attributes\n\nWant to add more custom attributes to modify the button text for example? Simply pass them down to the blade component, facade or helper method:\n\n```html\n\u003cx-og-image-tags\n    title=\"Backstage\"\n    subtitle=\"\"\n    button=\"Read more\"\n/\u003e\n```\n\n```php\n// Facade\nuse Backstage\\OgImage\\Laravel\\Facades\\OgImage;\n\nOgImage::url(['title' =\u003e 'Slimme websites', 'subtitle' =\u003e '...', 'button' =\u003e 'Read more']);\n\n// Helper\nog(['title' =\u003e 'Backstage', 'subtitle' =\u003e '...', 'button' =\u003e 'Read more']);\n```\n\nYou can now access the variable in your view by using the `{{ $button }}` variable.\n\n### Generate image without using the blade component\n\nWhen you need to generate the image without using the blade component, you can use the following method:\n\n```php\nOgImage::createImageFromParams(['title' =\u003e 'Backstage', 'subtitle' =\u003e '...']);\n```\n\nThis will return the actual image from your configured storage. You can use this method to generate the image in your own controller for example.\n\n### Clearing cached images\n\nAll generated open graph images are cached by default. If you want to remove the cache, you can use the following command:\n\n```bash\nphp artisan og-image:clear-cache\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/backstagephp/.github/blob/main/CONTRIBUTING.md) for details.\n\n## Security Vulnerabilities\n\nPlease review [our security policy](../../security/policy) on how to report security vulnerabilities.\n\n## Credits\n\n-   [Bas van Dinther](https://github.com/baspa)\n-   [Mark van Eijk](https://github.com/markvaneijk)\n-   [All Contributors](../../contributors)\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbackstagephp%2Flaravel-og-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbackstagephp%2Flaravel-og-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbackstagephp%2Flaravel-og-image/lists"}