Aryeh Raber

Splash

Aryeh Raber
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: splash

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

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).