jekyll-google-photos 1.1.0 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/LICENSE +1 -1
- data/README.md +75 -2
- data/_posts/2018-02-22-welcome-to-jekyll.markdown +1 -1
- data/lib/jekyll-google-photos/tag.rb +287 -253
- data/lib/jekyll-google-photos/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a115a310caa85c2a3100218fa6576736f030740d
|
|
4
|
+
data.tar.gz: 56cdc04d54477d38f01694e2717c7052c2e346c1
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 94b79a2f5221f0fa63c0401145830b5bad331dce2763d8106d1ee59be0ad43c16b6b8259a16d71ec64d9ff4f70e125fc0f1f1f16928f60fdd5d97e8eae93cee6
|
|
7
|
+
data.tar.gz: a0005cbb145eea979ab416d81957b7734d6174405d07d3274b0a9b6981b244aee9985b1598d2f5e1200d6dfb9c6ce9ce3473773b879d0b36585362e56f47ea2a
|
data/LICENSE
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
The MIT License (MIT)
|
|
2
2
|
|
|
3
|
-
Copyright (c) 2019 heychirag <
|
|
3
|
+
Copyright (c) 2019 heychirag <me@chia.ro> (https://chia.ro)
|
|
4
4
|
|
|
5
5
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
6
|
of this software and associated documentation files (the "Software"), to deal
|
data/README.md
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
|
|
1
2
|
# Jekyll Google Photos
|
|
2
3
|
|
|
3
|
-
> 💎
|
|
4
|
+
> 💎 Embed Google Photos Album to your Jekyll Site
|
|
4
5
|
|
|
5
6
|
[Check out the Demo](http://chira.ga/trip-to-annecy/)
|
|
6
7
|
|
|
@@ -26,12 +27,84 @@ plugins:
|
|
|
26
27
|
```
|
|
27
28
|
{% google_photos <link_to_album> <max_width> %}
|
|
28
29
|
```
|
|
29
|
-
`max_width
|
|
30
|
+
`max_width` (pixels): Max width of the image loaded from Google servers for the gallery. Larger widths may increase page load time.
|
|
30
31
|
|
|
31
32
|
Example:
|
|
32
33
|
```
|
|
33
34
|
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
|
|
34
35
|
```
|
|
36
|
+
#### Note
|
|
37
|
+
You can use `0` to get original quality image.
|
|
38
|
+
|
|
39
|
+
# Want to Display images your way?
|
|
40
|
+
|
|
41
|
+
Pass `none` into `max_width`. Passing `none` will not display any image. You can now use image urls to display images in any desired way.
|
|
42
|
+
```
|
|
43
|
+
{% google_photos <link_to_album> none %}
|
|
44
|
+
```
|
|
45
|
+
The image URLs are present in the following array inside the `googlePhotos` object.
|
|
46
|
+
```
|
|
47
|
+
googlePhotos.urls = ["img1","img2",...];
|
|
48
|
+
```
|
|
49
|
+
#### Note
|
|
50
|
+
Image urls will always be available at `googlePhotos.urls` irrespective of what is passed in `max_width`.
|
|
51
|
+
|
|
52
|
+
### Hacking the Image URLs
|
|
53
|
+
|
|
54
|
+
Google provides us a way to 'hack' the base URL of images to manipulate the quality/dimensions of the images. The following information was taken from Google Photos' official documentation:
|
|
55
|
+
|
|
56
|
+
<table>
|
|
57
|
+
<tr>
|
|
58
|
+
<th>
|
|
59
|
+
Parameter
|
|
60
|
+
</th>
|
|
61
|
+
<th>
|
|
62
|
+
Description
|
|
63
|
+
</th>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td>
|
|
67
|
+
w, h
|
|
68
|
+
</td>
|
|
69
|
+
<td>
|
|
70
|
+
The width, <b>w</b> and height, <b>h</b> parameters.
|
|
71
|
+
|
|
72
|
+
To access an image media item, such as a photo or a thumbnail for a video, you must specify the dimensions that you plan to display in your application (so that the image can be scaled into these dimensions while preserving the aspect ratio). To do this, concatenate the base URL with your required dimensions as shown in the examples.
|
|
73
|
+
|
|
74
|
+
<b>Example:</b>
|
|
75
|
+
|
|
76
|
+
<b><i>BASE_URL</i></b>=w<i><b>MAX_WIDTH</b></i>-h<i><b>MAX_HEIGHT</b></i>
|
|
77
|
+
|
|
78
|
+
Here is an example to display a media item no wider than 2048 px and no taller than 1024 px:
|
|
79
|
+
|
|
80
|
+
https://lh3.googleusercontent.com/p/AF....VnnY<b>=w2048-h1024</b>
|
|
81
|
+
</td>
|
|
82
|
+
</tr>
|
|
83
|
+
<tr>
|
|
84
|
+
<td>
|
|
85
|
+
c
|
|
86
|
+
</td>
|
|
87
|
+
<td>
|
|
88
|
+
The crop, <b>c</b> parameter.
|
|
89
|
+
|
|
90
|
+
If you want to crop the image to the exact width and height dimensions you have specified, concatenate the base URL with the optional -c parameter along with the mandatory w and h parameters.
|
|
91
|
+
|
|
92
|
+
The size (in pixels) should be in the range [1, 16383]. If either the width or the height of the image, exceeds the requested size, the image is scaled down and cropped (maintaining the aspect ratio).
|
|
93
|
+
|
|
94
|
+
<b>Example:</b>
|
|
95
|
+
|
|
96
|
+
<b><i>BASE_URL</i></b>=w<i><b>MAX_WIDTH</b></i>-h<i><b>MAX_HEIGHT</b></i>-c
|
|
97
|
+
|
|
98
|
+
In this example, the application displays a media item that is exactly 256 px wide by 256 px high, such as a thumbnail:
|
|
99
|
+
|
|
100
|
+
https://lh3.googleusercontent.com/p/AF....VnnY<b>=w256-h256-c</b>
|
|
101
|
+
</td>
|
|
102
|
+
</tr>
|
|
103
|
+
</table>
|
|
104
|
+
|
|
105
|
+
#### Note
|
|
106
|
+
You can use `=w0-h0` for unaltered image quality.
|
|
107
|
+
|
|
35
108
|
|
|
36
109
|
# Features to implement
|
|
37
110
|
|
|
@@ -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 1000 %}
|
|
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
|
|
|
@@ -30,273 +30,307 @@ module JekyllGooglePhotos
|
|
|
30
30
|
|
|
31
31
|
def flexbinCSS()
|
|
32
32
|
elem = %Q{
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
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
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
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
|
+
}
|
|
279
|
+
.stage{
|
|
280
|
+
position:absolute;
|
|
281
|
+
width:100%;
|
|
282
|
+
height:100%;
|
|
283
|
+
background-color: black;
|
|
284
|
+
top:0;
|
|
285
|
+
left:0;
|
|
286
|
+
}
|
|
287
|
+
.stage img {
|
|
288
|
+
position:absolute;
|
|
289
|
+
left:0; right:0;
|
|
290
|
+
top:0; bottom:0;
|
|
291
|
+
margin:auto;
|
|
292
|
+
max-width:100%;
|
|
293
|
+
max-height:100%;
|
|
294
|
+
overflow:auto;
|
|
295
|
+
}
|
|
296
|
+
}
|
|
280
297
|
return elem
|
|
281
298
|
end
|
|
282
299
|
|
|
300
|
+
def URLsInJSON()
|
|
301
|
+
sp = "googlePhotos.urls = ["
|
|
302
|
+
for x in @imgLinks
|
|
303
|
+
sp += "\"#{x[1][0]}\","
|
|
304
|
+
end
|
|
305
|
+
sp += "];"
|
|
306
|
+
return sp
|
|
307
|
+
end
|
|
308
|
+
|
|
283
309
|
def createDOM()
|
|
284
|
-
sp =
|
|
285
|
-
sp +=
|
|
286
|
-
sp +=
|
|
287
|
-
sp +=
|
|
310
|
+
sp = "<script>"
|
|
311
|
+
sp += "googlePhotos = {};"
|
|
312
|
+
sp += URLsInJSON()
|
|
313
|
+
sp += "</script>"
|
|
314
|
+
if(@maxWidth != "none")
|
|
315
|
+
sp += %Q{<style>}
|
|
316
|
+
sp += flexbinCSS()
|
|
317
|
+
sp += %Q{</style>}
|
|
318
|
+
sp += addImages()
|
|
319
|
+
end
|
|
288
320
|
return sp
|
|
289
321
|
end
|
|
290
322
|
|
|
291
323
|
def addImages()
|
|
292
324
|
sp = %Q{<div class="flexbin">}
|
|
325
|
+
idx = 0
|
|
293
326
|
for x in @imgLinks
|
|
294
327
|
link = x[1][0] + "=w#{@maxWidth}"
|
|
295
328
|
sp += %Q{
|
|
296
|
-
<
|
|
329
|
+
<div onclick="showSlides(#{idx});" class="slideImgs">
|
|
297
330
|
<img src="#{link}" />
|
|
298
|
-
</
|
|
331
|
+
</div>
|
|
299
332
|
}
|
|
333
|
+
idx += 1
|
|
300
334
|
end
|
|
301
335
|
sp += %Q{</div>}
|
|
302
336
|
return sp
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: jekyll-google-photos
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.
|
|
4
|
+
version: 1.2.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Chirag Arora
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2019-08-
|
|
11
|
+
date: 2019-08-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|