diff --git a/src/content/docs/images/get-started.mdx b/src/content/docs/images/get-started.mdx
index 87b86f26fe1873..f5ab074576bd2f 100644
--- a/src/content/docs/images/get-started.mdx
+++ b/src/content/docs/images/get-started.mdx
@@ -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.
@@ -32,10 +33,12 @@ 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. In the Cloudflare dashboard, go to the **Transformations** page.
+
+
+
+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
diff --git a/src/content/docs/images/manage-images/blur-variants.mdx b/src/content/docs/images/manage-images/blur-variants.mdx
index 763a772358777f..c3acbffa2f6020 100644
--- a/src/content/docs/images/manage-images/blur-variants.mdx
+++ b/src/content/docs/images/manage-images/blur-variants.mdx
@@ -5,6 +5,7 @@ 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.
@@ -12,10 +13,12 @@ Refer to [Resize images](/images/manage-images/create-variants/) for help creati
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. In the Cloudflare dashboard, got to the **Variants** page.
+
+
+
+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.
diff --git a/src/content/docs/images/manage-images/configure-webhooks.mdx b/src/content/docs/images/manage-images/configure-webhooks.mdx
index 1a4616260397c8..78535f122fe979 100644
--- a/src/content/docs/images/manage-images/configure-webhooks.mdx
+++ b/src/content/docs/images/manage-images/configure-webhooks.mdx
@@ -2,6 +2,7 @@
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.
@@ -9,8 +10,11 @@ Currently, webhooks are supported only for [direct creator uploads](/images/uplo
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. In the Cloudflare dashboard, go to the **Notifications** pages.
+
+
+
+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**.
diff --git a/src/content/docs/images/manage-images/create-variants.mdx b/src/content/docs/images/manage-images/create-variants.mdx
index 4d3616f7f53eec..af801207fc49eb 100644
--- a/src/content/docs/images/manage-images/create-variants.mdx
+++ b/src/content/docs/images/manage-images/create-variants.mdx
@@ -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.
@@ -14,10 +15,13 @@ 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. In the Cloudflare dashboard, go to the **Variants** page.
+
+
+
+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
diff --git a/src/content/docs/images/manage-images/delete-images.mdx b/src/content/docs/images/manage-images/delete-images.mdx
index 0b2bf6b67241a5..835bc7870ebfa5 100644
--- a/src/content/docs/images/manage-images/delete-images.mdx
+++ b/src/content/docs/images/manage-images/delete-images.mdx
@@ -5,15 +5,18 @@ 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. In the Cloudflare dashboard, go to **Images** page.
+
+
+
+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.
diff --git a/src/content/docs/images/manage-images/delete-variants.mdx b/src/content/docs/images/manage-images/delete-variants.mdx
index e21a9e04cbc68b..8abd6244d323b0 100644
--- a/src/content/docs/images/manage-images/delete-variants.mdx
+++ b/src/content/docs/images/manage-images/delete-variants.mdx
@@ -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.
@@ -18,9 +19,11 @@ 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. In the Cloudflare dashboard, go to the **Variants** page.
+
+
+
+2. Find the variant you want to remove and select **Delete**.
## Delete variants via the API
diff --git a/src/content/docs/images/manage-images/edit-images.mdx b/src/content/docs/images/manage-images/edit-images.mdx
index 4bd29749c46eaf..34aa7e8da668fd 100644
--- a/src/content/docs/images/manage-images/edit-images.mdx
+++ b/src/content/docs/images/manage-images/edit-images.mdx
@@ -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:
@@ -14,6 +15,8 @@ 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. In the Cloudflare dashboard, go to the **Images** page.
+
+
+
+2. Locate the image you want to modify and select **Edit**.
diff --git a/src/content/docs/images/manage-images/enable-flexible-variants.mdx b/src/content/docs/images/manage-images/enable-flexible-variants.mdx
index ea53432f9a4cfa..6e4daf547a4743 100644
--- a/src/content/docs/images/manage-images/enable-flexible-variants.mdx
+++ b/src/content/docs/images/manage-images/enable-flexible-variants.mdx
@@ -5,14 +5,17 @@ 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. In the Cloudflare dashboard, go to the **Variants** page.
+
+
+
+2. Enable **Flexible variants**.
## Enable flexible variants via the API
diff --git a/src/content/docs/images/manage-images/export-images.mdx b/src/content/docs/images/manage-images/export-images.mdx
index 459c3783dcefeb..61193ca755da7b 100644
--- a/src/content/docs/images/manage-images/export-images.mdx
+++ b/src/content/docs/images/manage-images/export-images.mdx
@@ -5,15 +5,18 @@ 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. In the Cloudflare dashboard, go to the **Images** page.
+
+
+
+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.
diff --git a/src/content/docs/images/manage-images/serve-images/serve-private-images.mdx b/src/content/docs/images/manage-images/serve-images/serve-private-images.mdx
index c296235149c43b..e61cefc53b14bb 100644
--- a/src/content/docs/images/manage-images/serve-images/serve-private-images.mdx
+++ b/src/content/docs/images/manage-images/serve-images/serve-private-images.mdx
@@ -5,13 +5,15 @@ 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. In the Cloudflare dashboard, go to the **Keys** page.
+
+
+
+2. Copy your key and use it to generate an expiring tokenized URL.
:::note
diff --git a/src/content/docs/images/upload-images/sourcing-kit/edit.mdx b/src/content/docs/images/upload-images/sourcing-kit/edit.mdx
index bfc504c8fd0f72..0166b6112e8aab 100644
--- a/src/content/docs/images/upload-images/sourcing-kit/edit.mdx
+++ b/src/content/docs/images/upload-images/sourcing-kit/edit.mdx
@@ -5,6 +5,7 @@ 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.
@@ -12,10 +13,12 @@ The Sourcing Kit main page has a list of all the import jobs and sources you hav
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. In the Cloudflare dashboard, go to the **Sourcing Kit** page.
+
+
+
+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
diff --git a/src/content/docs/images/upload-images/sourcing-kit/enable.mdx b/src/content/docs/images/upload-images/sourcing-kit/enable.mdx
index 44451fe9ceaa14..a74f0cdf263152 100644
--- a/src/content/docs/images/upload-images/sourcing-kit/enable.mdx
+++ b/src/content/docs/images/upload-images/sourcing-kit/enable.mdx
@@ -5,22 +5,25 @@ 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. In the Cloudflare dashboard, go to the **Sourcing Kit** page.
+
+
+
+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.
@@ -31,9 +34,11 @@ 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. In the Cloudflare dashboard, go to the **Source Kit** page.
+
+
+
+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.
@@ -41,10 +46,12 @@ Repeat steps 4-11 in [Create your first import job](#create-your-first-import-jo
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. In the Cloudflare dashboard, go to the **Sourcing Kit** page.
+
+
+
+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.
diff --git a/src/content/docs/images/upload-images/upload-dashboard.mdx b/src/content/docs/images/upload-images/upload-dashboard.mdx
index c437ad0c57f121..0df0303057dd0d 100644
--- a/src/content/docs/images/upload-images/upload-dashboard.mdx
+++ b/src/content/docs/images/upload-images/upload-dashboard.mdx
@@ -5,12 +5,15 @@ 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. In the Cloudflare dashboard, go to the **Images** page.
+
+
+
+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.