jekyll-cloudinary 1.14.0 → 1.14.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3e640939f7e90648a97629ce86753a316e32d1de8921bce56697806bab9db3a6
-  data.tar.gz: e6a7df0f2c22042f184f96a000864069e572f8863d0e692722e533e6ef0af0a6
+  metadata.gz: db9db2fb49cfafd9cc44480903f194cbff72441c43f8bdcd692bbdcfaaa54b3b
+  data.tar.gz: fa8f0445a95244193ccf375deb218d0a2016dc1214ac1b48686b78ccd93b708d
 SHA512:
-  metadata.gz: cbf8245a87611bca589acb5c4bef7157dbae3e9d60a835789c6355199cf11496e73a0c956b3bce62689f13c3c1526f2ecfcbfdfcb5313b6e2dc6253e8071658b
-  data.tar.gz: 16ce834ee5b6ea407be1a9f8c2dcaab3136ae7ac197c2bfa6778cf71e1ae3b92beecd6bf96665c4664f0de6047851d8059e1d8cd7b84c73c72c0a65259a56a31
+  metadata.gz: fd6d92bb3c3f0d028dc52ad4ee752423fe06bc118ed7619f24fa55fe51fdce3deff9846b296c4a9ac8fea700ceaf2523e7756c52f06d1cbe26dd4fb3bf9c3188
+  data.tar.gz: c7bd59c5ec33b4e4eefc145e0a11ced90a2fafd52d1d394ccf325fe62a3611bbca4697d523fac18ad1de82a1cfbcdd4bc04001a6900d0863402ccc5be02272e2

data/README.md

@@ -13,7 +13,7 @@ Here is the general syntax of this Liquid tag:
 
 <!-- {% raw %} -->
 ```liquid
-{% cloudinary cloudflare.png alt="Un schéma montrant l'apport de Cloudflare" caption="Un schéma montrant l'apport de Cloudflare" %}
+{% cloudinary cloudflare.png alt="Un schéma montrant l'apport de Cloudflare" caption="Un schéma montrant l'apport de Cloudflare" loading="lazy" %}
 ```
 <!-- {% endraw %} -->
 
@@ -27,6 +27,7 @@ Here is the general syntax of this Liquid tag:
   - [Optional global settings](#optional-global-settings)
     - [`only_prod` (default: `false`)](#only_prod-default-false)
     - [`verbose` (default: `false`)](#verbose-default-false)
+    - [`origin_url`](#origin_url)
   - [Optional (but highly recommended) presets](#optional-but-highly-recommended-presets)
     - [Default preset](#default-preset)
     - [Additional presets](#additional-presets)
@@ -38,6 +39,10 @@ Here is the general syntax of this Liquid tag:
     - [`steps` (default: `5`)](#steps-default-5)
     - [`sizes` (default: `"100vw"`)](#sizes-default-100vw)
     - [`attributes` (default: none)](#attributes-default-none)
+- [Liquid tag attributes](#liquid-tag-attributes)
+  - [Recommended attributes](#recommended-attributes)
+  - [Loading attribute](#loading-attribute)
+  - [Other interesting attributes](#other-interesting-attributes)
 - [Live example](#live-example)
 - [Contributing](#contributing)
 - [Do you use the plugin on a live site?](#do-you-use-the-plugin-on-a-live-site)
@@ -188,6 +193,7 @@ cloudinary:
       sizes: "(min-width: 50rem) 17rem, 30vw"
       attributes:
         class: "one3rd"
+        loading: "lazy"
 ```
 
 To use this additional preset, you will have to write this in your Markdown post:
@@ -220,7 +226,7 @@ The value can be:
 - `never`: will always generate a `<img>`, losing the caption
 - `always`: will always generate a `<figure>` and `<figcaption>`, even if there's no `caption` attribute
 
-If a `<figure>` is generated and there are attributes in the Liquid tag, they are added to the `<img>` if they are `alt` or `title`, or to the `<figure>`.
+If a `<figure>` is generated and there are attributes (in the preset or the Liquid tag), they are added to the `<img>` if they are `alt`, `title` or `loading`, or to the `<figure>`.
 
 #### `min_width` (default: `320`)
 
@@ -234,13 +240,56 @@ If a `<figure>` is generated and there are attributes in the Liquid tag, they ar
 
 #### `attributes` (default: none)
 
-Attributes are added without transformation to the generated element.
+You can define attributes that will be added to all images using this preset. Attributes are added without transformation to the generated element.
 
-You can obviously define the `alt` attribute, mandatory for accessibility, but you can also set a `title`, a `class`, `aria-*` attributes for enhanced accessibility, or even `data-*` attributes you would like to use later with CSS or JavaScript.
+You should obviously not add to preset attributes that should have different values for each image, such as `alt`, `caption`, `title`, etc.
 
-The `caption` attribute is the only one that can act differently, depending on the `figure` setting.
+You can set a `class`, `aria-*` attributes for enhanced accessibility, or even `data-*` attributes you would like to use later with CSS or JavaScript.
 
-`alt`, `title` and `caption` attributes can contain Markdown.
+Also it's possible to pass liquid variables inside the tags, so for example if you have your picture path in the front matter (in the post markdown file), you can send it to Cloudinary Plugin, such as:
+``` 
+{% cloudinary {{page.thumbnail}} class="post-image" itemprop="image" alt="{{page.title}} image"%}
+```
+
+
+## Liquid tag attributes
+
+You can add attributes to the liquid tag, after the image path:
+
+<!-- {% raw %} -->
+```liquid
+{% cloudinary onethird /assets/selfie.jpg alt="My selfie" loading="eager" %}
+```
+<!-- {% endraw %} -->
+
+Just like the ones from the preset settings, inline attributes are added without transformation to the generated element.
+
+### Recommended attributes
+
+You should obviously define the `alt` attribute, mandatory for accessibility.
+
+If you want the image to be inside a `figure` element, you probably also want to add a `caption` attribute. This is the only one that can act differently than other attributes, depending on [the `figure` setting](#figure-default-auto).
+
+You can also set a `title` attribute, but there are really few use cases for it on images.
+
+`alt`, `caption` and `title` attributes can contain Markdown.
+
+### Loading attribute
+
+The `loading` attribute allows you to tell the browser how you want it to load this image.
+
+From [this article written by Addy Osmani](https://addyosmani.com/blog/lazy-loading/):
+
+> The loading attribute allows a browser to defer loading offscreen images and iframes until users scroll near them. loading supports three values:
+> - `lazy`: is a good candidate for lazy loading.
+> - `eager`: is not a good candidate for lazy loading. Load right away.
+> - `auto`: browser will determine whether or not to lazily load.
+> 
+> Not specifying the attribute at all will have the same impact as setting loading=auto.
+
+### Other interesting attributes
+
+You can also use attributes to add a `class`, `aria-*` attributes for enhanced accessibility, or even `data-*` attributes you would like to use later with CSS or JavaScript.
 
 ## Live example
 

data/RELEASES.md

@@ -1,5 +1,15 @@
 # Releases
 
+## [v1.14.1](https://github.com/nhoizey/jekyll-cloudinary/releases/tag/v1.14.1)
+
+Fix the loading attribute handling.
+
+## [v1.14.0](https://github.com/nhoizey/jekyll-cloudinary/releases/tag/v1.14.0)
+
+Add support for the loading attribute, for [native lazy loading](https://addyosmani.com/blog/lazy-loading/) (Thanks [@borisschapira](https://github.com/borisschapira))
+
+Read [the documentation for the loading attribute](https://github.com/nhoizey/jekyll-cloudinary/blob/master/README.md#loading-attribute).
+
 ## [v1.13.0](https://github.com/nhoizey/jekyll-cloudinary/releases/tag/v1.13.0)
 
 Add cross-origin support to prevent opaque responses in Service Workers.

data/lib/jekyll/cloudinary.rb

@@ -187,6 +187,10 @@ module Jekyll
           img_attr << " title=\"#{html_attr["title"]}\""
           html_attr.delete("title")
         end
+        if html_attr["loading"]
+          img_attr << " loading=\"#{html_attr["loading"]}\""
+          html_attr.delete("loading")
+        end
 
         attr_string = html_attr.map { |a, v| "#{a}=\"#{v}\"" }.join(" ")
 

data/lib/jekyll/cloudinary/version.rb

@@ -2,6 +2,6 @@
 
 module Jekyll
   module Cloudinary
-    VERSION = "1.14.0"
+    VERSION = "1.14.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-cloudinary
 version: !ruby/object:Gem::Version
-  version: 1.14.0
+  version: 1.14.1
 platform: ruby
 authors:
 - Nicolas Hoizey
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-04-09 00:00:00.000000000 Z
+date: 2019-08-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: fastimage
@@ -28,16 +28,22 @@ dependencies:
   name: jekyll
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.6'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
       - !ruby/object:Gem::Version
         version: '3.6'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -72,14 +78,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.55.0
+        version: 0.74.0
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 0.55.0
+        version: 0.74.0
 description: |2
       This Jekyll plugin adds a Liquid tag that helps using Cloudinary, a SaaS solution for images management and transformation.
 
@@ -117,7 +123,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.0.2
+rubygems_version: 3.0.4
 signing_key: 
 specification_version: 4
 summary: Jekyll plugin adding a Liquid tag for Cloudinary, for better responsive images