hexo-cldnry

    0.0.11 • Public • Published

    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

    Install

    npm i hexo-cldnry

    DownloadsWeekly Downloads

    12

    Version

    0.0.11

    License

    MIT

    Unpacked Size

    7.58 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar