From 45d8f05a795d1aed1006c4174fdbd9ce943e267d Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Fri, 5 Sep 2025 15:07:44 +0100 Subject: [PATCH 1/2] [Images] Nav changes - batch 2 --- .../serve-from-custom-domains.mdx | 35 ++++++++++++------- .../docs/images/polish/activate-polish.mdx | 14 +++++--- .../serve-images-custom-paths.mdx | 10 +++++- 3 files changed, 40 insertions(+), 19 deletions(-) diff --git a/src/content/docs/images/manage-images/serve-images/serve-from-custom-domains.mdx b/src/content/docs/images/manage-images/serve-images/serve-from-custom-domains.mdx index 2bf997bc63640f4..e8568f7fec60a2b 100644 --- a/src/content/docs/images/manage-images/serve-images/serve-from-custom-domains.mdx +++ b/src/content/docs/images/manage-images/serve-images/serve-from-custom-domains.mdx @@ -4,6 +4,7 @@ title: Serve images from custom domains sidebar: order: 22 --- +import { DashButton } from "~/components"; Image delivery is supported from all customer domains under the same Cloudflare account. To serve images through custom domains, an image URL should be adjusted to the following format: @@ -37,21 +38,25 @@ This example lets you rewrite a request from `example.com/images` to `example.co To create a rule: -1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account and website. -2. Go to **Rules** > **Overview**. -3. Next to **URL Rewrite Rules**, select **Create rule**. -4. Under **If incoming requests match**, select **Wildcard pattern** and enter the following **Request URL** (update with your own domain): +1. In the Cloudflare dashboard, go to the **Account home** page. + + + +2. Select your account and domain. +3. Go to **Rules** > **Overview**. +4. Next to **URL Rewrite Rules**, select **Create rule**. +5. Under **If incoming requests match**, select **Wildcard pattern** and enter the following **Request URL** (update with your own domain): ```txt https://example.com/images/* ``` -5. Under **Then rewrite the path and/or query** > **Path**, enter the following values (using your account hash): +6. Under **Then rewrite the path and/or query** > **Path**, enter the following values (using your account hash): - **Target path**: [`/`] `images/*` - **Rewrite to**: [`/`] `cdn-cgi/imagedelivery//${1}` -6. Select **Deploy** when you are done. +7. Select **Deploy** when you are done. ### Advanced version @@ -63,13 +68,17 @@ This example lets you rewrite a request from `example.com/images/some-image-id/w To create a rule: -1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/login) and select your account and website. -2. Go to **Rules** > **Overview**. -3. Next to **URL Rewrite Rules**, select **Create rule**. -4. Under **If incoming requests match**, select **Custom filter expression** and then select **Edit expression**. -5. In the text field, enter `(http.request.uri.path matches "^/images/.*$")`. -6. Under **Path**, select **Rewrite to**. -7. Select _Dynamic_ and enter the following in the text field. +1. In the Cloudflare dashboard, go to the **Account home** page. + + + +2. Select your account and domain. +3. Go to **Rules** > **Overview**. +4. Next to **URL Rewrite Rules**, select **Create rule**. +5. Under **If incoming requests match**, select **Custom filter expression** and then select **Edit expression**. +6. In the text field, enter `(http.request.uri.path matches "^/images/.*$")`. +7. Under **Path**, select **Rewrite to**. +8. Select _Dynamic_ and enter the following in the text field. ```txt regex_replace( diff --git a/src/content/docs/images/polish/activate-polish.mdx b/src/content/docs/images/polish/activate-polish.mdx index 8e0527b34647e41..be257da0c75fec5 100644 --- a/src/content/docs/images/polish/activate-polish.mdx +++ b/src/content/docs/images/polish/activate-polish.mdx @@ -6,7 +6,7 @@ sidebar: --- -import { Render } from "~/components" +import { Render,DashButton } from "~/components" Images in the [cache must be purged](/cache/how-to/purge-cache/) or expired before seeing any changes in Polish settings. @@ -18,10 +18,14 @@ Do not activate Polish and [image transformations](/images/transform-images/) si ::: -1. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select the account and domain where you want to activate Polish. -2. Go to **Speed** > **Optimization** > **Image Optimization**. -3. Under **Polish**, select *Lossy* or *Lossless* from the drop-down menu. [*Lossy*](/images/polish/compression/#lossy) gives greater file size savings. -4. (Optional) Select **WebP**. Enable this option if you want to further optimize PNG and JPEG images stored in the origin server, and serve them as WebP files to browsers that support this format. +1. In the Cloudflare dashboard, go to the **Account home** page. + + + +2. Select the account and domain where you want to activate Polish. +3. Select ****Speed** > **Optimization**** > **Image Optimization**. +4. Under **Polish**, select *Lossy* or *Lossless* from the drop-down menu. [*Lossy*](/images/polish/compression/#lossy) gives greater file size savings. +5. (Optional) Select **WebP**. Enable this option if you want to further optimize PNG and JPEG images stored in the origin server, and serve them as WebP files to browsers that support this format. To ensure WebP is not served from cache to a browser without WebP support, disable any WebP conversion utilities at your origin web server when using Polish. diff --git a/src/content/docs/images/transform-images/serve-images-custom-paths.mdx b/src/content/docs/images/transform-images/serve-images-custom-paths.mdx index 556273cca7a3b9d..be7d526b165046c 100644 --- a/src/content/docs/images/transform-images/serve-images-custom-paths.mdx +++ b/src/content/docs/images/transform-images/serve-images-custom-paths.mdx @@ -7,6 +7,7 @@ head: - tag: title content: Serve images from custom paths --- +import { DashButton } from "~/components"; You can use Transform Rules to rewrite URLs for every image that you transform through Images. @@ -16,7 +17,14 @@ This page covers examples for the following scenarios: - Modify existing URLs to be compatible with transformations in Images - Transform every image requested on your zone with Images -To create a rule, log in to the Cloudflare dashboard and select your account and website. Then, go to **Rules** > **Overview** and select **Create rule** next to **URL Rewrite Rules**. +To create a rule: +1. In the Cloudflare dashboard, go to the **Account home** page. + + + +2. Select your account and domain. +3. Go to **Rules** > **Overview**. +4. Select **Create rule** next to **URL Rewrite Rules**. ## Before you start From 5c923894a035a779be4ec43e17b53f390f322a38 Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Fri, 5 Sep 2025 15:24:15 +0100 Subject: [PATCH 2/2] Apply suggestions from code review Co-authored-by: Jun Lee --- .../manage-images/serve-images/serve-from-custom-domains.mdx | 4 ++-- src/content/docs/images/polish/activate-polish.mdx | 2 +- .../images/transform-images/serve-images-custom-paths.mdx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/docs/images/manage-images/serve-images/serve-from-custom-domains.mdx b/src/content/docs/images/manage-images/serve-images/serve-from-custom-domains.mdx index e8568f7fec60a2b..8408a54ba3f0a5f 100644 --- a/src/content/docs/images/manage-images/serve-images/serve-from-custom-domains.mdx +++ b/src/content/docs/images/manage-images/serve-images/serve-from-custom-domains.mdx @@ -42,7 +42,7 @@ To create a rule: -2. Select your account and domain. +2. Select your domain. 3. Go to **Rules** > **Overview**. 4. Next to **URL Rewrite Rules**, select **Create rule**. 5. Under **If incoming requests match**, select **Wildcard pattern** and enter the following **Request URL** (update with your own domain): @@ -72,7 +72,7 @@ To create a rule: -2. Select your account and domain. +2. Select your domain. 3. Go to **Rules** > **Overview**. 4. Next to **URL Rewrite Rules**, select **Create rule**. 5. Under **If incoming requests match**, select **Custom filter expression** and then select **Edit expression**. diff --git a/src/content/docs/images/polish/activate-polish.mdx b/src/content/docs/images/polish/activate-polish.mdx index be257da0c75fec5..ebb1ed45a2153f0 100644 --- a/src/content/docs/images/polish/activate-polish.mdx +++ b/src/content/docs/images/polish/activate-polish.mdx @@ -22,7 +22,7 @@ Do not activate Polish and [image transformations](/images/transform-images/) si -2. Select the account and domain where you want to activate Polish. +2. Select the domain where you want to activate Polish. 3. Select ****Speed** > **Optimization**** > **Image Optimization**. 4. Under **Polish**, select *Lossy* or *Lossless* from the drop-down menu. [*Lossy*](/images/polish/compression/#lossy) gives greater file size savings. 5. (Optional) Select **WebP**. Enable this option if you want to further optimize PNG and JPEG images stored in the origin server, and serve them as WebP files to browsers that support this format. diff --git a/src/content/docs/images/transform-images/serve-images-custom-paths.mdx b/src/content/docs/images/transform-images/serve-images-custom-paths.mdx index be7d526b165046c..9a5807939972458 100644 --- a/src/content/docs/images/transform-images/serve-images-custom-paths.mdx +++ b/src/content/docs/images/transform-images/serve-images-custom-paths.mdx @@ -22,7 +22,7 @@ To create a rule: -2. Select your account and domain. +2. Select your domain. 3. Go to **Rules** > **Overview**. 4. Select **Create rule** next to **URL Rewrite Rules**.