@@ -12,7 +12,7 @@ import { CldImage } from 'svelte-cloudinary'
12
12
<svelte:head>
13
13
<title>CldImage Examples - Svelte Cloudinary</title>
14
14
<meta name="og:title" content="CldImage Examples - Svelte Cloudinary" />
15
- <meta name="og:url" content={`https://next-cloudinary.spacejelly.dev /components/cldimage/examples`} />
15
+ <meta name="og:url" content={`https://next-cloudinary.vercel.app /components/cldimage/examples`} />
16
16
</svelte:head>
17
17
18
18
@@ -23,8 +23,8 @@ import { CldImage } from 'svelte-cloudinary'
23
23
<ImageGrid>
24
24
<li>
25
25
<CldImage
26
- width=" 960"
27
- height=" 600"
26
+ width={ 960}
27
+ height={ 600}
28
28
src={`images/turtle`}
29
29
sizes="(max-width: 480px) 100vw, 50vw"
30
30
removeBackground
@@ -43,8 +43,8 @@ Background removal requires the <a href="https://cloudinary.com/documentation/cl
43
43
</li>
44
44
<li>
45
45
<CldImage
46
- width=" 960"
47
- height=" 600"
46
+ width={ 960}
47
+ height={ 600}
48
48
src="images/turtle"
49
49
sizes="(max-width: 480px) 100vw, 50vw"
50
50
zoompan="loop"
@@ -59,8 +59,8 @@ zoompan="loop"
59
59
</li>
60
60
<li>
61
61
<CldImage
62
- width=" 960"
63
- height=" 600"
62
+ width={ 960}
63
+ height={ 600}
64
64
src="images/turtle"
65
65
sizes="(max-width: 480px) 100vw, 50vw"
66
66
blur="1200"
@@ -75,8 +75,8 @@ blur="1200"
75
75
</li>
76
76
<li>
77
77
<CldImage
78
- width=" 960"
79
- height=" 600"
78
+ width={ 960}
79
+ height={ 600}
80
80
src="images/turtle"
81
81
sizes="(max-width: 480px) 100vw, 50vw"
82
82
pixelate
@@ -91,8 +91,8 @@ pixelate
91
91
</li>
92
92
<li>
93
93
<CldImage
94
- width=" 960"
95
- height=" 600"
94
+ width={ 960}
95
+ height={ 600}
96
96
src="images/turtle"
97
97
sizes="(max-width: 480px) 100vw, 50vw"
98
98
grayscale
@@ -107,8 +107,8 @@ grayscale
107
107
</li>
108
108
<li>
109
109
<CldImage
110
- width=" 960"
111
- height=" 600"
110
+ width={ 960}
111
+ height={ 600}
112
112
src="images/turtle"
113
113
sizes="(max-width: 480px) 100vw, 50vw"
114
114
tint="equalize:80:blue:blueviolet"
@@ -123,8 +123,8 @@ tint="equalize:80:blue:blueviolet"
123
123
</li>
124
124
<li>
125
125
<CldImage
126
- width=" 960"
127
- height=" 600"
126
+ width={ 960}
127
+ height={ 600}
128
128
src="images/turtle"
129
129
opacity="50"
130
130
alt=""
@@ -138,8 +138,8 @@ opacity="50"
138
138
</li>
139
139
<li>
140
140
<CldImage
141
- width=" 960"
142
- height=" 600"
141
+ width={ 960}
142
+ height={ 600}
143
143
src="images/turtle"
144
144
shear="40:0"
145
145
alt=""
@@ -153,8 +153,8 @@ shear="40:0"
153
153
</li>
154
154
<li>
155
155
<CldImage
156
- width=" 960"
157
- height=" 600"
156
+ width={ 960}
157
+ height={ 600}
158
158
src="images/turtle"
159
159
border="40px_solid_purple"
160
160
alt=""
@@ -168,8 +168,8 @@ border="40px_solid_purple"
168
168
</li>
169
169
<li>
170
170
<CldImage
171
- width=" 960"
172
- height=" 600"
171
+ width={ 960}
172
+ height={ 600}
173
173
src="images/turtle"
174
174
background="blue"
175
175
removeBackground
@@ -185,8 +185,8 @@ background="blue"
185
185
</li>
186
186
<li>
187
187
<CldImage
188
- width=" 960"
189
- height=" 600"
188
+ width={ 960}
189
+ height={ 600}
190
190
src="images/turtle"
191
191
trim
192
192
alt=""
200
200
</li>
201
201
<li>
202
202
<CldImage
203
- width=" 960"
204
- height=" 600"
203
+ width={ 960}
204
+ height={ 600}
205
205
src={`images/turtle`}
206
206
effects={[
207
207
{
@@ -241,7 +241,7 @@ effects={[
241
241
<ImageGrid>
242
242
<li>
243
243
<CldImage
244
- width=" 600"
244
+ width={ 600}
245
245
height="900"
246
246
src="images/woman-headphones"
247
247
sizes="(max-width: 480px) 100vw, 50vw"
@@ -255,8 +255,8 @@ effects={[
255
255
</li>
256
256
<li>
257
257
<CldImage
258
- width=" 600"
259
- height=" 600"
258
+ width={ 600}
259
+ height={ 600}
260
260
src="images/woman-headphones"
261
261
sizes="(max-width: 480px) 100vw, 50vw"
262
262
crop="thumb"
@@ -273,8 +273,8 @@ gravity="auto"
273
273
</li>
274
274
<li>
275
275
<CldImage
276
- width=" 600"
277
- height=" 600"
276
+ width={ 600}
277
+ height={ 600}
278
278
src="images/turtle"
279
279
sizes="(max-width: 480px) 100vw, 50vw"
280
280
crop="thumb"
@@ -291,8 +291,8 @@ gravity="faces"
291
291
</li>
292
292
<li>
293
293
<CldImage
294
- width=" 600"
295
- height=" 600"
294
+ width={ 600}
295
+ height={ 600}
296
296
src="images/turtle"
297
297
sizes="(max-width: 480px) 100vw, 50vw"
298
298
crop="thumb"
@@ -315,8 +315,8 @@ zoom="0.5"
315
315
<ImageGrid>
316
316
<li>
317
317
<CldImage
318
- width=" 960"
319
- height=" 600"
318
+ width={ 960}
319
+ height={ 600}
320
320
src={`images/turtle`}
321
321
sizes="(max-width: 480px) 100vw, 50vw"
322
322
overlays={[{
@@ -361,8 +361,8 @@ overlays={[{
361
361
</li>
362
362
<li>
363
363
<CldImage
364
- width=" 960"
365
- height=" 600"
364
+ width={ 960}
365
+ height={ 600}
366
366
crop="fill"
367
367
src={`images/white`}
368
368
colorize="100,co_darkviolet"
@@ -408,8 +408,8 @@ overlays={[{
408
408
</li>
409
409
<li>
410
410
<CldImage
411
- width=" 960"
412
- height=" 600"
411
+ width={ 960}
412
+ height={ 600}
413
413
crop="fill"
414
414
src={`images/white`}
415
415
colorize="100,co_darkviolet"
@@ -456,8 +456,8 @@ overlays={[{
456
456
</li>
457
457
<li>
458
458
<CldImage
459
- width=" 960"
460
- height=" 600"
459
+ width={ 960}
460
+ height={ 600}
461
461
crop="fill"
462
462
src={`images/white`}
463
463
colorize="100,co_darkviolet"
@@ -650,8 +650,8 @@ overlays={[{
650
650
<ImageGrid>
651
651
<li>
652
652
<CldImage
653
- width=" 960"
654
- height=" 600"
653
+ width={ 960}
654
+ height={ 600}
655
655
src="images/turtle"
656
656
sizes="(max-width: 480px) 100vw, 50vw"
657
657
transformations={[
@@ -670,8 +670,8 @@ transformations={[
670
670
</li>
671
671
<li>
672
672
<CldImage
673
- width=" 960"
674
- height=" 600"
673
+ width={ 960}
674
+ height={ 600}
675
675
src="images/turtle"
676
676
rawTransformations={['c_crop,h_359,w_517,x_1200,y_100/c_scale,h_359,w_517/f_auto,q_auto']}
677
677
sizes="(max-width: 480px) 100vw, 50vw"
@@ -689,8 +689,8 @@ rawTransformations={[
689
689
</li>
690
690
<li>
691
691
<CldImage
692
- width=" 960"
693
- height=" 600"
692
+ width={ 960}
693
+ height={ 600}
694
694
src={`https://res.cloudinary.com/${import.meta.env.VITE_PUBLIC_CLOUDINARY_CLOUD_NAME}/image/upload/c_fill,h_300,w_250/e_blur:1000/v1/images/turtle`}
695
695
preserveTransformations
696
696
tint="equalize:80:blue:blueviolet"
0 commit comments