Adding images | laravel-mobile-pass | Spatie SPATIE Laravel Mobile Pass ====================== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-mobile-pass](https://spatie.be/docs/laravel-mobile-pass/v1) Basic-usage Adding images Version v1 Other versions for crawler [v1](https://spatie.be/docs/laravel-mobile-pass/v1) Adding images - [ Introduction ](https://spatie.be/docs/laravel-mobile-pass/v1/introduction) - [ Support us ](https://spatie.be/docs/laravel-mobile-pass/v1/support-us) - [ Requirements ](https://spatie.be/docs/laravel-mobile-pass/v1/requirements) - [ Installation & setup ](https://spatie.be/docs/laravel-mobile-pass/v1/installation-setup) - [ Getting credentials from Apple ](https://spatie.be/docs/laravel-mobile-pass/v1/getting-credentials-from-apple) - [ Getting credentials from Google ](https://spatie.be/docs/laravel-mobile-pass/v1/getting-credentials-from-google) - [ Questions and issues ](https://spatie.be/docs/laravel-mobile-pass/v1/questions-issues) - [ Changelog ](https://spatie.be/docs/laravel-mobile-pass/v1/changelog) - [ About us ](https://spatie.be/docs/laravel-mobile-pass/v1/about-us) Basic usage ----------- - [ Generating your first pass ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/generating-your-first-pass) - [ Delivering passes to users ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/handing-out-passes) - [ Adding images ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/adding-images) - [ Adding barcodes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/adding-barcodes) - [ Updating a pass ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/updating-a-pass) - [ Retrieving mobile passes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/retrieving-mobile-passes) - [ Expiring passes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/expiring-passes) Available pass types -------------------- - [ Introduction ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/introduction) - [ Boarding pass ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/boarding-pass) - [ Event ticket ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/event-ticket) - [ Coupon ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/coupon) - [ Loyalty card ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/loyalty) - [ Generic ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/generic) Apple Wallet ------------ - [ Field zones ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/field-zones) - [ Apple-specific methods ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/apple-specific-methods) - [ Pass relevance ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/pass-relevance) - [ NFC passes ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/nfc) - [ Attaching Wi-Fi credentials ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/attaching-wifi-credentials) - [ Storing mobile passes ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/storing-mobile-passes) Google Wallet ------------- - [ Pass classes ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/pass-classes) - [ Object methods ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/object-methods) - [ Hosting pass images ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/hosting-images) Advanced usage -------------- - [ Handling errors ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/handling-errors) - [ Customizing actions ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/customizing-actions) - [ Customizing models ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/customizing-models) - [ Reading stored passes ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/reading-stored-passes) - [ Events ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/events) - [ Testing your passes ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/testing-your-passes) Adding images ============= ### On this page 1. [ Apple ](#content-apple) 2. [ Google ](#content-google) 3. [ Background colors ](#content-background-colors) Apple and Google Wallet want pass artwork in very different shapes. Apple needs image files bundled into the signed `.pkpass`, so you point the builder at paths on disk. Google needs publicly reachable URLs, so you hand the Class a URL that Google's servers fetch. Apple ----------------------------------------------------------------------- Every Apple pass takes a logo (top-left corner) and an icon (the square seen in notifications and email attachments). Boarding passes also take a footer image above the barcode. Pass the path to the image file on disk: ``` $builder ->setLogoImage(public_path('images/logo.png')) ->setIconImage(public_path('images/icon.png')); ``` Apple renders passes at 1x, 2x, and 3x pixel densities. Providing higher-density versions gives you crisper results; pass them as extra arguments: ``` $builder->setLogoImage( x1Path: public_path('images/logo.png'), x2Path: public_path('images/logo@2x.png'), x3Path: public_path('images/logo@3x.png'), ); ``` If a path doesn't exist on disk, the builder throws an `InvalidArgumentException` right away so mistyped paths surface immediately. ### Recommended dimensions Apple publishes the exact sizes it expects. The values below are for the 1x density; double them for 2x, triple for 3x. Image1x size (points)NotesIcon29 × 29Used in notifications and email attachments. Ship this one at minimum.Logoup to 160 × 50Top-left of the pass.Thumbnailup to 90 × 90Square artwork next to primary fields on event tickets and generic passes.Strip375 × 123 (coupon) / 375 × 98 (event ticket)Full-width image behind the primary fields.Background180 × 220Event tickets only. Blurred and stretched by Wallet.Footer286 × 15Boarding passes only. Sits above the barcode.Apple's docs don't strictly require any of these, but passes feel unfinished without an icon (it's what shows up on the lock screen and in Mail), so treat that one as mandatory in practice. See Apple's [Pass Design and Creation](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/Creating.html) chapter for the full table, exact pixel sizes for every density, and which images each pass style supports. Google -------------------------------------------------------------------------- Google doesn't ship image bytes. You give the Class a URL, and Google fetches it when it renders the pass. The URL has to be publicly reachable over HTTPS. The methods live on the Class, not on the per-attendee Builder: ``` use Spatie\LaravelMobilePass\Builders\Google\EventTicketPassClass; EventTicketPassClass::make('beatles-shea-1965') // ... ->setLogoUrl('https://cdn.example.com/beatles-logo.png') ->setHeroImageUrl('https://cdn.example.com/beatles-hero.png') ->save(); ``` Different Class types expose different image setters. Event tickets and boarding passes take a logo and a hero image. Loyalty programs take a program logo via `setProgramLogoUrl()`. Offers take a logo. Google caches images it has fetched. When you change a URL's contents in place, you may need to use a new URL (or append a cache-busting query string) to see the new image. ### Recommended dimensions Google expects PNG at the dimensions below. The service scales images down when needed, but starting above the recommended size avoids soft edges on high-density displays. ImageRecommended size (px)NotesLogo660 × 660 (minimum)Masked into a circle. Keep the mark inside an 840 × 840 safe area with a 15% margin.Wide logo1280 × 400Used when a rectangular logo reads better than the circular one.Hero image1032 × 336Full-width banner across the body of the card. 3:1 or wider aspect.Full-width image1860 px wideVariable height. For featured hero art on generic passes.Above/below-barcode strip1600 × 80Thin strip around the barcode, 20 dp tall.Google's [Brand guidelines](https://developers.google.com/wallet/generic/resources/brand-guidelines) carry the full reference, including per-pass-type constraints. Background colors ----------------------------------------------------------------------------------------------------------- Both platforms support a background color (handy when you're not using a background image). On Apple pass a hex string to `setBackgroundColor()`: ``` $builder->setBackgroundColor('#1d72b8'); ``` On Google hand a hex string to `setBackgroundColor()` on the Class: ``` EventTicketPassClass::make('beatles-shea-1965') ->setBackgroundColor('#1d72b8') ->save(); ``` 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)