Hexo-cldnry NPM

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 Cloudinary
alt - 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"/>