Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/content/docs/images/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ sidebar:
order: 2

---
import { DashButton } from "~/components";

In this guide, you will get started with Cloudflare Images and make your first API request.

Expand Down Expand Up @@ -32,10 +33,9 @@ Cloudflare will automatically cache every transformed image on our global networ

To enable transformations on your zone:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Go to **Images** > **Transformations**.
3. Go to the specific zone where you want to enable transformations.
4. Select **Enable for zone**. This will allow you to optimize and deliver remote images.
1. <DashButton url="/?to=/:account/images/delivery-zones" />
2. Go to the specific zone where you want to enable transformations.
3. Select **Enable for zone**. This will allow you to optimize and deliver remote images.

:::note

Expand Down
10 changes: 5 additions & 5 deletions src/content/docs/images/manage-images/blur-variants.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ sidebar:
order: 12

---
import { DashButton } from "~/components";

You can apply blur to image variants by creating a specific variant for this effect first or by editing a previously created variant. Note that you cannot blur an SVG file.

Refer to [Resize images](/images/manage-images/create-variants/) for help creating variants. You can also refer to the API to learn how to use blur using flexible variants.

To blur an image:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Select **Images** > **Variants**.
3. Find the variant you want to blur and select **Edit** > **Customization Options**.
4. Use the slider to adjust the blurring effect. You can use the preview image to see how strong the blurring effect will be.
5. Select **Save**.
1. <DashButton url="/?to=/:account/images/variants" />
2. Find the variant you want to blur and select **Edit** > **Customization Options**.
3. Use the slider to adjust the blurring effect. You can use the preview image to see how strong the blurring effect will be.
4. Select **Save**.

The image should now display the blurred effect.
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,16 @@
pcx_content_type: how-to
title: Configure webhooks
---
import { DashButton } from "~/components";

You can set up webhooks to receive notifications about your upload workflow. This will send an HTTP POST request to a specified endpoint when an image either successfully uploads or fails to upload.

Currently, webhooks are supported only for [direct creator uploads](/images/upload-images/direct-creator-upload/).

To receive notifications for direct creator uploads:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Go to **Notifications** > **Destinations**.
1. <DashButton url="/?to=/:account/notifications" />
2. Select **Destinations**.
3. From the Webhooks card, select **Create**.
4. Enter information for your webhook and select **Save and Test**. The new webhook will appear in the **Webhooks** card and can be attached to notifications.
5. Next, go to **Notifications** > **All Notifications** and select **Add**.
Expand Down
9 changes: 5 additions & 4 deletions src/content/docs/images/manage-images/create-variants.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ sidebar:
order: 10

---
import { DashButton } from "~/components";

Variants let you specify how images should be resized for different use cases. By default, images are served with a `public` variant, but you can create up to 100 variants to fit your needs. Follow these steps to create a variant.

Expand All @@ -14,10 +15,10 @@ Cloudflare Images can deliver SVG files but will not resize them because it is a
Resize via the Cloudflare dashboard.
:::

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Select **Images** > **Variants**.
3. Name your variant and select **Add New Variant**.
4. Define variables for your new variant, such as resizing options, type of fit, and specific metadata options.
1. <DashButton url="/?to=/:account/images/variants" />
2. Select **Create variant**.
2. Name your variant and select **Create**.
3. Define variables for your new variant, such as resizing options, type of fit, and specific metadata options.

## Resize via the API

Expand Down
8 changes: 4 additions & 4 deletions src/content/docs/images/manage-images/delete-images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ sidebar:
order: 17

---
import { DashButton } from "~/components";

You can delete an image from the Cloudflare Images storage using the dashboard or the API.

## Delete images via the Cloudflare dashboard

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Select **Images**.
3. Find the image you want to remove and select **Delete**.
4. (Optional) To delete more than one image, select the checkbox next to the images you want to delete and then **Delete selected**.
1. <DashButton url="/?to=/:account/images" />
2. Find the image you want to remove and select **Delete**.
3. (Optional) To delete more than one image, select the checkbox next to the images you want to delete and then **Delete selected**.

Your image will be deleted from your account.

Expand Down
6 changes: 3 additions & 3 deletions src/content/docs/images/manage-images/delete-variants.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ sidebar:
order: 13

---
import { DashButton } from "~/components";

You can delete variants via the Images dashboard or API. The only variant you cannot delete is public.

Expand All @@ -18,9 +19,8 @@ Deleting a variant is a global action that will affect other images that contain

## Delete variants via the Cloudflare dashboard

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Select **Images** > **Variants**.
3. Find the variant you want to remove and select **Delete**.
1. <DashButton url="/?to=/:account/images/variants" />
2. Find the variant you want to remove and select **Delete**.

## Delete variants via the API

Expand Down
6 changes: 3 additions & 3 deletions src/content/docs/images/manage-images/edit-images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ sidebar:
order: 14

---
import { DashButton } from "~/components";

The Edit option provides you available options to modify a specific image. After choosing to edit an image, you can:

Expand All @@ -14,6 +15,5 @@ The Edit option provides you available options to modify a specific image. After

To edit an image:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. In **Account Home**, select **Images**.
3. Locate the image you want to modify and select **Edit**.
1. <DashButton url="/?to=/:account/images" />
2. Locate the image you want to modify and select **Edit**.
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ sidebar:
order: 11

---
import { DashButton } from "~/components";

Flexible variants allow you to create variants with dynamic resizing which can provide more options than regular variants allow. This option is not enabled by default.

## Enable flexible variants via the Cloudflare dashboard

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Select **Images** > **Variants**.
3. Enable **Flexible variants**.
1. <DashButton url="/?to=/:account/images/variants" />
2. Enable **Flexible variants**.

## Enable flexible variants via the API

Expand Down
8 changes: 4 additions & 4 deletions src/content/docs/images/manage-images/export-images.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,15 @@ sidebar:
order: 16

---
import { DashButton } from "~/components";

Cloudflare Images supports image exports via the Cloudflare dashboard and API which allows you to get the original version of your image.

## Export images via the Cloudflare dashboard

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Select **Images**.
3. Find the image or images you want to export.
4. To export a single image, select **Export** from its menu. To export several images, select the checkbox next to each image and then select **Export selected**.
1. <DashButton url="/?to=/:account/images" />
2. Find the image or images you want to export.
3. To export a single image, select **Export** from its menu. To export several images, select the checkbox next to each image and then select **Export selected**.

Your images are downloaded to your machine.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,12 @@ sidebar:
order: 23
---

import { TypeScriptExample } from "~/components";
import { TypeScriptExample,DashButton } from "~/components";

You can serve private images by using signed URL tokens. When an image requires a signed URL, the image cannot be accessed without a token unless it is being requested for a variant set to always allow public access.

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Select **Images** > **Keys**.
3. Copy your key and use it to generate an expiring tokenized URL.
1. <DashButton url="/?to=/:account/images/keys" />
2. Copy your key and use it to generate an expiring tokenized URL.

:::note

Expand Down
8 changes: 4 additions & 4 deletions src/content/docs/images/upload-images/sourcing-kit/edit.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@ sidebar:
order: 2

---
import { DashButton } from "~/components";

The Sourcing Kit main page has a list of all the import jobs and sources you have defined. This is where you can edit details for your sources or abort running import jobs.

## Source details

You can learn more about your sources by selecting the **Sources** tab on the Sourcing Kit dashboard. Use this option to rename or delete your sources.

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account.
2. Go to **Images** > **Sourcing Kit**.
3. Select **Sources** and choose the source you want to change.
4. In this page you have the option to rename or delete your source. Select **Rename source** or **Delete source** depending on what you want to do.
1. <DashButton url="/?to=/:account/images/sourcing-kit" />
2. Select **Sources** and choose the source you want to change.
3. In this page you have the option to rename or delete your source. Select **Rename source** or **Delete source** depending on what you want to do.

## Abort import jobs

Expand Down
34 changes: 16 additions & 18 deletions src/content/docs/images/upload-images/sourcing-kit/enable.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,22 @@ sidebar:
order: 1

---
import { DashButton } from "~/components";

Enabling Sourcing Kit will set it up with the necessary information to start importing images from your Amazon S3 account.

## Create your first import job

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account.
2. Go to **Images** > **Sourcing Kit**.
3. Select **Import images** to create an import job.
4. In **Source name** give your source an appropriate name.
5. In **Amazon S3 bucket information** enter the S3's bucket name where your images are stored.
6. In **Required credentials**, enter your Amazon S3 credentials. This is required to connect Cloudflare Images to your source and import your images. Refer to [Credentials](/images/upload-images/sourcing-kit/credentials/) to learn more about how to set up credentials.
7. Select **Next**.
8. In **Basic rules** define the Amazon S3 path to import your images from, and the path you want to copy your images to in your Cloudflare Images account. This is optional, and you can leave these fields blank.
9. On the same page, in **Overwrite images**, you need to choose what happens when the files in your source change. The recommended action is to copy the new images and overwrite the old ones on your Cloudflare Images account. You can also choose to skip the import, and keep what you already have on your Cloudflare Images account.
10. Select **Next**.
11. Review and confirm the information regarding the import job you created. Select **Import images** to start importing images from your source.
1. <DashButton url="/?to=/:account/images/sourcing-kit" />
2. Select **Import images** to create an import job.
3. In **Source name** give your source an appropriate name.
4. In **Amazon S3 bucket information** enter the S3's bucket name where your images are stored.
5. In **Required credentials**, enter your Amazon S3 credentials. This is required to connect Cloudflare Images to your source and import your images. Refer to [Credentials](/images/upload-images/sourcing-kit/credentials/) to learn more about how to set up credentials.
6. Select **Next**.
7. In **Basic rules** define the Amazon S3 path to import your images from, and the path you want to copy your images to in your Cloudflare Images account. This is optional, and you can leave these fields blank.
8. On the same page, in **Overwrite images**, you need to choose what happens when the files in your source change. The recommended action is to copy the new images and overwrite the old ones on your Cloudflare Images account. You can also choose to skip the import, and keep what you already have on your Cloudflare Images account.
9. Select **Next**.
10. Review and confirm the information regarding the import job you created. Select **Import images** to start importing images from your source.

Your import job is now created. You can review the job status on the Sourcing Kit main page. It will show you information such as how many objects it found, how many images were imported, and any errors that might have occurred.

Expand All @@ -31,20 +31,18 @@ Sourcing Kit will warn you when you are about to reach the limit for your plan s

## Define a new source

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account.
2. Go to **Images** > **Sourcing Kit**.
3. Select **Import images** > **Define a new source**.
1. <DashButton url="/?to=/:account/images/sourcing-kit" />
2. Select **Import images** > **Define a new source**.

Repeat steps 4-11 in [Create your first import job](#create-your-first-import-job) to finish setting up your new source.

## Define additional import jobs

You can have many import jobs from the same or different sources. If you select an existing source to create a new import job, you will not need to enter your credentials again.

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login), and select your account.
2. Go to **Images** > **Sourcing Kit**.
3. Select **Import images**.
4. Choose from one of the sources already configured.
1. <DashButton url="/?to=/:account/images/sourcing-kit" />
2. Select **Import images**.
3. Choose from one of the sources already configured.

Repeat steps 8-11 in [Create your first import job](#create-your-first-import-job) to finish setting up your new import job.

Expand Down
8 changes: 4 additions & 4 deletions src/content/docs/images/upload-images/upload-dashboard.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,12 @@ sidebar:
order: 2

---
import { DashButton } from "~/components";

Before you upload an image, check the list of [supported formats and dimensions](/images/upload-images/#supported-image-formats) to confirm your image will be accepted.

To upload an image from the Cloudflare dashboard:

1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account.
2. Select **Images**.
3. Drag and drop your image into the **Quick Upload** section. Alternatively, you can select **Drop images here** or browse to select your image locally.
4. After the upload finishes, your image appears in the list of files.
1. <DashButton url="/?to=/:account/images" />
2. Drag and drop your image into the **Quick Upload** section. Alternatively, you can select **Drop images here** or browse to select your image locally.
3. After the upload finishes, your image appears in the list of files.