jekyll-cloudinary 1.0.1 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +90 -2
- data/lib/jekyll/cloudinary/version.rb +1 -1
- data/lib/jekyll/cloudinary.rb +2 -27
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7c5672ae22dc5b6878eec8a18a18067c6077bada
|
4
|
+
data.tar.gz: 56da655d0e834eb5b376735f78542baf3ca04c1a
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 52e9e6b92110f32af7c9c872c51baf6ba36ba13f8c6dd25d06791bcca24553973e320b35ee14803ed3e34a872ab0af4d163728a9d981765121ef3e6716987a7f
|
7
|
+
data.tar.gz: 78e9de26eb34dd27f677048fba619d2fc94bf13c79c6c45fd89e422b73bb1dc8513df04ae333b077fc8d0b3cb13186dce6d3673380c922f81ce639c3cd8d3b4c
|
data/README.md
CHANGED
@@ -1,3 +1,91 @@
|
|
1
|
-
#
|
1
|
+
# Jekyll Cloudinary Liquid tag
|
2
2
|
|
3
|
-
|
3
|
+
`jekyll-cloudinary` is a [Jekyll](http://jekyllrb.com/) plugin adding a [Liquid](http://liquidmarkup.org) tag to ease the use of [Cloudinary](http://cloudinary.com/invites/lpov9zyyucivvxsnalc5/sgyyc0j14k6p0sbt51nw) for responsive images in your Markdown/[Kramdown](http://kramdown.gettalong.org/) posts.
|
4
|
+
|
5
|
+
It builds the HTML for responsive images in the posts, using the `srcset` and `sizes` attributes for the `<img />` tag (see [the "varying size and density" section of this post by Jake Archibald](https://jakearchibald.com/2015/anatomy-of-responsive-images/#varying-size-and-density) if this is new for you). URLs in the `srcset` are cloudinary URLs that [fetch on-the-fly](http://cloudinary.com/features#fetch) the post's images and resizes them to several sizes.
|
6
|
+
|
7
|
+
You are in full control of the number of generated images and their size, and the `sizes` attribute that helps the browser decide which image to download. See the complete configuration options for details.
|
8
|
+
|
9
|
+
## Using Jekyll Cloudinary
|
10
|
+
|
11
|
+
[Sign up for free on Cloudinary](http://cloudinary.com/invites/lpov9zyyucivvxsnalc5/sgyyc0j14k6p0sbt51nw). The free account should be enough for mosts blogs.
|
12
|
+
|
13
|
+
Add `gem 'jekyll-cloudinary'` to your `Gemfile` and run `bundle update` to install the gem.
|
14
|
+
|
15
|
+
Add `jekyll-cloudinary` to your `_config.yml` like the following:
|
16
|
+
|
17
|
+
```yaml
|
18
|
+
gems:
|
19
|
+
- jekyll-cloudinary
|
20
|
+
```
|
21
|
+
|
22
|
+
## Configuration
|
23
|
+
|
24
|
+
### Mandatory settings
|
25
|
+
|
26
|
+
Add `cloudinary` to your `_config.yml` and your Cloudinary "Cloud name" (find it in your [Cloudinary dashboard](https://cloudinary.com/console)):
|
27
|
+
|
28
|
+
```yaml
|
29
|
+
cloudinary:
|
30
|
+
cloud_name: <put here your Cloudinary "Cloud name">
|
31
|
+
```
|
32
|
+
|
33
|
+
### Optional global settings
|
34
|
+
|
35
|
+
You can now define some global settings
|
36
|
+
|
37
|
+
```yaml
|
38
|
+
cloudinary:
|
39
|
+
…
|
40
|
+
verbose: true
|
41
|
+
```
|
42
|
+
|
43
|
+
#### `auto`
|
44
|
+
|
45
|
+
#### `verbose`
|
46
|
+
|
47
|
+
|
48
|
+
### Optional (but highly recommended) presets
|
49
|
+
|
50
|
+
```yaml
|
51
|
+
cloudinary:
|
52
|
+
…
|
53
|
+
presets:
|
54
|
+
default:
|
55
|
+
min_size: 320
|
56
|
+
max_size: 1600
|
57
|
+
steps: 5
|
58
|
+
sizes: "(min-width: 50rem) 50rem, 90vw"
|
59
|
+
onethird:
|
60
|
+
min_size: 110
|
61
|
+
max_size: 535
|
62
|
+
steps: 3
|
63
|
+
sizes: "(min-width: 50rem) 17rem, 30vw"
|
64
|
+
attributes:
|
65
|
+
class: onethird
|
66
|
+
```
|
67
|
+
|
68
|
+
#### `min_size`
|
69
|
+
|
70
|
+
#### `max_size`
|
71
|
+
|
72
|
+
#### `steps`
|
73
|
+
|
74
|
+
#### `sizes`
|
75
|
+
|
76
|
+
#### `attributes`
|
77
|
+
|
78
|
+
## Usage
|
79
|
+
|
80
|
+
This is the Liquid tag syntax:
|
81
|
+
|
82
|
+
```Liquid
|
83
|
+
{% cloudinary [preset] path/to/img.jpg [attr="value"] %}
|
84
|
+
```
|
85
|
+
|
86
|
+
## Examples
|
87
|
+
|
88
|
+
```Liquid
|
89
|
+
{% cloudinary image1.jpg alt="alternate" %}
|
90
|
+
{% cloudinary onethird image2.jpg alt="other" title="yet another one" %}
|
91
|
+
```
|
data/lib/jekyll/cloudinary.rb
CHANGED
@@ -1,28 +1,3 @@
|
|
1
|
-
=begin
|
2
|
-
Liquid tag to use Cloudinary for optimized responsive posts images.
|
3
|
-
Usage:
|
4
|
-
{% cloudinary [preset] path/to/img.jpg [attr="value"] %}
|
5
|
-
Examples:
|
6
|
-
{% cloudinary image1.jpg alt="alternate" %}
|
7
|
-
{% cloudinary onethird image2.jpg alt="other" title="yet another one" %}
|
8
|
-
|
9
|
-
Configuration
|
10
|
-
In _config.yml:
|
11
|
-
|
12
|
-
cloudinary:
|
13
|
-
api_id: …
|
14
|
-
auto: true
|
15
|
-
verbose: true
|
16
|
-
presets:
|
17
|
-
default:
|
18
|
-
min_size: 320
|
19
|
-
max_size: 1600
|
20
|
-
steps: 5
|
21
|
-
sizes: "(min-width: 50rem) 50rem, 90vw"
|
22
|
-
attributes:
|
23
|
-
class: onethird
|
24
|
-
|
25
|
-
=end
|
26
1
|
module Jekyll
|
27
2
|
module Cloudinary
|
28
3
|
|
@@ -148,12 +123,12 @@ module Jekyll
|
|
148
123
|
if settings['verbose']
|
149
124
|
puts "[Cloudinary] Natural width of source image '#{File.basename(image_src)}' (#{natural_width}px) in #{context['page'].path} not enough for creating any srcset version"
|
150
125
|
end
|
151
|
-
srcset << "http://res.cloudinary.com/#{settings['
|
126
|
+
srcset << "http://res.cloudinary.com/#{settings['cloud_name']}/image/fetch/q_auto,f_auto/#{image_url} #{natural_width}w"
|
152
127
|
else
|
153
128
|
(0..steps).each do |factor|
|
154
129
|
width = min_width + factor * step_width
|
155
130
|
if width <= natural_width
|
156
|
-
srcset << "http://res.cloudinary.com/#{settings['
|
131
|
+
srcset << "http://res.cloudinary.com/#{settings['cloud_name']}/image/fetch/c_scale,w_#{width},q_auto,f_auto/#{image_url} #{width}w"
|
157
132
|
else
|
158
133
|
if settings['verbose']
|
159
134
|
puts "[Cloudinary] Natural width of source image '#{File.basename(image_src)}' (#{natural_width}px) in #{context['page'].path} not enough for creating #{width}px version"
|