next-cloudinary 0.0.7 → 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +211 -0
- package/package.json +4 -2
package/README.md
ADDED
|
@@ -0,0 +1,211 @@
|
|
|
1
|
+
<img align="center" height="50" src="https://res.cloudinary.com/cloudinary-marketing/image/upload/f_auto,q_auto,h_100/v1595456749/creative_source/Logo/PNG/cloudinary_logo_blue_0720_2x.png" /> <img align="center" height="30" src="https://user-images.githubusercontent.com/1045274/189200861-1089b9db-5a78-4b43-9f6c-dfb1752c92f9.png" />
|
|
2
|
+
|
|
3
|
+
# Cloudinary Next.js Component
|
|
4
|
+
|
|
5
|
+
Get the best of Cloudinary in Next.js with the CldImage component!
|
|
6
|
+
|
|
7
|
+
> 🚨 EXPERIMENTAL: while this should be working pretty well, it's consider experimental, so use at your own risk!
|
|
8
|
+
|
|
9
|
+
**This plugin is not officially supported by Cloudinary.**
|
|
10
|
+
|
|
11
|
+
## ⚡️ Getting Started
|
|
12
|
+
|
|
13
|
+
### Installation
|
|
14
|
+
|
|
15
|
+
* Install `next-cloudinary` with:
|
|
16
|
+
```
|
|
17
|
+
yarn add next-cloudinary
|
|
18
|
+
# or
|
|
19
|
+
npm install next-cloudinary
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
* Add an environment variable with your Cloud Name:
|
|
23
|
+
```
|
|
24
|
+
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
* Import the CldImage component:
|
|
28
|
+
```
|
|
29
|
+
import { CldImage } from 'next-cloudinary';
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
### Usage
|
|
33
|
+
|
|
34
|
+
The basic required props include `width`, `height`, and `src`:
|
|
35
|
+
|
|
36
|
+
```
|
|
37
|
+
<CldImage
|
|
38
|
+
width="600"
|
|
39
|
+
height="600"
|
|
40
|
+
src="<Public ID>"
|
|
41
|
+
/>
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
You can further take advantage of Cloudinary features like background removal and overlays by adding additional props:
|
|
45
|
+
|
|
46
|
+
```
|
|
47
|
+
<CldImage
|
|
48
|
+
width="600"
|
|
49
|
+
height="600"
|
|
50
|
+
src="<Public ID>"
|
|
51
|
+
crop="thumb"
|
|
52
|
+
gravity="faces"
|
|
53
|
+
removeBackground
|
|
54
|
+
tint="100:blue:green:red"
|
|
55
|
+
underlays={[{
|
|
56
|
+
publicId: '<Public ID>',
|
|
57
|
+
width: 600,
|
|
58
|
+
height: 600,
|
|
59
|
+
crop: 'fill'
|
|
60
|
+
}]}
|
|
61
|
+
/>
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
As CldImage is a wrapper around the Next.js Image component, all built-in Image component features will work out-of-the-box including the `layout` prop.
|
|
65
|
+
|
|
66
|
+
## 🛠 Configuration
|
|
67
|
+
|
|
68
|
+
### Props
|
|
69
|
+
|
|
70
|
+
| Prop Name | Type | Example |
|
|
71
|
+
|------------------|-------------|------------------------------|
|
|
72
|
+
| crop | string | `"thumb"` |
|
|
73
|
+
| gravity | string | `"faces"` |
|
|
74
|
+
| overlays | array | See Below |
|
|
75
|
+
| removeBackground | bool/string | `true` |
|
|
76
|
+
| tint | string | `"tint:100:red:blue:yellow"` |
|
|
77
|
+
| underlays | array | See Below |
|
|
78
|
+
|
|
79
|
+
### Background Removal
|
|
80
|
+
|
|
81
|
+
Removing backgrounds require enabling the [Cloudinary AI Background Removal Add-On](https://cloudinary.com/documentation/cloudinary_ai_background_removal_addon) which includes a free tier for getting started.
|
|
82
|
+
|
|
83
|
+
Once enabled, you can simply apply the `removeBackground` parameter.
|
|
84
|
+
|
|
85
|
+
**Example:**
|
|
86
|
+
|
|
87
|
+
```
|
|
88
|
+
<CldImage
|
|
89
|
+
...
|
|
90
|
+
removeBackground
|
|
91
|
+
/>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
### Overlays
|
|
95
|
+
|
|
96
|
+
The `overlays` prop is an array of objects with the following configuration options:
|
|
97
|
+
|
|
98
|
+
| Property Name | Type | Example |
|
|
99
|
+
|------------------|-------------|--------------------------------------|
|
|
100
|
+
| effects | array | See Below |
|
|
101
|
+
| position | object | See Below |
|
|
102
|
+
| publicId | string | `"thumb"` |
|
|
103
|
+
| text | object | See Below |
|
|
104
|
+
|
|
105
|
+
The position property can include:
|
|
106
|
+
|
|
107
|
+
| Property Name | Type | Example |
|
|
108
|
+
|------------------|-------------|--------------------------------------|
|
|
109
|
+
| angle | number | `45` |
|
|
110
|
+
| gravity | string | '"north_west"' |
|
|
111
|
+
| x | number | `10` |
|
|
112
|
+
| y | number | `10` |
|
|
113
|
+
|
|
114
|
+
Objects in the effects array can include:
|
|
115
|
+
|
|
116
|
+
| Property Name | Type | Example |
|
|
117
|
+
|------------------|-------------|--------------------------------------|
|
|
118
|
+
| aspectRatio | string | `"3.0"` |
|
|
119
|
+
| crop | string | `10` |
|
|
120
|
+
| gravity | string | '"north_west"' |
|
|
121
|
+
| height | number | '600' |
|
|
122
|
+
| width | number | '600' |
|
|
123
|
+
|
|
124
|
+
The text property can include:
|
|
125
|
+
|
|
126
|
+
| Property Name | Type | Example |
|
|
127
|
+
|------------------|-------------|--------------------------------------|
|
|
128
|
+
| color | string | `"blueviolet"` |
|
|
129
|
+
| fontFamily | string | `"Open Sans"` |
|
|
130
|
+
| fontSize | number | `48` |
|
|
131
|
+
| fontWeight | string | `"bold"` |
|
|
132
|
+
| letterSpacing | number | `"14"` |
|
|
133
|
+
| textDecoration | string | `"underline"` |
|
|
134
|
+
|
|
135
|
+
#### Adding Images
|
|
136
|
+
|
|
137
|
+
You can add images on top of other images by using image-based overlays.
|
|
138
|
+
|
|
139
|
+
**Example:**
|
|
140
|
+
|
|
141
|
+
```
|
|
142
|
+
<CldImage
|
|
143
|
+
...
|
|
144
|
+
overlays={[{
|
|
145
|
+
publicId: '<Public ID>',
|
|
146
|
+
position: {
|
|
147
|
+
x: 10,
|
|
148
|
+
y: 10,
|
|
149
|
+
gravity: 'north_west',
|
|
150
|
+
},
|
|
151
|
+
effects: [
|
|
152
|
+
{
|
|
153
|
+
crop: 'fill',
|
|
154
|
+
gravity: 'auto',
|
|
155
|
+
width: 500,
|
|
156
|
+
height: 500
|
|
157
|
+
}
|
|
158
|
+
]
|
|
159
|
+
}]}
|
|
160
|
+
/>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
#### Adding Text
|
|
164
|
+
|
|
165
|
+
You can add text on top of your image with text-based overlays.
|
|
166
|
+
|
|
167
|
+
**Example:**
|
|
168
|
+
|
|
169
|
+
```
|
|
170
|
+
<CldImage
|
|
171
|
+
...
|
|
172
|
+
overlays={[{
|
|
173
|
+
width: 2670 - 20,
|
|
174
|
+
crop: 'fit',
|
|
175
|
+
position: {
|
|
176
|
+
x: 10,
|
|
177
|
+
y: 10,
|
|
178
|
+
gravity: 'north_west',
|
|
179
|
+
},
|
|
180
|
+
text: {
|
|
181
|
+
color: 'blueviolet',
|
|
182
|
+
fontFamily: 'Source Sans Pro',
|
|
183
|
+
fontSize: 120,
|
|
184
|
+
fontWeight: 'bold',
|
|
185
|
+
textDecoration: 'underline',
|
|
186
|
+
letterSpacing: 14,
|
|
187
|
+
text: 'Text'
|
|
188
|
+
}
|
|
189
|
+
}]}
|
|
190
|
+
/>
|
|
191
|
+
```
|
|
192
|
+
|
|
193
|
+
### Underlays
|
|
194
|
+
|
|
195
|
+
Underlays function very similar to overlays in terms of options, however they **do not support text**.
|
|
196
|
+
|
|
197
|
+
See the examples above under Overlays to learn more about the available configurations.
|
|
198
|
+
|
|
199
|
+
**Example:**
|
|
200
|
+
|
|
201
|
+
```
|
|
202
|
+
<CldImage
|
|
203
|
+
...
|
|
204
|
+
underlays={[{
|
|
205
|
+
publicId: '<Public ID>',
|
|
206
|
+
width: 1920,
|
|
207
|
+
height: 1200,
|
|
208
|
+
crop: 'fill'
|
|
209
|
+
}]}
|
|
210
|
+
/>
|
|
211
|
+
```
|
package/package.json
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "next-cloudinary",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"main": "dist/next-cloudinary.umd.js",
|
|
5
5
|
"module": "dist/next-cloudinary.module.js",
|
|
6
6
|
"umd:main": "dist/next-cloudinary.umd.js",
|
|
7
7
|
"source": "src/index.js",
|
|
8
8
|
"scripts": {
|
|
9
9
|
"build": "microbundle --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react",
|
|
10
|
-
"dev": "microbundle watch --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react"
|
|
10
|
+
"dev": "microbundle watch --no-compress --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react",
|
|
11
|
+
"prepublishOnly": "cp ../README.md .",
|
|
12
|
+
"postpublish": "rm ./README.md"
|
|
11
13
|
},
|
|
12
14
|
"dependencies": {
|
|
13
15
|
"@cloudinary/url-gen": "^1.8.5"
|