cloudinary_angular
Advanced tools
The formal Cloudinary Angular SDK to enhance your applications with image and video components powered by Cloudinary
The official Cloudinary SDK for Angular.
Cloudinary's AngularJS (AKA Angular1) SDK can be found here
Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline.
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. Images are seamlessly delivered through a fast CDN, and much much more.
Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new.
Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework.
For Angular, Cloudinary provides an SDK for simplifying the integration even further. The SDK serves as a layer on top of one of Cloudinary's Javascript libraries:
| Github Repository | Package name | Description |
|---|---|---|
| pkg-cloudinary-core | cloudinary-core | Core Cloudinary Library. Use this if you do not intend to use jQuery |
| pkg-cloudinary-jquery | cloudinary-jquery | Core Library + jQuery plugin |
| pkg-cloudinary-jquery-file-upload | cloudinary-jquery-file-upload | Core Library + jQuery plugin + Blueimp File Upload adapter |
Start experimenting right away with one these live examples:
Install the SDK version that matches your Angular version
npm install @cloudinary/angular-4.x --save
Follow the setup procedure described in the Cloudinary jQuery plugin setup procedure. Refer to the sample projects in this repository for usage examples.
The module provides three types of directives:
<image> tags and controlling its underlying chained transformations<video> tags with multiple video sources and settings and controlling its underlying chained transformationsFurther image manipulation options are listed in this reference.
Further video manipulation and delivery capabilities see listed in this reference.
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,
e.g. both fetch_format: 'auto' and 'fetch-format': 'auto' are eventually translated to f_auto.
This SDK is based on the Cloudinary JS module, however the two are decoupled, i.e. this module's Cloudinary is a configurable service
to which you provide your choice of our JS module.
Example Coudinary configuration in your application's module definition:
import { NgModule } from '@angular/core';
// ...
import { CloudinaryModule, CloudinaryConfiguration } from '@cloudinary/angular';
import { Cloudinary } from 'cloudinary-core';
@NgModule({
imports: [
CloudinaryModule.forRoot({Cloudinary}, { cloud_name: 'your_cloud_name' } as CloudinaryConfiguration),
],
bootstrap: [/* ... */]
})
export class AppModule { }
See samples folder for a complete reference project.
The cl-image component generates an <image> tag with requested transformation, type, and format.
The image tag can contain optional <cl-transformation> tags that will be used as chained transformations:
<cl-image public-id="readme" class="thumbnail inline" angle="20" format="jpg">
<cl-transformation height="150" width="150" crop="fill" effect="sepia" radius="20"></cl-transformation>
<cl-transformation overlay="text:arial_60:readme" gravity="north" y="20"></cl-transformation>
</cl-image>
Will be compiled by Angular to:
<cl-image _ngcontent-ywn-2="" public-id="readme" class="thumbnail inline" format="jpg" angle="20" ng-reflect-public-id="readme">
<img src="http://res.cloudinary.com/{your_cloud_name}/image/upload/c_fill,e_sepia,h_150,r_20,w_150/g_north,l_text:arial_60:readme,y_20/a_20/readme.jpg">
</cl-image>
The cl-video component generates a <video> tag with requested transformation, type, and format.
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.
The video tag can contain optional <cl-transformation> tags that will be used as chained transformations:
<cl-video cloud-name="my_other_cloud" public-id="watchme" secure="true" class="my-videos">
<cl-transformation overlay="text:arial_60:watchme" gravity="north" y="20"></cl-transformation>
</cl-video>
Will be compiled by Angular to:
<video class="my-videos" public-id="watchme" ng-reflect-public-id="watchme"
poster="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.jpg">
<source src="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.webm" type="video/webm">
<source src="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.mp4" type="video/mp4">
<source src="https://res.cloudinary.com/my_other_cloud/video/upload/g_north,l_text:arial_60:watchme,y_20/watchme.ogv" type="video/ogg">
</video>
You can update attributes dynamically for <cl-image> and <cl-video> elements to reload the underlying native elements with
new transformations.
The following example from the sample projects demonstrates setting the opacity to 50% when hovering on top of an element:
<cl-image
public-id={{photo.public_id}}
(mouseenter)="photo.isMouseOver = true"
(mouseleave)="photo.isMouseOver = false"
[attr.opacity]="photo.isMouseOver ? '50' : null"
>
These directives transform the given URI to a cloudinary URL. For example:
<img clSrc="http://cloudinary.com/images/logo.png" type="fetch" fetch-format="auto" quality="auto">
Will be compiled by Angular to:
<img clSrc="http://cloudinary.com/images/logo.png" fetch-format="auto" quality="auto" type="fetch" ng-reflect-clSrc="http://cloudinary.com/images/logo.png"
src="http://res.cloudinary.com/{your_cloud_name}/image/fetch/f_auto,q_auto/http://cloudinary.com/images/logo.png">
See additional usage examples here and in the sample projects.
You can find our sample projects, along with documentation in the samples folder.
:information_source: In order to run the samples you need to create a new file called config.ts with your cloud credentials.
Copy config.ts.sample in the sample of your choice and replace the placeholders with your credentials.
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.
The samples differ by their bundling solution and upload implementation:
Please consult with the respective README file of each sample for usage and additional information.
:raised_hands: This module supports the following npm scripts:
Additional resources are available at:
You can open an issue through GitHub.
Contact us https://cloudinary.com/contact
Stay tuned for updates, tips and tutorials: Blog, Twitter, Facebook.
Released under the MIT license.
FAQs
The formal Cloudinary Angular SDK to enhance your applications with image and video components powered by Cloudinary
We found that cloudinary_angular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.