[Images] Nav changes - batch 1 (#24901)

ToriLindsay · caley-b · nevikashah · commit 80502e76afa8 · 2025-09-17T14:08:24.000-04:00
* [Images] Nav changes - batch 1

* Apply suggestions from code review

Co-authored-by: Caley Burton &lt;caley@cloudflare.com&gt;

* Update src/content/docs/images/get-started.mdx

* Buttons needed additional indentation

---------

Co-authored-by: Caley Burton &lt;caley@cloudflare.com&gt;
diff --git 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. 
+
+   <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
 
diff --git a/src/content/docs/images/manage-images/blur-variants.mdx b/src/content/docs/images/manage-images/blur-variants.mdx
@@ -5,17 +5,20 @@ 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. In the Cloudflare dashboard, got to the **Variants** page. 
+
+   <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.
diff --git a/src/content/docs/images/manage-images/configure-webhooks.mdx b/src/content/docs/images/manage-images/configure-webhooks.mdx
@@ -2,15 +2,19 @@
 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. In the Cloudflare dashboard, go to the **Notifications** pages. 
+
+   <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**.
diff --git 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.
+
+   <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
 
diff --git 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. 
+
+   <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.
 
diff --git 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. 
+
+   <DashButton url="/?to=/:account/images/variants" />
+
+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
@@ -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. 
+
+   <DashButton url="/?to=/:account/images" />
+
+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
@@ -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. 
+
+   <DashButton url="/?to=/:account/images/variants" />
+
+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
@@ -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. 
+
+   <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.
 
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
@@ -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. 
+
+   <DashButton url="/?to=/:account/images/keys" />
+
+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
@@ -5,17 +5,20 @@ 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. In the Cloudflare dashboard, go to the **Sourcing Kit** page. 
+
+   <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
 
diff --git 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. 
+
+   <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.
 
@@ -31,20 +34,24 @@ 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. 
+
+   <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. In the Cloudflare dashboard, go to the **Sourcing Kit** page. 
+
+   <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.
 
diff --git 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. 
+
+   <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.
