From e8096db0e5ba40c774e6b9eb3f89c94087429943 Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Wed, 3 Sep 2025 16:26:46 +0100 Subject: [PATCH 1/4] [Images] Nav changes - batch 1 --- src/content/docs/images/get-started.mdx | 8 ++--- .../images/manage-images/blur-variants.mdx | 10 +++--- .../manage-images/configure-webhooks.mdx | 5 +-- .../images/manage-images/create-variants.mdx | 9 ++--- .../images/manage-images/delete-images.mdx | 8 ++--- .../images/manage-images/delete-variants.mdx | 6 ++-- .../docs/images/manage-images/edit-images.mdx | 6 ++-- .../enable-flexible-variants.mdx | 6 ++-- .../images/manage-images/export-images.mdx | 8 ++--- .../serve-images/serve-private-images.mdx | 7 ++-- .../upload-images/sourcing-kit/edit.mdx | 8 ++--- .../upload-images/sourcing-kit/enable.mdx | 34 +++++++++---------- .../images/upload-images/upload-dashboard.mdx | 8 ++--- 13 files changed, 61 insertions(+), 62 deletions(-) diff --git a/src/content/docs/images/get-started.mdx b/src/content/docs/images/get-started.mdx index 87b86f26fe1873c..dc0c2a4cd44a527 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,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. +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 763a772358777fd..3bbdbe881e3f63e 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,9 @@ 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. +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 1a4616260397c87..73b0e53843e7b83 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,8 @@ 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. +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 4d3616f7f53eecc..2782d4e9e0f0a00 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,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. +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 0b2bf6b67241a5b..c4b4679bee673e3 100644 --- a/src/content/docs/images/manage-images/delete-images.mdx +++ b/src/content/docs/images/manage-images/delete-images.mdx @@ -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. +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 e21a9e04cbc68bc..56ea383986fa29f 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,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. +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 4bd29749c46eafa..8f18ee55d29a9f9 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,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. +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 ea53432f9a4cfa0..ddfad6f3f1184ec 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,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. +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 459c3783dcefeb2..1e271000e0a1dbe 100644 --- a/src/content/docs/images/manage-images/export-images.mdx +++ b/src/content/docs/images/manage-images/export-images.mdx @@ -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. +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 c296235149c43bc..7f817283ff8edac 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,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. +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 bfc504c8fd0f72f..61e1e9df4ca1e78 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,9 @@ 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. +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 44451fe9ceaa147..7f4ee6d98454727 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,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. +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 +31,8 @@ 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. +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 +40,9 @@ 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. +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 c437ad0c57f1219..46d38305185eef5 100644 --- a/src/content/docs/images/upload-images/upload-dashboard.mdx +++ b/src/content/docs/images/upload-images/upload-dashboard.mdx @@ -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. +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. From 629e96be719c172b187338ef4ba2ca504a699ce4 Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Thu, 4 Sep 2025 10:54:02 +0100 Subject: [PATCH 2/4] Apply suggestions from code review Co-authored-by: Caley Burton --- src/content/docs/images/get-started.mdx | 4 +++- .../docs/images/manage-images/blur-variants.mdx | 5 ++++- .../images/manage-images/configure-webhooks.mdx | 5 ++++- .../docs/images/manage-images/create-variants.mdx | 5 ++++- .../docs/images/manage-images/delete-images.mdx | 5 ++++- .../docs/images/manage-images/delete-variants.mdx | 5 ++++- .../docs/images/manage-images/edit-images.mdx | 5 ++++- .../manage-images/enable-flexible-variants.mdx | 5 ++++- .../docs/images/manage-images/export-images.mdx | 5 ++++- .../serve-images/serve-private-images.mdx | 5 ++++- .../images/upload-images/sourcing-kit/edit.mdx | 5 ++++- .../images/upload-images/sourcing-kit/enable.mdx | 15 ++++++++++++--- .../images/upload-images/upload-dashboard.mdx | 5 ++++- 13 files changed, 59 insertions(+), 15 deletions(-) diff --git a/src/content/docs/images/get-started.mdx b/src/content/docs/images/get-started.mdx index dc0c2a4cd44a527..5a745d0718d8165 100644 --- a/src/content/docs/images/get-started.mdx +++ b/src/content/docs/images/get-started.mdx @@ -33,7 +33,9 @@ Cloudflare will automatically cache every transformed image on our global networ To enable transformations on your zone: -1. +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. diff --git a/src/content/docs/images/manage-images/blur-variants.mdx b/src/content/docs/images/manage-images/blur-variants.mdx index 3bbdbe881e3f63e..13c7b8cba373ff9 100644 --- a/src/content/docs/images/manage-images/blur-variants.mdx +++ b/src/content/docs/images/manage-images/blur-variants.mdx @@ -13,7 +13,10 @@ Refer to [Resize images](/images/manage-images/create-variants/) for help creati To blur an image: -1. +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**. diff --git a/src/content/docs/images/manage-images/configure-webhooks.mdx b/src/content/docs/images/manage-images/configure-webhooks.mdx index 73b0e53843e7b83..016d4a7193118a3 100644 --- a/src/content/docs/images/manage-images/configure-webhooks.mdx +++ b/src/content/docs/images/manage-images/configure-webhooks.mdx @@ -10,7 +10,10 @@ Currently, webhooks are supported only for [direct creator uploads](/images/uplo To receive notifications for direct creator uploads: -1. +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. diff --git a/src/content/docs/images/manage-images/create-variants.mdx b/src/content/docs/images/manage-images/create-variants.mdx index 2782d4e9e0f0a00..6b7a52085c32910 100644 --- a/src/content/docs/images/manage-images/create-variants.mdx +++ b/src/content/docs/images/manage-images/create-variants.mdx @@ -15,7 +15,10 @@ Cloudflare Images can deliver SVG files but will not resize them because it is a Resize via the Cloudflare dashboard. ::: -1. +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. diff --git a/src/content/docs/images/manage-images/delete-images.mdx b/src/content/docs/images/manage-images/delete-images.mdx index c4b4679bee673e3..757c10e5b3ab6bb 100644 --- a/src/content/docs/images/manage-images/delete-images.mdx +++ b/src/content/docs/images/manage-images/delete-images.mdx @@ -11,7 +11,10 @@ You can delete an image from the Cloudflare Images storage using the dashboard o ## Delete images via the Cloudflare dashboard -1. +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**. diff --git a/src/content/docs/images/manage-images/delete-variants.mdx b/src/content/docs/images/manage-images/delete-variants.mdx index 56ea383986fa29f..7d2ff443bf95b48 100644 --- a/src/content/docs/images/manage-images/delete-variants.mdx +++ b/src/content/docs/images/manage-images/delete-variants.mdx @@ -19,7 +19,10 @@ Deleting a variant is a global action that will affect other images that contain ## Delete variants via the Cloudflare dashboard -1. +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 8f18ee55d29a9f9..b89383653203c5d 100644 --- a/src/content/docs/images/manage-images/edit-images.mdx +++ b/src/content/docs/images/manage-images/edit-images.mdx @@ -15,5 +15,8 @@ The Edit option provides you available options to modify a specific image. After To edit an image: -1. +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 ddfad6f3f1184ec..329e93c71370701 100644 --- a/src/content/docs/images/manage-images/enable-flexible-variants.mdx +++ b/src/content/docs/images/manage-images/enable-flexible-variants.mdx @@ -11,7 +11,10 @@ Flexible variants allow you to create variants with dynamic resizing which can p ## Enable flexible variants via the Cloudflare dashboard -1. +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 1e271000e0a1dbe..dbeffe74432cc2e 100644 --- a/src/content/docs/images/manage-images/export-images.mdx +++ b/src/content/docs/images/manage-images/export-images.mdx @@ -11,7 +11,10 @@ Cloudflare Images supports image exports via the Cloudflare dashboard and API wh ## Export images via the Cloudflare dashboard -1. +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**. 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 7f817283ff8edac..0be8b3f0c469f61 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 @@ -9,7 +9,10 @@ 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. +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 61e1e9df4ca1e78..b945ff15815f873 100644 --- a/src/content/docs/images/upload-images/sourcing-kit/edit.mdx +++ b/src/content/docs/images/upload-images/sourcing-kit/edit.mdx @@ -13,7 +13,10 @@ 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. +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. 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 7f4ee6d98454727..e0a632862dbfdd9 100644 --- a/src/content/docs/images/upload-images/sourcing-kit/enable.mdx +++ b/src/content/docs/images/upload-images/sourcing-kit/enable.mdx @@ -11,7 +11,10 @@ Enabling Sourcing Kit will set it up with the necessary information to start imp ## Create your first import job -1. +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. @@ -31,7 +34,10 @@ Sourcing Kit will warn you when you are about to reach the limit for your plan s ## Define a new source -1. +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. @@ -40,7 +46,10 @@ 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. +1. In the Cloudflare dashboard, go to the **Sourcing Kit** page. + + + 2. Select **Import images**. 3. Choose from one of the sources already configured. diff --git a/src/content/docs/images/upload-images/upload-dashboard.mdx b/src/content/docs/images/upload-images/upload-dashboard.mdx index 46d38305185eef5..023e5b707e6f35f 100644 --- a/src/content/docs/images/upload-images/upload-dashboard.mdx +++ b/src/content/docs/images/upload-images/upload-dashboard.mdx @@ -11,6 +11,9 @@ Before you upload an image, check the list of [supported formats and dimensions] To upload an image from the Cloudflare dashboard: -1. +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. From 84b8346fcdd5ac4571d3397377c1e898b2655122 Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Thu, 4 Sep 2025 10:54:52 +0100 Subject: [PATCH 3/4] Update src/content/docs/images/get-started.mdx --- src/content/docs/images/get-started.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/content/docs/images/get-started.mdx b/src/content/docs/images/get-started.mdx index 5a745d0718d8165..5e15ec9a5ebedf4 100644 --- a/src/content/docs/images/get-started.mdx +++ b/src/content/docs/images/get-started.mdx @@ -36,6 +36,7 @@ To enable transformations on your zone: 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. From 80dd115fb1ce469795c602bddbcf53b407aaa02a Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Thu, 4 Sep 2025 12:20:13 +0100 Subject: [PATCH 4/4] Buttons needed additional indentation --- src/content/docs/images/get-started.mdx | 2 +- src/content/docs/images/manage-images/blur-variants.mdx | 2 +- .../docs/images/manage-images/configure-webhooks.mdx | 2 +- src/content/docs/images/manage-images/create-variants.mdx | 2 +- src/content/docs/images/manage-images/delete-images.mdx | 2 +- src/content/docs/images/manage-images/delete-variants.mdx | 2 +- src/content/docs/images/manage-images/edit-images.mdx | 2 +- .../docs/images/manage-images/enable-flexible-variants.mdx | 2 +- src/content/docs/images/manage-images/export-images.mdx | 2 +- .../manage-images/serve-images/serve-private-images.mdx | 2 +- src/content/docs/images/upload-images/sourcing-kit/edit.mdx | 2 +- .../docs/images/upload-images/sourcing-kit/enable.mdx | 6 +++--- src/content/docs/images/upload-images/upload-dashboard.mdx | 2 +- 13 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/docs/images/get-started.mdx b/src/content/docs/images/get-started.mdx index 5e15ec9a5ebedf4..f5ab074576bd2f1 100644 --- a/src/content/docs/images/get-started.mdx +++ b/src/content/docs/images/get-started.mdx @@ -35,7 +35,7 @@ To enable transformations on your zone: 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. diff --git a/src/content/docs/images/manage-images/blur-variants.mdx b/src/content/docs/images/manage-images/blur-variants.mdx index 13c7b8cba373ff9..c3acbffa2f6020c 100644 --- a/src/content/docs/images/manage-images/blur-variants.mdx +++ b/src/content/docs/images/manage-images/blur-variants.mdx @@ -15,7 +15,7 @@ To blur an image: 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. diff --git a/src/content/docs/images/manage-images/configure-webhooks.mdx b/src/content/docs/images/manage-images/configure-webhooks.mdx index 016d4a7193118a3..78535f122fe979f 100644 --- a/src/content/docs/images/manage-images/configure-webhooks.mdx +++ b/src/content/docs/images/manage-images/configure-webhooks.mdx @@ -12,7 +12,7 @@ To receive notifications for direct creator uploads: 1. In the Cloudflare dashboard, go to the **Notifications** pages. - + 2. Select **Destinations**. 3. From the Webhooks card, select **Create**. diff --git a/src/content/docs/images/manage-images/create-variants.mdx b/src/content/docs/images/manage-images/create-variants.mdx index 6b7a52085c32910..af801207fc49eb4 100644 --- a/src/content/docs/images/manage-images/create-variants.mdx +++ b/src/content/docs/images/manage-images/create-variants.mdx @@ -17,7 +17,7 @@ Resize via the Cloudflare dashboard. 1. In the Cloudflare dashboard, go to the **Variants** page. - + 2. Select **Create variant**. 2. Name your variant and select **Create**. diff --git a/src/content/docs/images/manage-images/delete-images.mdx b/src/content/docs/images/manage-images/delete-images.mdx index 757c10e5b3ab6bb..835bc7870ebfa52 100644 --- a/src/content/docs/images/manage-images/delete-images.mdx +++ b/src/content/docs/images/manage-images/delete-images.mdx @@ -13,7 +13,7 @@ You can delete an image from the Cloudflare Images storage using the dashboard o 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**. diff --git a/src/content/docs/images/manage-images/delete-variants.mdx b/src/content/docs/images/manage-images/delete-variants.mdx index 7d2ff443bf95b48..8abd6244d323b09 100644 --- a/src/content/docs/images/manage-images/delete-variants.mdx +++ b/src/content/docs/images/manage-images/delete-variants.mdx @@ -21,7 +21,7 @@ Deleting a variant is a global action that will affect other images that contain 1. In the Cloudflare dashboard, go to the **Variants** page. - + 2. Find the variant you want to remove and select **Delete**. diff --git a/src/content/docs/images/manage-images/edit-images.mdx b/src/content/docs/images/manage-images/edit-images.mdx index b89383653203c5d..34aa7e8da668fd6 100644 --- a/src/content/docs/images/manage-images/edit-images.mdx +++ b/src/content/docs/images/manage-images/edit-images.mdx @@ -17,6 +17,6 @@ To edit an image: 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 329e93c71370701..6e4daf547a47439 100644 --- a/src/content/docs/images/manage-images/enable-flexible-variants.mdx +++ b/src/content/docs/images/manage-images/enable-flexible-variants.mdx @@ -13,7 +13,7 @@ Flexible variants allow you to create variants with dynamic resizing which can p 1. In the Cloudflare dashboard, go to the **Variants** page. - + 2. Enable **Flexible variants**. diff --git a/src/content/docs/images/manage-images/export-images.mdx b/src/content/docs/images/manage-images/export-images.mdx index dbeffe74432cc2e..61193ca755da7ba 100644 --- a/src/content/docs/images/manage-images/export-images.mdx +++ b/src/content/docs/images/manage-images/export-images.mdx @@ -13,7 +13,7 @@ Cloudflare Images supports image exports via the Cloudflare dashboard and API wh 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**. 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 0be8b3f0c469f61..e61cefc53b14bb0 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 @@ -11,7 +11,7 @@ You can serve private images by using signed URL tokens. When an image requires 1. In the Cloudflare dashboard, go to the **Keys** page. - + 2. Copy your key and use it to generate an expiring tokenized URL. 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 b945ff15815f873..0166b6112e8aab9 100644 --- a/src/content/docs/images/upload-images/sourcing-kit/edit.mdx +++ b/src/content/docs/images/upload-images/sourcing-kit/edit.mdx @@ -15,7 +15,7 @@ You can learn more about your sources by selecting the **Sources** tab on the So 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. 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 e0a632862dbfdd9..a74f0cdf2631520 100644 --- a/src/content/docs/images/upload-images/sourcing-kit/enable.mdx +++ b/src/content/docs/images/upload-images/sourcing-kit/enable.mdx @@ -13,7 +13,7 @@ Enabling Sourcing Kit will set it up with the necessary information to start imp 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. @@ -36,7 +36,7 @@ Sourcing Kit will warn you when you are about to reach the limit for your plan s 1. In the Cloudflare dashboard, go to the **Source Kit** page. - + 2. Select **Import images** > **Define a new source**. @@ -48,7 +48,7 @@ You can have many import jobs from the same or different sources. If you select 1. In the Cloudflare dashboard, go to the **Sourcing Kit** page. - + 2. Select **Import images**. 3. Choose from one of the sources already configured. diff --git a/src/content/docs/images/upload-images/upload-dashboard.mdx b/src/content/docs/images/upload-images/upload-dashboard.mdx index 023e5b707e6f35f..0df0303057dd0db 100644 --- a/src/content/docs/images/upload-images/upload-dashboard.mdx +++ b/src/content/docs/images/upload-images/upload-dashboard.mdx @@ -13,7 +13,7 @@ To upload an image from the Cloudflare dashboard: 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.