Skip to content

Commit 0bf1f06

Browse files
docs: Remote images guide tweaks
1 parent ed9ff32 commit 0bf1f06

File tree

1 file changed

+19
-13
lines changed

1 file changed

+19
-13
lines changed

docs/pages/guides/remote-images.mdx

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -48,18 +48,24 @@ To use this method, provide the remote image URL to the `src` prop and set the `
4848
import { CldImage } from 'next-cloudinary';
4949

5050
<CldImage
51-
width="960"
52-
height="600"
53-
src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]"
54-
deliveryType="fetch"
55-
// Apply transformations like any other Cloudinary image
56-
tint="70:blue:purple"
57-
alt="Wikipedia Logo"
51+
width="1080"
52+
height="675"
53+
src="https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]"
54+
deliveryType="fetch"
55+
// Apply transformations like any other Cloudinary image
56+
tint="70:blue:purple"
57+
alt="Wikipedia Logo"
5858
/>
5959
```
6060
</CodeBlock>
61-
This will generate a Cloudinary URL `https://res.cloudinary.com/<your-cloud-name>/image/fetch/f_auto,q_auto,w_960,h_600,e_tint:70:blue:purple/https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]`,
62-
which instructs Cloudinary to retrieve the image from the source URL
61+
62+
This will generate an `<img>` with a `srcset` containing Cloudinary URLs like:
63+
64+
```
65+
https://res.cloudinary.com/eric-cloudinary/image/fetch/e_tint:70:blue:purple/c_limit,w_1080/f_auto/q_auto/v1/https://www.wikipedia.org/portal/wikipedia.org/assets/img/[email protected]?_a=BAVAZGGf0
66+
```
67+
68+
This URL instructs Cloudinary to retrieve the image from the source URL.
6369

6470
## Method 2: Auto-Uploading Remote Images
6571

@@ -73,12 +79,12 @@ This method automatically uploads an image from a remote source to your Cloudina
7379

7480
### How to Set Up Auto-Upload Mapping:
7581

76-
1. Navigate to your Cloudinary settings: Go to `Settings` >` Upload`.
77-
2. Find the `Auto upload mapping` section: Here you will define the mapping.
82+
1. Navigate to your Cloudinary settings: go to `Settings` > `Upload`.
83+
2. Find the `Auto upload mapping` section: here you will define the mapping.
7884
3. Create a new mapping:
79-
- **Target Folder**: : A virtual folder name to use in your src prop (e.g., `s3-images`).
85+
- **Target Folder**: A virtual folder name to use in your src prop (e.g., `s3-images`).
8086
- **Source URL prefix**: Paste the base URL of your remote image storage (e.g., `https://my-s3-bucket.s3.amazonaws.com/images/`).
81-
4. Save your changes
87+
4. Save your changes.
8288

8389
For more details, see the official Cloudinary documentation on [Lazy Migration with Auto-Upload](https://cloudinary.com/documentation/migration#lazy_migration_with_auto_upload).
8490

0 commit comments

Comments
 (0)