Customizing the screenshot layout | laravel-og-image | Spatie

 SPATIE

  Laravel Open Graph Image
===========================

spatie.be/open-source

  [Docs](https://spatie.be/docs)  [Laravel-og-image](https://spatie.be/docs/laravel-og-image/v1)  Advanced-usage  Customizing the screenshot layout

 Version   v1

 Other versions for crawler [v1](https://spatie.be/docs/laravel-og-image/v1)

  Customizing the screenshot layout
- [ Introduction ](https://spatie.be/docs/laravel-og-image/v1/introduction)
- [ Requirements ](https://spatie.be/docs/laravel-og-image/v1/requirements)
- [ Installation & setup ](https://spatie.be/docs/laravel-og-image/v1/installation-setup)
- [ Support us ](https://spatie.be/docs/laravel-og-image/v1/support-us)
- [ Questions and issues ](https://spatie.be/docs/laravel-og-image/v1/questions-issues)
- [ Changelog ](https://spatie.be/docs/laravel-og-image/v1/changelog)
- [ About us ](https://spatie.be/docs/laravel-og-image/v1/about-us)

Basic usage
-----------

- [ How it works ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/how-it-works)
- [ Getting started ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/getting-started)
- [ Customizing screenshots ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/customizing-screenshots)
- [ Defining fallback images ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/defining-fallback-images)
- [ Caching and storage ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/managing-caching-and-storage)
- [ Pre-generating images ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/pre-generating-images)
- [ Clearing generated images ](https://spatie.be/docs/laravel-og-image/v1/basic-usage/clearing-generated-images)

Advanced usage
--------------

- [ Customizing the page URL ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/customizing-the-page-url)
- [ Using a custom screenshot driver ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/using-a-custom-screenshot-driver)
- [ Customizing the screenshot layout ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/customizing-the-screenshot-layout)
- [ Customizing actions ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/customizing-actions)
- [ Troubleshooting ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/troubleshooting)
- [ Using a hosted solution ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/using-a-hosted-solution)
- [ Using Laravel Boost ](https://spatie.be/docs/laravel-og-image/v1/advanced-usage/using-laravel-boost)

 Customizing the screenshot layout
=================================

When you visit a page with `?ogimage`, the package renders a minimal HTML document that wraps your template content. This document includes the page's `` (so CSS and fonts work) and a reset style that sets the viewport to the configured dimensions.

If you need to customize this layout (for example, to add extra styles, scripts, or change the document structure), you can publish the view:

```
php artisan vendor:publish --tag=og-image-views
```

This publishes `screenshot.blade.php` to `resources/views/vendor/og-image/`. The view receives these variables:

### $head

The contents of the original page's `` tag, including all CSS, fonts, and Vite assets.

### $templateContent

The HTML from your `` component.

### $width

The configured width in pixels (default: 1200).

### $height

The configured height in pixels (default: 630).

For even deeper control over how the screenshot page is rendered, you can override the `RenderOgImageScreenshotAction`. See [customizing actions](/docs/laravel-og-image/v1/advanced-usage/customizing-actions) for details.

 A good
match?
-------------

### What we do best

- All things Laravel
- Custom frontend components
- Building APIs
- AI-powered features
- Simplifying things
- Clean solutions
- Integrating services

### Not our cup of tea

- WordPress themes
- Cutting corners
- Free mockups to win a job
- "Just execute the briefing"

 In short: we'd like to be a **substantial part** of your project.

 [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)