daun/statamic-placeholders

Generate low-quality image placeholders for lazyloading Statamic assets

2.0.5 2024-05-01 09:09 UTC

Requires

• php: ^8.1
• guzzlehttp/guzzle: ^7.8
• intervention/image: ^2.7
• kornrunner/blurhash: ^1.2
• laravel/framework: ^9.21 || ^10.0
• srwiez/thumbhash: ^1.2
• statamic/cms: ^4.0

Requires (Dev)

• larastan/larastan: ^2.9
• laravel/pint: ^1.14
• mockery/mockery: ^1.6
• orchestra/testbench: ^8.21
• pestphp/pest: ^2.34
• pestphp/pest-plugin-laravel: ^2.3
• spatie/pest-plugin-snapshots: ^2.1

MIT

• Philipp Daun

• image
• placeholder
• statamic
• lazyloading
• lqip
• blurhash
• thumbhash

README

Generate image placeholders of Statamic assets for smoother lazyloading.

Low-Quality Image Placeholders (LQIP) improve the perceived performance of sites by showing a small blurry placeholder image while the high-quality version is loading and are often used in combination with progressive lazyloading.

Features

• Create blurry image placeholders for assets
• Choose between ThumbHash, BlurHash, and Average Color placeholders
• Generate placeholders on upload, or optionally on demand
• Console commands for batch generation

How It Works

The addon ships with a Placeholder Image fieldtype and will automatically generate a small blurry placeholder image for each asset with this fieldtype in its blueprint. In your frontend views, you can access the image placeholder as a data URI string to display while the high-quality image is loading.

Quick Start

1. Install using composer require daun/statamic-placeholders
2. Add a placeholder field to your asset blueprint → assets.yaml
3. Display placeholder data uris using the {{ placeholder }} field inside an {{ asset }} tag

Documentation

Read the documentation for a detailed guide to setting up and configuring the addon.

License

MIT