jekyll-google-photos 1.0.3 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +6 -11
- data/_posts/2018-02-22-welcome-to-jekyll.markdown +1 -1
- data/grid.sass +115 -0
- data/lib/jekyll-google-photos/tag.rb +249 -102
- data/lib/jekyll-google-photos/version.rb +1 -1
- metadata +2 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 5b2bbd1230935d3f172d54c5b0c8eb2e197c3cc0
|
4
|
+
data.tar.gz: e9074e81e1be5e790b23b1ca3d255386e5e17ec5
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 54cb9301afd3a136f319729cb528dae22cebbcc11922953369e59e24508b66ee844e86f5b119f933416dfd64c02a813a720b6065298627e79b14a8031c0adf51
|
7
|
+
data.tar.gz: 50452132671bf73109d23a783384e4da7ccafa243281fbd6234ceedbb26d19b8ee93cb7efdfacbc54c3485c83af3f2c73816849941710a57cb3eea5edfe2f9fa
|
data/README.md
CHANGED
@@ -6,12 +6,12 @@
|
|
6
6
|
|
7
7
|
# Installing
|
8
8
|
|
9
|
-
|
9
|
+
Install the gem using:
|
10
10
|
```
|
11
|
-
|
11
|
+
gem install jekyll-google-photos
|
12
12
|
```
|
13
13
|
|
14
|
-
|
14
|
+
Or use the following if you are using bundler
|
15
15
|
```
|
16
16
|
bundle add jekyll-google-photos
|
17
17
|
```
|
@@ -24,18 +24,13 @@ plugins:
|
|
24
24
|
|
25
25
|
# Usage:
|
26
26
|
```
|
27
|
-
{% google_photos <link_to_album>
|
27
|
+
{% google_photos <link_to_album> <max_width> %}
|
28
28
|
```
|
29
|
-
`
|
30
|
-
`row_height_tablet`: Row height on tablets (in pixels)
|
31
|
-
`row_height_phone`: Row height on phones (in pixels)
|
32
|
-
`tablet_max`: Width below which `row_height_tablet` will be used (in pixels)
|
33
|
-
`phone_max`: Width below which `row_height_phone` will be used (in pixels)
|
34
|
-
`margin`: space or margin between rows and adjacent photos
|
29
|
+
`max_width`: Max width of the image loaded from Google servers for the gallery. Larger widths may increase page load time.
|
35
30
|
|
36
31
|
Example:
|
37
32
|
```
|
38
|
-
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246
|
33
|
+
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
|
39
34
|
```
|
40
35
|
|
41
36
|
# Features to implement
|
@@ -5,7 +5,7 @@ date: 2018-02-22 18:29:32 +0000
|
|
5
5
|
categories: jekyll update
|
6
6
|
---
|
7
7
|
|
8
|
-
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246
|
8
|
+
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
|
9
9
|
|
10
10
|
You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
|
11
11
|
|
data/grid.sass
ADDED
@@ -0,0 +1,115 @@
|
|
1
|
+
// Default variables that can be overrided
|
2
|
+
$flexbin-row-height: 300px !default;
|
3
|
+
$flexbin-space: 5px !default;
|
4
|
+
|
5
|
+
$flexbin-phone-max: 300px !default;
|
6
|
+
$flexbin-row-height-phone: 75px !default;
|
7
|
+
$flexbin-space-phone: $flexbin-space !default;
|
8
|
+
|
9
|
+
$a-max: 450px !default;
|
10
|
+
$a-height: 112px !default;
|
11
|
+
|
12
|
+
$b-max: 600px !default;
|
13
|
+
$b-height: 150px !default;
|
14
|
+
|
15
|
+
$c-max: 750px !default;
|
16
|
+
$c-height: 175px !default;
|
17
|
+
|
18
|
+
$d-max: 900px !default;
|
19
|
+
$d-height: 175px !default;
|
20
|
+
|
21
|
+
$e-max: 1050px !default;
|
22
|
+
$e-height: 175px !default;
|
23
|
+
|
24
|
+
$f-max: 1200px !default;
|
25
|
+
$f-height: 180px !default;
|
26
|
+
|
27
|
+
$g-max: 1350px !default;
|
28
|
+
$g-height: 185px !default;
|
29
|
+
|
30
|
+
$h-max: 1500px !default;
|
31
|
+
$h-height: 200px !default;
|
32
|
+
|
33
|
+
$i-max: 1650px !default;
|
34
|
+
$i-height: 210px !default;
|
35
|
+
|
36
|
+
$j-max: 1800px !default;
|
37
|
+
$j-height: 225px !default;
|
38
|
+
|
39
|
+
$k-max: 1950px !default;
|
40
|
+
$k-height: 240px !default;
|
41
|
+
|
42
|
+
$l-max: 2100px !default;
|
43
|
+
$l-height: 250px !default;
|
44
|
+
|
45
|
+
// Minxin for customize multiple Flexbin layout
|
46
|
+
// For example, 300px height for desktop devices, 150px height for mobile devices
|
47
|
+
@mixin flexbin($row-height, $space) {
|
48
|
+
display: flex;
|
49
|
+
overflow: hidden;
|
50
|
+
flex-wrap: wrap;
|
51
|
+
margin: - $space / 2;
|
52
|
+
|
53
|
+
// Let final row align left fit if images are not enough to fill
|
54
|
+
// If the gap is very small, fill the final row
|
55
|
+
&:after {
|
56
|
+
content: '';
|
57
|
+
flex-grow: 999999999; // avoid final row zoom too much to fit width
|
58
|
+
min-width: $row-height; // avoid small gap in final row (< $row-height)
|
59
|
+
height: 0;
|
60
|
+
}
|
61
|
+
|
62
|
+
> * {
|
63
|
+
position: relative;
|
64
|
+
display: block;
|
65
|
+
height: $row-height;
|
66
|
+
margin: $space / 2;
|
67
|
+
flex-grow: 1;
|
68
|
+
|
69
|
+
> img {
|
70
|
+
height: $row-height;
|
71
|
+
object-fit: cover;
|
72
|
+
max-width: 100%;
|
73
|
+
min-width: 100%;
|
74
|
+
vertical-align: bottom;
|
75
|
+
}
|
76
|
+
}
|
77
|
+
|
78
|
+
|
79
|
+
// Add margin around flexbin gallery
|
80
|
+
// Visual margin is the same with space between rows
|
81
|
+
&.flexbin-margin {
|
82
|
+
margin: $space / 2;
|
83
|
+
}
|
84
|
+
}
|
85
|
+
|
86
|
+
// CSS class for basic usage
|
87
|
+
.flexbin {
|
88
|
+
// Desktop devices
|
89
|
+
@include flexbin($flexbin-row-height, $flexbin-space);
|
90
|
+
|
91
|
+
// Tablet devices
|
92
|
+
|
93
|
+
// Phone devices
|
94
|
+
@media (max-width: $flexbin-phone-max) {
|
95
|
+
@include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
|
96
|
+
}
|
97
|
+
@media (min-width: $flexbin-phone-max) and (max-width: $a-max) {
|
98
|
+
@include flexbin($a-height, $flexbin-space-phone);
|
99
|
+
}
|
100
|
+
@media (min-width: $a-max) and (max-width: $b-max) {
|
101
|
+
@include flexbin($b-height, $flexbin-space-phone);
|
102
|
+
}
|
103
|
+
@media (min-width: $b-max) and (max-width: $c-max) {
|
104
|
+
@include flexbin($c-height, $flexbin-space-phone);
|
105
|
+
}
|
106
|
+
@media (min-width: $c-max) and (max-width: $d-max) {
|
107
|
+
@include flexbin($d-height, $flexbin-space-phone);
|
108
|
+
}
|
109
|
+
@media (min-width: $d-max) and (max-width: $e-max) {
|
110
|
+
@include flexbin($e-height, $flexbin-space-phone);
|
111
|
+
}
|
112
|
+
@media (min-width: $e-max) {
|
113
|
+
@include flexbin($f-height, $flexbin-space-phone);
|
114
|
+
}
|
115
|
+
}
|
@@ -9,14 +9,7 @@ module JekyllGooglePhotos
|
|
9
9
|
super
|
10
10
|
args = args.split(" ")
|
11
11
|
url = args[0]
|
12
|
-
@
|
13
|
-
@space = args[6].to_i
|
14
|
-
@tablet_max = args[4].to_i
|
15
|
-
@row_height_tablet = args[2].to_i
|
16
|
-
@space_tablet = @space
|
17
|
-
@phone_max = args[5].to_i
|
18
|
-
@row_height_phone = args[3].to_i
|
19
|
-
@space_phone = @space
|
12
|
+
@maxWidth = args[1]
|
20
13
|
@imgLinks = getImageLinks(url)
|
21
14
|
@dom = createDOM()
|
22
15
|
end
|
@@ -37,98 +30,252 @@ module JekyllGooglePhotos
|
|
37
30
|
|
38
31
|
def flexbinCSS()
|
39
32
|
elem = %Q{
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
33
|
+
.flexbin {
|
34
|
+
display: flex;
|
35
|
+
overflow: hidden;
|
36
|
+
flex-wrap: wrap;
|
37
|
+
margin: -2.5px;
|
38
|
+
}
|
39
|
+
.flexbin:after {
|
40
|
+
content: "";
|
41
|
+
flex-grow: 999999999;
|
42
|
+
min-width: 300px;
|
43
|
+
height: 0;
|
44
|
+
}
|
45
|
+
.flexbin > * {
|
46
|
+
position: relative;
|
47
|
+
display: block;
|
48
|
+
height: 300px;
|
49
|
+
margin: 2.5px;
|
50
|
+
flex-grow: 1;
|
51
|
+
}
|
52
|
+
.flexbin > * > img {
|
53
|
+
height: 300px;
|
54
|
+
object-fit: cover;
|
55
|
+
max-width: 100%;
|
56
|
+
min-width: 100%;
|
57
|
+
vertical-align: bottom;
|
58
|
+
}
|
59
|
+
.flexbin.flexbin-margin {
|
60
|
+
margin: 2.5px;
|
61
|
+
}
|
62
|
+
@media (max-width: 300px) {
|
63
|
+
.flexbin {
|
64
|
+
display: flex;
|
65
|
+
overflow: hidden;
|
66
|
+
flex-wrap: wrap;
|
67
|
+
margin: -2.5px;
|
68
|
+
}
|
69
|
+
.flexbin:after {
|
70
|
+
content: "";
|
71
|
+
flex-grow: 999999999;
|
72
|
+
min-width: 75px;
|
73
|
+
height: 0;
|
74
|
+
}
|
75
|
+
.flexbin > * {
|
76
|
+
position: relative;
|
77
|
+
display: block;
|
78
|
+
height: 75px;
|
79
|
+
margin: 2.5px;
|
80
|
+
flex-grow: 1;
|
81
|
+
}
|
82
|
+
.flexbin > * > img {
|
83
|
+
height: 75px;
|
84
|
+
object-fit: cover;
|
85
|
+
max-width: 100%;
|
86
|
+
min-width: 100%;
|
87
|
+
vertical-align: bottom;
|
88
|
+
}
|
89
|
+
.flexbin.flexbin-margin {
|
90
|
+
margin: 2.5px;
|
91
|
+
}
|
92
|
+
}
|
93
|
+
@media (min-width: 300px) and (max-width: 450px) {
|
94
|
+
.flexbin {
|
95
|
+
display: flex;
|
96
|
+
overflow: hidden;
|
97
|
+
flex-wrap: wrap;
|
98
|
+
margin: -2.5px;
|
99
|
+
}
|
100
|
+
.flexbin:after {
|
101
|
+
content: "";
|
102
|
+
flex-grow: 999999999;
|
103
|
+
min-width: 112px;
|
104
|
+
height: 0;
|
105
|
+
}
|
106
|
+
.flexbin > * {
|
107
|
+
position: relative;
|
108
|
+
display: block;
|
109
|
+
height: 112px;
|
110
|
+
margin: 2.5px;
|
111
|
+
flex-grow: 1;
|
112
|
+
}
|
113
|
+
.flexbin > * > img {
|
114
|
+
height: 112px;
|
115
|
+
object-fit: cover;
|
116
|
+
max-width: 100%;
|
117
|
+
min-width: 100%;
|
118
|
+
vertical-align: bottom;
|
119
|
+
}
|
120
|
+
.flexbin.flexbin-margin {
|
121
|
+
margin: 2.5px;
|
122
|
+
}
|
123
|
+
}
|
124
|
+
@media (min-width: 450px) and (max-width: 600px) {
|
125
|
+
.flexbin {
|
126
|
+
display: flex;
|
127
|
+
overflow: hidden;
|
128
|
+
flex-wrap: wrap;
|
129
|
+
margin: -2.5px;
|
130
|
+
}
|
131
|
+
.flexbin:after {
|
132
|
+
content: "";
|
133
|
+
flex-grow: 999999999;
|
134
|
+
min-width: 150px;
|
135
|
+
height: 0;
|
136
|
+
}
|
137
|
+
.flexbin > * {
|
138
|
+
position: relative;
|
139
|
+
display: block;
|
140
|
+
height: 150px;
|
141
|
+
margin: 2.5px;
|
142
|
+
flex-grow: 1;
|
143
|
+
}
|
144
|
+
.flexbin > * > img {
|
145
|
+
height: 150px;
|
146
|
+
object-fit: cover;
|
147
|
+
max-width: 100%;
|
148
|
+
min-width: 100%;
|
149
|
+
vertical-align: bottom;
|
150
|
+
}
|
151
|
+
.flexbin.flexbin-margin {
|
152
|
+
margin: 2.5px;
|
153
|
+
}
|
154
|
+
}
|
155
|
+
@media (min-width: 600px) and (max-width: 750px) {
|
156
|
+
.flexbin {
|
157
|
+
display: flex;
|
158
|
+
overflow: hidden;
|
159
|
+
flex-wrap: wrap;
|
160
|
+
margin: -2.5px;
|
161
|
+
}
|
162
|
+
.flexbin:after {
|
163
|
+
content: "";
|
164
|
+
flex-grow: 999999999;
|
165
|
+
min-width: 175px;
|
166
|
+
height: 0;
|
167
|
+
}
|
168
|
+
.flexbin > * {
|
169
|
+
position: relative;
|
170
|
+
display: block;
|
171
|
+
height: 175px;
|
172
|
+
margin: 2.5px;
|
173
|
+
flex-grow: 1;
|
174
|
+
}
|
175
|
+
.flexbin > * > img {
|
176
|
+
height: 175px;
|
177
|
+
object-fit: cover;
|
178
|
+
max-width: 100%;
|
179
|
+
min-width: 100%;
|
180
|
+
vertical-align: bottom;
|
181
|
+
}
|
182
|
+
.flexbin.flexbin-margin {
|
183
|
+
margin: 2.5px;
|
184
|
+
}
|
185
|
+
}
|
186
|
+
@media (min-width: 750px) and (max-width: 900px) {
|
187
|
+
.flexbin {
|
188
|
+
display: flex;
|
189
|
+
overflow: hidden;
|
190
|
+
flex-wrap: wrap;
|
191
|
+
margin: -2.5px;
|
192
|
+
}
|
193
|
+
.flexbin:after {
|
194
|
+
content: "";
|
195
|
+
flex-grow: 999999999;
|
196
|
+
min-width: 175px;
|
197
|
+
height: 0;
|
198
|
+
}
|
199
|
+
.flexbin > * {
|
200
|
+
position: relative;
|
201
|
+
display: block;
|
202
|
+
height: 175px;
|
203
|
+
margin: 2.5px;
|
204
|
+
flex-grow: 1;
|
205
|
+
}
|
206
|
+
.flexbin > * > img {
|
207
|
+
height: 175px;
|
208
|
+
object-fit: cover;
|
209
|
+
max-width: 100%;
|
210
|
+
min-width: 100%;
|
211
|
+
vertical-align: bottom;
|
212
|
+
}
|
213
|
+
.flexbin.flexbin-margin {
|
214
|
+
margin: 2.5px;
|
215
|
+
}
|
216
|
+
}
|
217
|
+
@media (min-width: 900px) and (max-width: 1050px) {
|
218
|
+
.flexbin {
|
219
|
+
display: flex;
|
220
|
+
overflow: hidden;
|
221
|
+
flex-wrap: wrap;
|
222
|
+
margin: -2.5px;
|
223
|
+
}
|
224
|
+
.flexbin:after {
|
225
|
+
content: "";
|
226
|
+
flex-grow: 999999999;
|
227
|
+
min-width: 175px;
|
228
|
+
height: 0;
|
229
|
+
}
|
230
|
+
.flexbin > * {
|
231
|
+
position: relative;
|
232
|
+
display: block;
|
233
|
+
height: 175px;
|
234
|
+
margin: 2.5px;
|
235
|
+
flex-grow: 1;
|
236
|
+
}
|
237
|
+
.flexbin > * > img {
|
238
|
+
height: 175px;
|
239
|
+
object-fit: cover;
|
240
|
+
max-width: 100%;
|
241
|
+
min-width: 100%;
|
242
|
+
vertical-align: bottom;
|
243
|
+
}
|
244
|
+
.flexbin.flexbin-margin {
|
245
|
+
margin: 2.5px;
|
246
|
+
}
|
247
|
+
}
|
248
|
+
@media (min-width: 1050px) {
|
249
|
+
.flexbin {
|
250
|
+
display: flex;
|
251
|
+
overflow: hidden;
|
252
|
+
flex-wrap: wrap;
|
253
|
+
margin: -2.5px;
|
254
|
+
}
|
255
|
+
.flexbin:after {
|
256
|
+
content: "";
|
257
|
+
flex-grow: 999999999;
|
258
|
+
min-width: 180px;
|
259
|
+
height: 0;
|
260
|
+
}
|
261
|
+
.flexbin > * {
|
262
|
+
position: relative;
|
263
|
+
display: block;
|
264
|
+
height: 180px;
|
265
|
+
margin: 2.5px;
|
266
|
+
flex-grow: 1;
|
267
|
+
}
|
268
|
+
.flexbin > * > img {
|
269
|
+
height: 180px;
|
270
|
+
object-fit: cover;
|
271
|
+
max-width: 100%;
|
272
|
+
min-width: 100%;
|
273
|
+
vertical-align: bottom;
|
274
|
+
}
|
275
|
+
.flexbin.flexbin-margin {
|
276
|
+
margin: 2.5px;
|
277
|
+
}
|
278
|
+
}
|
132
279
|
}
|
133
280
|
return elem
|
134
281
|
end
|
@@ -144,9 +291,9 @@ module JekyllGooglePhotos
|
|
144
291
|
def addImages()
|
145
292
|
sp = %Q{<div class="flexbin">}
|
146
293
|
for x in @imgLinks
|
147
|
-
link = x[1][0] +
|
294
|
+
link = x[1][0] + "=w#{@maxWidth}"
|
148
295
|
sp += %Q{
|
149
|
-
<a href="#{x[1][0]}">
|
296
|
+
<a href="#{x[1][0] + "=w0"}">
|
150
297
|
<img src="#{link}" />
|
151
298
|
</a>
|
152
299
|
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: jekyll-google-photos
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0
|
4
|
+
version: 1.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Chirag Arora
|
@@ -99,6 +99,7 @@ files:
|
|
99
99
|
- _plugins/jekyll-google-photos.rb
|
100
100
|
- _posts/2018-02-22-welcome-to-jekyll.markdown
|
101
101
|
- about.md
|
102
|
+
- grid.sass
|
102
103
|
- index.md
|
103
104
|
- jekyll-google-photos.gemspec
|
104
105
|
- lib/jekyll-google-photos.rb
|