hexo-cldnry
v0.0.11
Published
Hexo tag to add an image from Cloudinary using Cloudinary SDK.
Downloads
31
Maintainers
Readme
Hexo Cloudinary SDK
Hexo tag to add an image from Cloudinary using Cloudinary SDK.
Install
Install using npm.
npm install hexo-cldnry --save
Install using yarn.
yarn add hexo-cldnry
Then register for Cloudinary, if you haven't already.
Either add CLDNRY_CLOUD_NAME
, CLDNRY_API_KEY
and CLDNRY_API_SECRET
environment variables.
Or add cldnry.yml
file inside source/_data
folder. Add the following information:
cloud_name: YOUR_CLOUD_NAME
api_key: YOUR_API_KEY
api_secret: YOUR_API_SECRET
In this case make sure site.data.cldnry.cloud_name
data is available in your templates.
Usage
Step 1: Add cldnry tag where you want to load the image.
{% cldnry img_name [alt] [class] [placeholder] %}
where:
img_name
- name of the image from Cloudinaryalt
- image title (optional)class
- custom class (optional)placeholder
- custom placeholder image (optional)
Step 2: Add cldnry_shrinkwrap script before closing body
tag.
<script src="https://cdnjs.cloudflare.com/ajax/libs/cloudinary-core/2.8.1/cloudinary-core-shrinkwrap.js")></script>
<script>
var cl = cloudinary.Cloudinary.new({cloud_name: "YOUR_CLOUD_NAME"});
cl.responsive();
</script>
Example
{% cldnry "IMAGE_NAME.png" "My image title" "my-image-class" "MY_PLACEHOLDER.png" %}
<img class="cld-responsive my-image-class"
data-src="https://res.cloudinary.com/YOUR_CLOUD_NAME/image/upload/w_auto,dpr_auto,c_scale/IMAGE_NAME.png"
src="MY_PLACEHOLDER.png"
alt="My image title"/>
License
MIT