PHPackages                             aryehraber/statamic-splash - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. aryehraber/statamic-splash

ActiveStatamic-addon[Utility & Helpers](/categories/utility)

aryehraber/statamic-splash
==========================

Browse Unsplash images right from the CP.

v2.2.0(2y ago)125.8k↓85%6MITVue

Since Apr 10Pushed 2y ago2 watchersCompare

[ Source](https://github.com/aryehraber/statamic-splash)[ Packagist](https://packagist.org/packages/aryehraber/statamic-splash)[ Docs](https://github.com/aryehraber/statamic-splash)[ GitHub Sponsors](https://github.com/aryehraber)[ RSS](/packages/aryehraber-statamic-splash/feed)WikiDiscussions master Synced 3d ago

READMEChangelog (10)Dependencies (1)Versions (14)Used By (0)

Splash
======

[](#splash)

**Browse Unsplash images right from the CP.**

Installation
------------

[](#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](https://unsplash.com/developers). 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
-----

[](#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 Unsplash response data will be accessible in templates using Antlers ([more on saved photo data below](#photo-data)). 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](https://help.unsplash.com/en/articles/2511271-guideline-hotlinking-images)).

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

[](#tags)

### Raw

[](#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

[](#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

[](#attribution)

`{{ splash:attribution :image="field_name" }}`

This tag outputs the Unsplash attribution text from their [API Guidelines](https://help.unsplash.com/en/articles/2511315-guideline-attribution), including links to the photographer's profile and Unsplash website.

**Example**

```
{{ splash:attribution :image="hero_image" }}
```

**Output**

```
Photo by Annie Spratt on Unsplash
```

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 }}

{{ /hero_image:user }}
```

---

### Photo Data

[](#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**

```