forked from angular/angular
/
cloudinary_loader.ts
66 lines (58 loc) · 1.98 KB
/
cloudinary_loader.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
* @license
* Copyright Google LLC All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {createImageLoader, ImageLoaderConfig, ImageLoaderInfo} from './image_loader';
/**
* Name and URL tester for Cloudinary.
*/
export const cloudinaryLoaderInfo: ImageLoaderInfo = {
name: 'Cloudinary',
testUrl: isCloudinaryUrl,
};
const CLOUDINARY_LOADER_REGEX = /https?\:\/\/[^\/]+\.cloudinary\.com\/.+/;
/**
* Tests whether a URL is from Cloudinary CDN.
*/
function isCloudinaryUrl(url: string): boolean {
return CLOUDINARY_LOADER_REGEX.test(url);
}
/**
* Function that generates an ImageLoader for Cloudinary and turns it into an Angular provider.
*
* @param path Base URL of your Cloudinary images
* This URL should match one of the following formats:
* https://res.cloudinary.com/mysite
* https://mysite.cloudinary.com
* https://subdomain.mysite.com
* @returns Set of providers to configure the Cloudinary loader.
*
* @publicApi
*/
export const provideCloudinaryLoader = createImageLoader(
createCloudinaryUrl,
ngDevMode
? [
'https://res.cloudinary.com/mysite',
'https://mysite.cloudinary.com',
'https://subdomain.mysite.com',
]
: undefined,
);
function createCloudinaryUrl(path: string, config: ImageLoaderConfig) {
// Cloudinary image URLformat:
// https://cloudinary.com/documentation/image_transformations#transformation_url_structure
// Example of a Cloudinary image URL:
// https://res.cloudinary.com/mysite/image/upload/c_scale,f_auto,q_auto,w_600/marketing/tile-topics-m.png
// For a placeholder image, we use the lowest image setting available to reduce the load time
// else we use the auto size
const quality = config.isPlaceholder ? 'q_auto:low' : 'q_auto';
let params = `f_auto,${quality}`;
if (config.width) {
params += `,w_${config.width}`;
}
return `${path}/image/upload/${params}/${config.src}`;
}