Download the PHP package aryehraber/statamic-splash without Composer

Splash

Browse Unsplash images right from the CP.

Installation

Install the addon via composer:

Publish the fieldtype assets & config file:

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

After selecting an image and saving your content, the Unsplash response data will be accessible in templates using Antlers (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

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:

Example

Or using the shorthand:

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

Output

Since the photo's meta data is stored inside your content, you can also loop over the photographer's data using Antlers:

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

Alternatively, if you would like to save ALL photo data, you may use the all option instead.

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: