Skip to content

maliMirkec/hexo-cldnry

master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
lib
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

License

MIT

About

Cloudinary SDK for Hexo.

Resources

License

Stars

Watchers

Forks

Packages

No packages published