{"id":31219805,"url":"https://github.com/hosmelq/laravel-open-graph-image","last_synced_at":"2025-09-21T17:39:27.548Z","repository":{"id":312748152,"uuid":"1048620058","full_name":"hosmelq/laravel-open-graph-image","owner":"hosmelq","description":"Generate dynamic Open Graph images for Laravel applications using Blade templates and Tailwind CSS.","archived":false,"fork":false,"pushed_at":"2025-09-01T19:46:08.000Z","size":181,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-01T20:16:27.033Z","etag":null,"topics":["meta-tags","open-graph","open-graph-image","open-graph-protocol"],"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/hosmelq.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-01T18:34:46.000Z","updated_at":"2025-09-01T19:46:11.000Z","dependencies_parsed_at":"2025-09-01T20:16:29.763Z","dependency_job_id":"08f7e618-9acd-45cc-ac98-36d533d8fb14","html_url":"https://github.com/hosmelq/laravel-open-graph-image","commit_stats":null,"previous_names":["hosmelq/laravel-open-graph-image"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/hosmelq/laravel-open-graph-image","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosmelq%2Flaravel-open-graph-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosmelq%2Flaravel-open-graph-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosmelq%2Flaravel-open-graph-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosmelq%2Flaravel-open-graph-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hosmelq","download_url":"https://codeload.github.com/hosmelq/laravel-open-graph-image/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hosmelq%2Flaravel-open-graph-image/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":276277102,"owners_count":25614989,"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","status":"online","status_checked_at":"2025-09-21T02:00:07.055Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["meta-tags","open-graph","open-graph-image","open-graph-protocol"],"created_at":"2025-09-21T17:39:26.449Z","updated_at":"2025-09-21T17:39:27.532Z","avatar_url":"https://github.com/hosmelq.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Laravel Open Graph Image\n\nGenerate dynamic Open Graph images for Laravel applications using Blade templates and Tailwind CSS.\n\nSee it in action: a real Open Graph image generated from a Blade + Tailwind template.\n\n![OG image example](https://laravel-open-graph-image.hosmelq.com/open-graph-image?template=demo)\n\nSource: https://laravel-open-graph-image.hosmelq.com/open-graph-image?template=demo\n\n## Introduction\n\nUsing 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.\n\n```php\n{{-- In your Blade template --}}\n\u003cx-open-graph-image-meta \n    template=\"post\"\n    :data=\"[\n        'author' =\u003e $post-\u003eauthor-\u003ename,\n        'title' =\u003e $post-\u003etitle,\n    ]\"\n/\u003e\n```\n\nThe image is generated when accessed and cached for subsequent requests.\n\n## Requirements\n\n- PHP 8.2+\n- Laravel 12+\n- Node.js and npm\n- PHP extension ext-fileinfo (required for @embedImage)\n\n## Installation \u0026 setup\n\nYou can install the package via composer:\n\n```bash\ncomposer require hosmelq/laravel-open-graph-image\n```\n\n### Publishing the config file\n\nOptionally, you can publish the config file with this command:\n\n```bash\nphp artisan vendor:publish --tag=\"open-graph-image-config\"\n```\n\n\u003cdetails\u003e\n\u003csummary\u003eView the published config file.\u003c/summary\u003e\n\n```php\nreturn [\n\n    /*\n    |--------------------------------------------------------------------------\n    | Browsershot Configuration\n    |--------------------------------------------------------------------------\n    |\n    | Here you may configure various Browsershot options that control how\n    | HTML content is converted into images. These settings will be passed\n    | to the underlying Browsershot instance during image generation.\n    |\n    */\n\n    'browsershot' =\u003e [\n        'timeout' =\u003e (int) env('OPEN_GRAPH_IMAGE_BROWSERSHOT_TIMEOUT', 30),\n    ],\n\n    /*\n    |--------------------------------------------------------------------------\n    | Cache Configuration\n    |--------------------------------------------------------------------------\n    |\n    | These settings determine the caching behavior for generated Open Graph\n    | images and rendered views. You may specify different cache stores and\n    | TTL values for images and views to optimize performance.\n    |\n    */\n\n    'cache' =\u003e [\n        'images' =\u003e [\n            'enabled' =\u003e env('OPEN_GRAPH_IMAGE_CACHE_IMAGES_ENABLED', false),\n            'store' =\u003e env('OPEN_GRAPH_IMAGE_CACHE_IMAGES_STORE', 'file'),\n            'ttl' =\u003e (int) env('OPEN_GRAPH_IMAGE_CACHE_IMAGES_TTL', 604800),\n        ],\n\n        'views' =\u003e [\n            'enabled' =\u003e env('OPEN_GRAPH_IMAGE_CACHE_VIEWS_ENABLED', false),\n            'store' =\u003e env('OPEN_GRAPH_IMAGE_CACHE_VIEWS_STORE', 'file'),\n            'ttl' =\u003e (int) env('OPEN_GRAPH_IMAGE_CACHE_VIEWS_TTL', 3600),\n        ],\n    ],\n\n    /*\n    |--------------------------------------------------------------------------\n    | CSS Configuration\n    |--------------------------------------------------------------------------\n    |\n    | Here you may specify the CSS configuration for styling your Open Graph\n    | images. These settings control how your generated images will be\n    | visually styled and formatted.\n    |\n    */\n\n    'css' =\u003e [\n        'path' =\u003e env('OPEN_GRAPH_IMAGE_CSS_PATH', ''),\n    ],\n\n    /*\n    |--------------------------------------------------------------------------\n    | Image Dimensions\n    |--------------------------------------------------------------------------\n    |\n    | These values determine the default dimensions for generated Open Graph\n    | images. The standard recommended size for Open Graph images is\n    | 1200x630 pixels, which provides optimal display across platforms.\n    |\n    */\n\n    'dimensions' =\u003e [\n        'height' =\u003e 630,\n        'width' =\u003e 1200,\n    ],\n\n    /*\n    |--------------------------------------------------------------------------\n    | Route Configuration\n    |--------------------------------------------------------------------------\n    |\n    | These settings configure the HTTP routes that your Open Graph image\n    | generator will respond to. You may customize the path, prefix, and\n    | route names to fit your application's routing conventions.\n    |\n    */\n\n    'route' =\u003e [\n        'name' =\u003e env('OPEN_GRAPH_IMAGE_ROUTE_NAME', 'open-graph-image'),\n        'path' =\u003e env('OPEN_GRAPH_IMAGE_ROUTE_PATH', 'open-graph-image'),\n        'prefix' =\u003e env('OPEN_GRAPH_IMAGE_ROUTE_PREFIX', ''),\n\n        'preview' =\u003e [\n            'enabled' =\u003e env('OPEN_GRAPH_IMAGE_ROUTE_PREVIEW_ENABLED', env('APP_ENV') === 'local'),\n            'name' =\u003e env('OPEN_GRAPH_IMAGE_ROUTE_PREVIEW_NAME', 'open-graph-image.preview'),\n            'path' =\u003e env('OPEN_GRAPH_IMAGE_ROUTE_PREVIEW_PATH', 'open-graph-image/preview'),\n        ],\n    ],\n\n];\n```\n\u003c/details\u003e\n\n### Configuring Browsershot\n\nThis package uses Browsershot for screenshot generation. For detailed requirements and installation instructions, see the [Browsershot requirements](https://spatie.be/docs/browsershot/v4/requirements).\n\nTo get started, you'll need to install Puppeteer:\n\n```bash\nnpm install puppeteer\n```\n\n### Downloading Tailwind CLI\n\nDownload the Tailwind CSS v4 binary:\n\n```bash\nphp artisan open-graph-image:download-tailwind-binary\n```\n\n## Basic usage\n\n### Getting started\n\nLet's generate an Open Graph image for a blog post. We'll create a Blade template and add the meta component to your page.\n\nFirst, create a template in `resources/views/open-graph-image/templates/post.blade.php`:\n\n```blade\n\u003cx-open-graph-image-layout\u003e\n    \u003cdiv class=\"flex h-screen items-center justify-center bg-gradient-to-br from-blue-500 to-purple-600\"\u003e\n        \u003cdiv class=\"mx-auto max-w-4xl p-12 text-center\"\u003e\n            \u003ch1 class=\"mb-4 text-6xl font-bold text-white\"\u003e\n                {{ $title }}\n            \u003c/h1\u003e\n            \u003cp class=\"text-2xl text-white/90\"\u003e\n                By {{ $author }} • {{ $date }}\n            \u003c/p\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/x-open-graph-image-layout\u003e\n```\n\nNow, add the meta component to your page:\n\n```blade\n{{-- In your layout or page head --}}\n\u003cx-open-graph-image-meta \n    template=\"post\" \n    :data=\"[\n        'title' =\u003e $post-\u003etitle,\n        'author' =\u003e $post-\u003eauthor-\u003ename,\n        'date' =\u003e $post-\u003epublished_at-\u003eformat('F j, Y')\n    ]\"\n/\u003e\n```\n\nThe 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.\n\n### Programmatically generating images\n\nGenerate images directly in your code:\n\n```php\nuse HosmelQ\\OpenGraphImage\\Facades\\OpenGraphImage;\n\n$image = OpenGraphImage::template('post')\n    -\u003ewith([\n        'title' =\u003e 'Getting Started with Laravel',\n        'author' =\u003e 'Jane Smith',\n        'date' =\u003e 'December 1, 2024'\n    ])\n    -\u003egenerate(); // Returns the PNG image as a string\n```\n\n### Using the preview mode\n\nDuring development, preview your templates as HTML without generating images:\n\n```\nhttp://your-app.test/open-graph-image/preview?template=post\u0026title=Test\u0026author=John\n```\n\nThe preview route is only available in the local environment by default.\n\n\u003e [!TIP]\n\u003e 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.\n\n## Creating templates\n\nTemplates are Blade views stored in `resources/views/open-graph-image/templates/`.\n\n### Simple template\n\n```blade\n{{-- resources/views/open-graph-image/templates/simple.blade.php --}}\n\u003cx-open-graph-image-layout\u003e\n    \u003cdiv class=\"flex h-screen items-center justify-center bg-white\"\u003e\n        \u003ch1 class=\"text-5xl font-bold\"\u003e{{ $text }}\u003c/h1\u003e\n    \u003c/div\u003e\n\u003c/x-open-graph-image-layout\u003e\n```\n\n### Demo template\n\n```blade\n{{-- resources/views/open-graph-image/templates/demo.blade.php --}}\n\u003cx-open-graph-image-layout\u003e\n    \u003cdiv class=\"flex h-screen items-center justify-center bg-gray-950 p-20 text-white\"\u003e\n        \u003cdiv class=\"flex flex-col gap-y-16\"\u003e\n            \u003cdiv class=\"flex flex-col gap-y-4\"\u003e\n                \u003cdiv class=\"text-4xl\"\u003eLaravel Open Graph Image\u003c/div\u003e\n                \u003cdiv class=\"text-6xl leading-tight text-gray-400\"\u003e\n                    Generate Open Graph images for your\u003cbr\u003e\n                    \u003cspan class=\"text-sky-400\"\u003eLaravel\u003c/span\u003e application.\n                \u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"self-start rounded-xl bg-white/5 p-1 inset-ring inset-ring-white/10\"\u003e\n                \u003cdiv class=\"px-3 pt-0.5 pb-1.5 text-lg text-white/50\"\u003e\n                    Terminal\n                \u003c/div\u003e\n                \u003cdiv class=\"rounded-lg bg-white/5 p-5 font-mono text-xl\"\u003e\n                    $ composer require hosmelq/laravel-open-graph-image\n                \u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/div\u003e\n\u003c/x-open-graph-image-layout\u003e\n```\n\n### Using the image embedding directive\n\nThe `@embedImage` directive converts local images to data URIs. Use paths like `public_path('images/logo.png')`:\n\n```blade\n{{-- Embed a local image as a data URI --}}\n\u003cimg src=\"@embedImage(public_path('images/logo.png'))\"\u003e\n```\n\n## Customizing CSS\n\nThe package processes your templates with Tailwind CSS v4. To use custom CSS, publish the default file:\n\n```bash\nphp artisan vendor:publish --tag=\"open-graph-image-css\"\n```\n\nThis creates `resources/vendor/open-graph-image/css/open-graph-image.css` that you can modify:\n\n```css\n@import \"tailwindcss\";\n\n.gradient-text {\n    @apply bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent;\n}\n```\n\nAlternatively, use your own CSS file from any location:\n\n```php\n// .env\nOPEN_GRAPH_IMAGE_CSS_PATH=/path/to/your/custom.css\n```\n\n## Testing\n\n```bash\ncomposer test\n```\n\n## Changelog\n\nPlease see [CHANGELOG.md](CHANGELOG.md) for more information on what has changed recently.\n\n## Credits\n\n- [Hosmel Quintana](https://github.com/hosmelq)\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%2Fhosmelq%2Flaravel-open-graph-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhosmelq%2Flaravel-open-graph-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhosmelq%2Flaravel-open-graph-image/lists"}