jekyll-cloudinary 1.2.8 → 1.2.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 3f60fc40da066fe9ff55115d36284438bb0671df
-  data.tar.gz: 5f68e842e562922619f94d6a1a2bc86b7a57db2d
+  metadata.gz: f95c301d8482d4ca7cdc8b2009e5f55608e0650b
+  data.tar.gz: 56e0239a2192f6278f0eca2780bb93ed07ff8844
 SHA512:
-  metadata.gz: 0ad9a34e528d6b90d50604f7bc8e254b0bcca0357ddfda87499e28c4d451b29745c4ed1fc8824dfef3f34d4d79a7922e3ef20407cdea9a2ae81b2b3030e26ec8
-  data.tar.gz: b106f20dc583ffe4533bdb743559506e7c60cf2c9d7bd4064c94277e9742d1b1157fc619d4eb37f195ded8742bd0ceea36cd3b3dc7c783dbcaa0a803b8e02c0d
+  metadata.gz: 25338e2042f4750a18f48d22dea9ef497f8073a705f8d4950048d87d9eee4b60bca82013e54e7f00c650849795a5c94e759b585e91fda0bd3790425c3b7a58c6
+  data.tar.gz: a833a2fcb7c52364bb377ba8d9edc043499e3ea446d3175efe4e15f944e7197863f27352b4dbd82cb6ea30a2f4ccf943221c42d647cfb578b50fc2ccf7d66134

data/README.md

@@ -175,3 +175,125 @@ You can obviously define the `alt` attribute, mandatory for accessibility, but y
 
 The `caption` attribute is the only one that can act differently, depending on the `figure` setting.
 
+## Live example
+
+Go to this post: [https://nicolas-hoizey.com/2016/07/tout-change-rien-ne-change.html](https://nicolas-hoizey.com/2016/07/tout-change-rien-ne-change.html).
+
+The source Markdown is here: [https://github.com/nhoizey/nicolas-hoizey.com/blob/master/_posts/2016/07/13-tout-change-rien-ne-change/2016-07-13-tout-change-rien-ne-change.md](https://github.com/nhoizey/nicolas-hoizey.com/blob/master/_posts/2016/07/13-tout-change-rien-ne-change/2016-07-13-tout-change-rien-ne-change.md).
+
+The content is in french, yes, but look only at the images if you don't understand.
+
+You'll find here:
+
+- 2 logos floating on the right of the text (or centered on smaller screens): [Jekyll](http://jekyllrb.com/) and [Cloudinary](http://cloudinary.com/invites/lpov9zyyucivvxsnalc5/sgyyc0j14k6p0sbt51nw)
+- 2 screenshots taking the whole width of the content: the [Cloudinary pricing table](http://cloudinary.com/pricing), and [Dareboost](https://www.dareboost.com/en/home)'s performance monitoring graph
+
+These image types need different settings to deal with different sizes and position:
+
+- screenshot always use the full content width, if they're wide enough
+- logos are centered and take one half of the content width on small screens, and are floated and take one fourth of the content width on larger screens
+
+This is how I use the Cloudinary Liquid tag for the Cloudinary logo and prices table screenshot:
+
+```liquid
+{% cloudinary logo /assets/logos/cloudinary.png alt="Logo de Cloudinary" %}
+{% cloudinary cloudinary-pricing.png alt="Les tarifs de Cloudinary" caption="Les tarifs de Cloudinary, dont l'offre gratuite déjà généreuse" %}
+```
+
+The only difference is that I explicitly use the `logo` preset for the logo. The other image uses the `default` preset.
+
+Here is the necessary configuration for this:
+
+```yaml
+cloudinary:
+  cloud_name: …
+  verbose: false
+  presets:
+    default:
+      min_width: 320
+      max_width: 1600
+      steps: 5
+      sizes: '(min-width: 50rem) 50rem, 90vw'
+      figure: always
+    logo:
+      min_width: 80
+      max_width: 400
+      steps: 3
+      sizes: '(min-width: 50rem) 13rem, (min-width: 40rem) 25vw, 45vw'
+      figure: never
+      attributes:
+        class: logo
+```
+
+It generates these HTML fragments (pretty printed here), for the logo:
+
+```html
+<img
+  src="https://nicolas-hoizey.com/assets/logos/cloudinary.png"
+  srcset="
+    https://res.cloudinary.com/nho/image/fetch/c_scale,w_80,q_auto,f_auto/https://nicolas-hoizey.com/assets/logos/cloudinary.png 80w,
+    https://res.cloudinary.com/nho/image/fetch/c_scale,w_240,q_auto,f_auto/https://nicolas-hoizey.com/assets/logos/cloudinary.png 240w,
+    https://res.cloudinary.com/nho/image/fetch/c_scale,w_400,q_auto,f_auto/https://nicolas-hoizey.com/assets/logos/cloudinary.png 400w"
+  sizes="
+    (min-width: 50rem) 13rem,
+    (min-width: 40rem) 25vw,
+    45vw"
+  class="logo"
+  alt="Logo de Cloudinary"
+/>
+```
+
+And for the screenshot:
+
+```html
+<figure>
+  <img
+    src="https://nicolas-hoizey.com/2016/07/cloudinary-pricing.png"
+    srcset="
+      https://res.cloudinary.com/nho/image/fetch/c_scale,w_320,q_auto,f_auto/https://nicolas-hoizey.com/2016/07/cloudinary-pricing.png 320w,
+      https://res.cloudinary.com/nho/image/fetch/c_scale,w_640,q_auto,f_auto/https://nicolas-hoizey.com/2016/07/cloudinary-pricing.png 640w,
+      https://res.cloudinary.com/nho/image/fetch/c_scale,w_960,q_auto,f_auto/https://nicolas-hoizey.com/2016/07/cloudinary-pricing.png 960w"
+    sizes="
+      (min-width: 50rem) 50rem,
+      90vw"
+    alt="Les tarifs de Cloudinary"
+  />
+  <figcaption>Les tarifs de Cloudinary, dont l'offre gratuite déjà généreuse</figcaption>
+</figure>
+```
+
+There are only 3 version in the `srcset` here because 2 of the 5 sizes expected are larger than the source image.
+
+And here are the relevant parts of the accompanying CSS (in Sass form):
+
+```sass
+article {
+  figure, img {
+    margin: 2em auto;
+    display: block;
+    max-width: 100%;
+    height: auto;
+  }
+}
+
+.logo {
+  display: block;
+  margin: 1em auto;
+  max-width: 50%;
+  height: auto;
+
+  @media (min-width: 40em) {
+    max-width: 25%;
+    float: right;
+    margin: 0 0 1em 1em;
+  }
+}
+```
+
+## To do
+
+There are already [a few issues for things that should be added to the plugin](https://github.com/nhoizey/jekyll-cloudinary/issues), feel free to add your ideas!
+
+## Do you use the plugin on a live site?
+
+Please let me know on Twitter: [@nhoizey](https://twitter.com/nhoizey)

data/lib/jekyll/cloudinary.rb

@@ -18,7 +18,7 @@ module Jekyll
           "max_width" => 1200,
           "steps" => 5,
           "sizes" => "100vw",
-          "caption" => "auto",
+          "figure" => "auto",
           "attributes" => { },
           "verbose" => false
         }

data/lib/jekyll/cloudinary/version.rb

@@ -1,5 +1,5 @@
 module Jekyll
   module Cloudinary
-    VERSION = "1.2.8"
+    VERSION = "1.2.9"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-cloudinary
 version: !ruby/object:Gem::Version
-  version: 1.2.8
+  version: 1.2.9
 platform: ruby
 authors:
 - Nicolas Hoizey
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-07-13 00:00:00.000000000 Z
+date: 2016-07-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll