README

在CP中直接浏览Unsplash图片。

安装

通过composer安装插件

composer require aryehraber/statamic-splash

发布字段类型资产和配置文件

php please vendor:publish --tag=splash-config

安装完成后，您需要将Unsplash API Access Key 添加到 config/splash.php。

您可以通过Unsplash开发者页面注册免费账户。接下来，简单地创建一个“新应用”并使用演示 Access Key，这允许每小时50次请求，或者通过审批流程增加至每小时5000次请求（这仍然是免费的，但需要更多努力）。注意：“请求”仅指CP中的搜索查询，一旦选择了图片，您将引用CDN链接，这不会通过API。

使用方法

只需在您的蓝图内添加一个字段，并使用 type: splash 开始。

蓝图

fields:
  -
    handle: hero_image
    field:
      type: splash

选择图片并保存内容后，可以使用Antlers在模板中访问Unsplash响应数据（有关已保存的图片数据详情请见下文）。图片本身 不会 保存到您的资产容器中，而是使用Unsplash的CDN引用图片，也称为Hotlinking（这是他们API指南的要求）。

这里的优点是它大大减轻了服务器的负担，因为图片通常是页面中最重的资源。此外，由于Unsplash的CDN遍布全球，无论访客的位置如何，图片都将快速加载。

标签

原始

{{ splash:raw :image="field_name" }}

此标签输出图片的 raw URL的CDN链接。由于Unsplash照片的高质量特性，图片通常有10-20MB，这对于 大多数 网站来说是多余的；因此，您可以使用类似于Glide的参数请求您所需的确切内容（更多信息请见下文）。

示例

{{ splash:raw :image="hero_image" width="2000" quality="80" }}

图片

{{ splash:image :image="field_name" }} 或 {{ splash:field_name }}

此标签也输出图片的 raw URL的CDN链接，但包括一些合理的默认值以大幅减少图片文件大小。

以下参数中的任何一个都可以通过使用下文列出的参数来覆盖，默认使用的参数是

'q' => '80',
'w' => '1500',
'fit' => 'crop',
'crop' => 'faces,edges',
'auto' => 'format',

示例

{{ splash:image :image="hero_image" width="1000" }}

或者使用简写

{{ splash:hero_image width="1000" }}

归属

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

此标签输出来自他们的API指南的Unsplash归属文本，包括摄影师个人资料和Unsplash网站的链接。

示例

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

输出

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>

由于照片的元数据存储在您的内容中，您也可以使用Antlers遍历摄影师的数据

{{ hero_image:user }}
  <!-- access available user data -->
{{ /hero_image:user }}

照片数据

默认情况下，此插件只保存从Unsplash响应数据中提取的必需照片数据，以便工作。您可以使用点符号在config/splash.php中的data_saved配置选项中指定其他键。

示例

<?php

return [
    'data_saved' => [
        'description',
        'links',
        'user.username',
        'user.bio',
    ],
    // ...
];

或者，如果您希望保存所有照片数据，可以使用all选项。

<?php

return [
    'data_saved' => 'all',
    // ...
];

参数

Splash 提供了一系列类似 Glide 的参数，以满足您对图像转换的需求。您可以将任何 Unsplash 参数 输入到 raw 和 image 标签中开始使用。就像在 Statamic 中使用 Glide 一样，您还可以使用以下更易于阅读的别名参数。