Ember plugin for showing Cloudinary photos
MIT License
This addon contains a helper to get images URLs from Cloudinary easy. Made by HappySale
ember install:addon ember-cli-cloudinary-images
Required Ember version 2.1.0
and above
After installation:
{{cloudinary-url}}
to generate images URLsCLOUDINARY
config inside Application environment fileinside environment.js
:
module.exports = function(environment) {
var ENV = {
//
CLOUDINARY: {
CLOUD_NAME: '', // "cloud name" in Cloudinary
SECURE: true, // use https?
DOMAIN: '', // dedicated domain if exists
SUB_DOMAIN: '', // dedicated sub-domain if exists
CDN_DISTRIBUTION: false // use CDN distribution if needed
}
}
//
};
using helper:
It will resolve to the image URL in Cloudinary:
<img src={{cloudinary-url "publicId"}}>
For resized image, use `width` and/or `height` for resizing:
<img src={{cloudinary-url "publicId" width="155" height="50"}}>
For using transforms, use the transforms attribute:
<img src={{cloudinary-url "publicId" transforms="c_fill"}}>
For getting twitter user's avatar:
<img src={{cloudinary-url "iamdevloper" type="twitter_name"}}>
Don't forget! you can unbound:
<img src={{unbound (cloudinary-url "publicId")}}>
cloudName
- account name in Cloudinarywidth
- for resize the image's widthheight
- for resize the image's heightversion
- for choosing version of the assetdomain
- for choosing dedicated domain if existssubDomain
- for choosing dedicated sub-domain if existscdnDistribution
- for choosing if it will distribute between CDNs. default to false
secure
for choosing between http
to https
. default to true
resourceType
- default to image
type
- the repository of images. default to upload
but can be replaced with facebook
, twitter
, twitter_name
and soformat
- the image file formattransforms
- transforms that may applyThe components {{c-img}}
and {{c-avatar}}
where deprecate for using the helper {{cloudinary-url}}
.
The main reason is for having the ability to unbound
for performance gains. But the side effects are:
SVG
sNOTE: the attributes where change to be more compline with Cloudinary's terminology.
New API:
Old:
{{c-img media="publicId"}}
{{c-avatar network="twitter_name" user="iamdevloper"}}
New:
<img src={{cloudinary-url "publicId"}}>
<img src={{cloudinary-url "iamdevloper" type="twitter_name"}}>
Better:
<img src={{unbound (cloudinary-url "publicId")}}>
<img src={{unbound (cloudinary-url "iamdevloper" type="twitter_name")}}>