You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The official [Cloudinary](https://cloudinary.com) SDK for Angular.
1
+
Cloudinary Angular SDK
2
+
=========================
3
+
## About
4
+
The Cloudinary Angular SDK allows you to quickly and easily integrate your application with Cloudinary.
5
+
Effortlessly optimize, transform, and manage your cloud's assets.
4
6
5
-
We maintain difference branches for different versions. Cloudinary's latest Angular SDK can be found [here](https://github.com/cloudinary/cloudinary_angular/tree/angular-5.x)
6
7
7
-
[Cloudinary](https://cloudinary.com) is a cloud service that offers a solution to a web application's entire image management pipeline.
8
+
#### Note
9
+
This Readme provides basic installation and usage information.
10
+
For the complete documentation, see the [Angular SDK Guide](https://cloudinary.com/documentation/angular_integration).
8
11
9
-
Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements.
10
-
Images are seamlessly delivered through a fast CDN, and much much more.
11
12
12
-
Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new.
13
+
## Table of Contents
14
+
-[Key Features](#key-features)
15
+
-[Version Support](#Version-Support)
16
+
-[Installation](#installation)
17
+
-[Usage](#usage)
18
+
-[Setup](#Setup)
19
+
-[Transform and Optimize Assets](#Transform-and-Optimize-Assets)
20
+
-[Generate Image and HTML Tags](#Generate-Image-and-Video-HTML-Tags)
21
+
13
22
14
-
Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.
23
+
## Key Features
24
+
-[Transform](https://cloudinary.com/documentation/angular1_video_manipulation#video_transformation_examples) and [optimize](https://cloudinary.com/documentation/angular1_image_manipulation#image_optimizations) assets.
25
+
- Generate [image](https://cloudinary.com/documentation/angular1_image_manipulation#deliver_and_transform_images) and [video](https://cloudinary.com/documentation/angular1_video_manipulation#video_element) tags.
15
26
16
-
For Angular, Cloudinary provides an SDK for simplifying the integration even further.
17
-
The SDK serves as a layer on top of one of [Cloudinary's Javascript library](https://github.com/cloudinary/cloudinary_js).
18
27
28
+
## Version Support
29
+
| SDK Version | ng 2 | ng 4 | ng >=5.0.0 |
30
+
|---------------|------|------|------------|
31
+
| 5.x | X | X | V |
32
+
| 4.x | X | V | X |
33
+
| 2.x | V | X | X |
19
34
20
-
## Live examples ##################################################################
21
-
Start experimenting right away with one of these live examples:
* A Cloudinary image component with child transformation directives for creating `<image>` tags and controlling its underlying chained transformations
45
-
* A Cloudinary video component with child transformation directives for creating `<video>` tags with multiple video sources and settings and controlling its underlying chained transformations
46
-
* Attribute directives for enhancing native HTML elements with Cloudinary image management capabilities
47
-
48
-
Further image manipulation options are listed in [this reference](https://cloudinary.com/documentation/image_transformations#reference).
49
-
50
-
Further video manipulation and delivery capabilities see listed in [this reference](https://cloudinary.com/documentation/video_manipulation_and_delivery).
51
-
52
-
Note that the attribute names in the docs are using snake_case, however this SDK supports both snake_case and kebab-case for attribute names,
53
-
e.g. both `fetch_format: 'auto'` and `'fetch-format': 'auto'` are eventually translated to `f_auto`.
54
-
55
-
### Cloudinary module configuration and setup ##################################
56
-
This SDK is based on the Cloudinary JS module, however the two are decoupled, i.e. this module's `Cloudinary` is a configurable service
57
-
to which you provide your choice of our JS module.
58
-
59
-
Example Coudinary configuration in your application's module definition:
60
40
41
+
## Usage
42
+
### Setup
61
43
```javascript
62
44
import { NgModule } from'@angular/core';
63
45
// ...
@@ -73,151 +55,48 @@ import { Cloudinary } from 'cloudinary-core';
73
55
exportclassAppModule { }
74
56
```
75
57
76
-
See [samples folder](https://github.com/cloudinary/cloudinary_angular/tree/master/projects/angular-cld/samples) for a complete reference project.
77
-
78
-
### Creating new image tags with cl-image & cl-transformation ##################################
79
-
80
-
The [cl-image](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-image.component.ts) component generates an `<image>` tag with requested transformation, type, and format.
81
-
The image tag can contain optional `<cl-transformation>` tags that will be used as chained transformations:
82
-
58
+
### Transform and Optimize Assets
59
+
-[See full documentation](https://cloudinary.com/documentation/angular1_image_manipulation)
### Creating new video tags with cl-video & cl-transformation ##################################
99
-
100
-
The [cl-video](src/cloudinary-video.component.ts) component generates a `<video>` tag with requested transformation, type, and format.
101
-
102
-
The generated `<video>` is created with configurable child `<source>` elements for all relevant formats supported by web browsers (`webm`, `mp4` and `ogv`), as well as a poster thumbnail image.
103
-
104
-
The video tag can contain optional `<cl-transformation>` tags that will be used as chained transformations:
See additional usage examples [here](https://github.com/cloudinary/cloudinary_angular/blob/master/projects/angular-cld/src/lib/cloudinary-image.component.spec.ts) and in the sample projects.
You can find our sample projects, along with documentation in the [samples folder](https://github.com/cloudinary/cloudinary_angular/tree/master/projects/angular-cld/samples).
157
-
158
-
:information_source: In order to run the samples you need to create a new file called config.ts with your cloud credentials.
159
-
Copy `config.ts.sample` in the sample of your choice and replace the placeholders with your credentials.
160
-
161
-
### What's in the box ########################################################
162
-
Both sample applications demonstrate a basic photo gallery showcasing basic image transformations and upload of new images either by a file input dialog or by drag-and-drop.
163
-
164
-
The samples differ by their bundling solution and upload implementation:
165
-
166
-
*[Photo album sample app](https://github.com/cloudinary/cloudinary_angular/tree/master/projects/angular-cld/samples/photo_album)
167
-
* Uses [ng2-file-upload](https://github.com/valor-software/ng2-file-upload) for uploading files using an opensource file uploader
168
-
* Uses [Webpack](https://webpack.github.io) for bundling and serving the application
169
-
*[Photo album sample app with jQuery](https://github.com/cloudinary/cloudinary_angular/tree/master/projects/angular-cld/samples/photo_album_with_jquery)
170
-
* Uses [Cloudinary's jQuery plugin](https://cloudinary.com/blog/direct_upload_made_easy_from_browser_or_mobile_app_to_the_cloud#direct_uploading_from_the_browser_using_jquery) for uploading files using jQuery and blueimp.
171
-
* Uses [SystemJS](https://github.com/systemjs/systemjs) for bundling the application and [lite-server](https://github.com/johnpapa/lite-server) for serving the application.
172
-
*[Photo Album AOT compilation](samples/photo_album_aot)
173
-
* Demonstrates usage of Cloudinary SDK in an [Angular AOT](https://angular.io/docs/ts/latest/cookbook/aot-compiler.html) application
174
-
* Uses [Rollup](http://rollupjs.org/) for bundling the application and [lite-server](https://github.com/johnpapa/lite-server) for serving the application.
175
-
176
-
Please consult with the respective README file of each sample for usage and additional information.
177
-
178
-
## Development ################################################################
179
-
180
-
:raised_hands: This module supports the following npm scripts:
181
-
182
-
***lint** - Runs tslint on **/*.ts
183
-
***test** - Compiles TypeScript and runs unit tests on the generated JS files, re-running tests automatically on chages
184
-
***test-once** - Compiles TypeSCript and executes unit tests once, closing the browser once it's done
185
-
***pree2e** - Updates WebDriver binary
186
-
***start-sample** - Starts the photo album sample, without automatically opening the browser and navigating to the started app
187
-
***start-sample:jquery** - Same as *start-sample* for the jQuery sample
188
-
***install-sample-from-source** - Compiles TypeScript, packs this module and installs it into samples/photo_album
189
-
***install-sample-from-source:jquery** - Same as *install-sample-from-source* for the jQuery sample
190
-
***e2e** - Runs *install-sample-from-source*, starts the app and runs protractor tests on the started app
191
-
***e2e:jquery** - Same as *e2e* for the jQuery sample
192
-
***tsc** - Runs the tsc compiler
193
-
***tsc:w** - Runs the tsc compiler and watches for changes
This SDK does not provide file upload functionality, however there are [several methods of uploading from the client side](https://cloudinary.com/documentation/angular1_image_and_video_upload).
207
73
208
-
## Support #######################################################################
74
+
## Contributions
75
+
- Ensure tests run locally (```npm run test```)
76
+
- Open a PR and ensure Travis tests pass
209
77
210
-
You can [open an issue through GitHub](https://github.com/cloudinary/cloudinary_angular/issues).
211
78
212
-
Contact us [https://cloudinary.com/contact](https://cloudinary.com/contact)
79
+
## Get Help
80
+
If you run into an issue or have a question, you can either:
81
+
- Issues related to the SDK: [Open a Github issue](https://github.com/cloudinary/cloudinary_angular/issues)
82
+
- Issues related to your account: [Open a support ticket](https://cloudinary.com/contact)
213
83
214
-
Stay tuned for updates, tips and tutorials: [Blog](https://cloudinary.com/blog), [Twitter](https://twitter.com/cloudinary), [Facebook](https://www.facebook.com/Cloudinary).
215
84
216
-
## Join the Community ##########################################################
85
+
## About Cloudinary
86
+
Cloudinary is a powerful media API for websites and mobile apps alike, Cloudinary enables developers to efficiently manage, transform, optimize, and deliver images and videos through multiple CDNs. Ultimately, viewers enjoy responsive and personalized visual-media experiences—irrespective of the viewing device.
217
87
218
-
Impact the product, hear updates, test drive new features and more! Join [here](https://www.facebook.com/groups/CloudinaryCommunity).
219
88
89
+
## Additional Resources
90
+
-[Cloudinary Transformation and REST API References](https://cloudinary.com/documentation/cloudinary_references): Comprehensive references, including syntax and examples for all SDKs.
91
+
-[MediaJams.dev](https://mediajams.dev/): Bite-size use-case tutorials written by and for Cloudinary Developers
92
+
-[DevJams](https://www.youtube.com/playlist?list=PL8dVGjLA2oMr09amgERARsZyrOz_sPvqw): Cloudinary developer podcasts on YouTube.
-[Code Explorers and Feature Demos](https://cloudinary.com/documentation/code_explorers_demos_index): A one-stop shop for all code explorers, Postman collections, and feature demos found in the docs.
95
+
-[Cloudinary Roadmap](https://cloudinary.com/roadmap): Your chance to follow, vote, or suggest what Cloudinary should develop next.
96
+
-[Cloudinary Facebook Community](https://www.facebook.com/groups/CloudinaryCommunity): Learn from and offer help to other Cloudinary developers.
0 commit comments