README

Cloudinary 是一个 Statamic 插件，允许您使用 Cloudinary 来交付您的资源。

特性

此插件允许您

• 利用 Cloudinary 的转换和交付能力
• 适用于图像和视频
• 自动将媒体上传到 Cloudinary

安装方法

从您的项目根目录运行以下命令

composer require tfd/statamic-cloudinary

使用方法

1. 创建 Cloudinary 账户

前往 https://cloudinary.com 并创建一个免费账户。
建议在 Cloudinary 的媒体库中创建一个新文件夹，用于存放您网站的所有媒体。

转到 设置 > 上传 > 自动上传映射 并填写以下内容

• 文件夹：您新创建的文件夹
• URL 前缀：您网站的 URL，包括一个 尾部斜杠

从您的 Cloudinary 控制台获取以下信息

• 云名称
• API 环境变量

2. 发布 Cloudinary 配置文件

从您的项目根目录运行以下命令

php artisan vendor:publish --tag="cloudinary-config"

这将在 config/statamic 内创建一个 cloudinary.php 文件。

3. 设置 Cloudinary 变量

在 cloudinary.php 文件中输入以下数据或使用您的项目的 .env 文件。
auto_mapping_folder 是您在第一步中创建的文件夹。 url 是您从第一步中复制的 API 环境变量。

<?php

return [
    'cloud_name' => env('CLOUDINARY_CLOUD_NAME', null),
    'auto_mapping_folder' => env('CLOUDINARY_AUTO_MAPPING_FOLDER', ''),
    'url' => env('CLOUDINARY_URL', ''),
];

CLOUDINARY_CLOUD_NAME=xxx
CLOUDINARY_AUTO_MAPPING_FOLDER=xxx
CLOUDINARY_URL=cloudinary://xxx:xxx@xxx

4. 使用 Cloudinary 标签

现在您可以在视图内部使用 Cloudinary 标签了。

一些示例

<img src="{{ cloudinary:image }}" />

图像根据默认转换参数进行转换，请参阅步骤 5。

<img src="{{ cloudinary:image width="800" height="500" }}">

图像调整为 800 x 500 像素。

{{ cloudinary:image width="400" height="300" }}
<img src="{{ url }}" width="{{ width }}" height="{{ height }}" />
{{ /cloudinary:image }}

使用标签对进行替代使用。

{{ cloudinary:image width="400" }}
<img src="{{ url }}" width="{{ width }}" height="{{ height }}" />
{{ /cloudinary:image }}

如果您在使用标签对时只提供宽度或高度，插件将自动根据图像的宽高比计算另一个维度，并将此值提供给您的视图。

<video src="{{ cloudinary:video width="600" height="400" effect="blur:1000" }}" muted autoplay></video>

视频也受到支持。根据视频大小，初始（自动）上传到 Cloudinary 可能需要一些时间。

<img src="{{ cloudinary:image width="800" height="500" quality="10"
effect="blur:800" opacity="20" }}" alt="">

使用其他参数

<x-cloudinary-image
  :src="$featured_image"
  height="422"
  alt="Das ist ein Test"
  effect="sepia:80"
/>

还有一个自定义 blade 组件，您可以使用它来在 blade 模板中使用 Cloudinary。 src 属性是必需的。

5. 可用参数

有关这些参数的更多信息，请访问 Cloudinary 文档。

6. 调整默认参数

您可以在 config/statamic/cloudinary.php 配置文件中调整默认参数以符合您的喜好。

return [
  'default_transformations' => [
    'image' => [
      'crop' => 'fill',
      'dpr' => 'auto',
      'fetch_format' => 'auto',
      'gravity' => 'auto',
      'quality' => 'auto',
    ],
    'video' => [
      'crop' => 'fill',
      'dpr' => 'auto',
      'fetch_format' => 'auto',
      'quality' => 'auto',
    ],
  ],
];

7. 发布 Cloudinary 视图

从您的项目根目录运行以下命令

php artisan vendor:publish --tag="cloudinary-views"

这将发布 Cloudinary 视图到 resources/views/vendor/cloudinary 文件夹。