Splash
Browse Unsplash images right from the CP.
Installation
Install the addon via composer:
composer require aryehraber/statamic-splash
Publish the fieldtype assets & config file:
php please vendor:publish --tag=splash-config
Once installed, you will need to add an Unsplash API Access Key to config/splash.php.
You can register for a free account via the Unsplash Developers page. Next, simply create a "New Application" and use the Demo Access Key, which allows 50 requests/hour, or go through the approval process to increase to 5000 requests/hour (this is still free but takes a little more effort). Note: "requests" only refers to search queries in the CP, once an image has been selected you will be referencing the CDN link which doesn't go through the API.
Usage
Simply add a field inside your blueprint and use type: splash to get started.
Blueprint
fields:
-
handle: hero_image
field:
type: splashAfter selecting an image and saving your content, the Unsplash response data will be accessible in templates using Antlers (more on saved photo data below). The image itself will not be saved inside your Asset Container, instead you will be referencing images using Unsplash's CDN, also called Hotlinking (this is required by their API Guidelines).
The benefit here is that it takes a significant load off your server, since images are often the heaviest assets on a page. Additionally, since Unsplash's CDN is spread worldwide, images will load super fast regardless of the visitor's location.
Tags
Raw
{{ splash:raw :image="field_name" }}
This tag outputs the CDN link to the image's raw URL. Due to the high-quality nature of Unsplash photos, images are often 10-20MB, which is overkill for most websites; you can therefore use a few Glide-like parameters to request exactly what you need (more info below).
Example
{{ splash:raw :image="hero_image" width="2000" quality="80" }}Image
{{ splash:image :image="field_name" }} or {{ splash:field_name }}
This tag also outputs the CDN link to the image's raw URL, but includes a few sensible defaults to reduce the image filesize a whole lot.
Any of these params can be overriden by using the parameters listed below, the defaults used are:
'q' => '80',
'w' => '1500',
'fit' => 'crop',
'crop' => 'faces,edges',
'auto' => 'format',Example
{{ splash:image :image="hero_image" width="1000" }}Or using the shorthand:
{{ splash:hero_image width="1000" }}Attribution
{{ splash:attribution :image="field_name" }}
This tag outputs the Unsplash attribution text from their API Guidelines, including links to the photographer's profile and Unsplash website.
Example
{{ splash:attribution :image="hero_image" }}Output
Photo by <a href="https://unsplash.com/@anniespratt?utm_source=statamic_splash&utm_medium=referral">Annie Spratt</a> on <a href="https://unsplash.com/?utm_source=statamic_splash&utm_medium=referral">Unsplash</a>Since the photo's meta data is stored inside your content, you can also loop over the photographer's data using Antlers:
{{ hero_image:user }}
<!-- access available user data -->
{{ /hero_image:user }}Photo Data
By default, only the required photo data is saved from the Unsplash response data for this addon to work. You may specify additional keys using dot notation in the data_saved config option inside config/splash.php.
Example
<?php
return [
'data_saved' => [
'description',
'links',
'user.username',
'user.bio',
],
// ...
];Alternatively, if you would like to save ALL photo data, you may use the all option instead.
<?php
return [
'data_saved' => 'all',
// ...
];Parameters
Splash offers a number of Glide-like parameters to transform images to your needs. You can pass any Unsplash parameter into the raw and image tags to get started. Just like when using Glide within Statamic, you can also use the easier-to-read alias parameters below:
| Param | Description |
|---|---|
width |
Sets the width (in pixels). |
height |
Sets the height (in pixels). |
square |
Shortcut to set width and height to the same value. |
quality |
Sets the compression quality (value between 0 and 100). |
format |
Encodes the image to a specific format (recommended to use auto="format" instead to auto-pick based on visitor's browser). |
dpr |
Adjusts the device pixel ratio of the image. |
fit |
Changes the fit of the image within the specified dimensions (see all available values on Imgix). |
crop |
Applies cropping to the image (see all available values on Imgix). |
auto |
Automates a baseline level of optimization for the image (see all available values on Imgix). |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent