hexo-cldnry
v0.0.11
Published
Hexo tag to add an image from Cloudinary using Cloudinary SDK.
Downloads
8
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