jekyll-google-photos 1.2.0 → 1.4.3
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/Gemfile.lock +1 -1
- data/README.md +68 -0
- data/_posts/2018-02-22-welcome-to-jekyll.markdown +31 -1
- data/lib/jekyll-google-photos/css.rb +270 -0
- data/lib/jekyll-google-photos/tag.rb +35 -305
- data/lib/jekyll-google-photos/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: eb8e9ab478795253cf131c969100835f9a2ef3f3
|
|
4
|
+
data.tar.gz: 8e01f576c5efdbb3166ea94cc8b7cb187fd6ae46
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0f0b4a1d6496ae5d91349ad3e1d3a5e1379e9057d876be1c8001a2b95748bd62f6d5369e2e6e703b23d81510504150354e87cc496922e29796b020791f9267d4
|
|
7
|
+
data.tar.gz: c62fcbbbdd07816f466e71170feeb3c54bef1051105dd8f7eb66b35a30e1238f8750a4faa0fe0ed39b0e36da35af9def39084b0c0358ddb6db5fc155fa3717af
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
|
|
6
6
|
[Check out the Demo](http://chira.ga/trip-to-annecy/)
|
|
7
7
|
|
|
8
|
+
> :warning: Please note that this plugin is **NOT** supported by GitHub pages. Here is a [list of all plugins supported](https://pages.github.com/versions/). However you can follow [this GitHub guide](https://help.github.com/articles/adding-jekyll-plugins-to-a-github-pages-site/) to enable it or by using [Travis CI](https://ayastreb.me/deploy-jekyll-to-github-pages-with-travis-ci/). GitLab supposedly supports [any plugin](https://about.gitlab.com/comparison/gitlab-pages-vs-github-pages.html).
|
|
9
|
+
|
|
8
10
|
# Installing
|
|
9
11
|
|
|
10
12
|
Install the gem using:
|
|
@@ -33,9 +35,33 @@ Example:
|
|
|
33
35
|
```
|
|
34
36
|
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
|
|
35
37
|
```
|
|
38
|
+
or using variables/front matter
|
|
39
|
+
```
|
|
40
|
+
---
|
|
41
|
+
gallery_url: https://photos.app.goo.gl/bhWukds8QVodFU24
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
{% google_photos page.gallery_url 800 %}
|
|
45
|
+
```
|
|
36
46
|
#### Note
|
|
37
47
|
You can use `0` to get original quality image.
|
|
38
48
|
|
|
49
|
+
### Adding Multiple Albums
|
|
50
|
+
|
|
51
|
+
Create a custom variable in the front matter of the page that would contain URL to albums you'd like to use:
|
|
52
|
+
```
|
|
53
|
+
---
|
|
54
|
+
album_urls:
|
|
55
|
+
- <URL 1>
|
|
56
|
+
- <URL 2>
|
|
57
|
+
- <URL N>
|
|
58
|
+
---
|
|
59
|
+
```
|
|
60
|
+
Then use the `google_photos` tag using the same principle but this time passing the new variable:
|
|
61
|
+
```
|
|
62
|
+
{% google_photos page.album_urls 800 %}
|
|
63
|
+
```
|
|
64
|
+
|
|
39
65
|
# Want to Display images your way?
|
|
40
66
|
|
|
41
67
|
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.
|
|
@@ -49,6 +75,34 @@ googlePhotos.urls = ["img1","img2",...];
|
|
|
49
75
|
#### Note
|
|
50
76
|
Image urls will always be available at `googlePhotos.urls` irrespective of what is passed in `max_width`.
|
|
51
77
|
|
|
78
|
+
### Example integrating a third party gallery plugin
|
|
79
|
+
|
|
80
|
+
This is the answer to issue [#5](https://github.com/heychirag/jekyll-google-photos/issues/5)
|
|
81
|
+
|
|
82
|
+
```
|
|
83
|
+
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 none %}
|
|
84
|
+
|
|
85
|
+
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
|
|
86
|
+
|
|
87
|
+
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
|
|
88
|
+
data-link="<Album link>"
|
|
89
|
+
data-title="<Album Name>"
|
|
90
|
+
data-description="<Album Description>"
|
|
91
|
+
data-delay="5"
|
|
92
|
+
id="MyAlbum1">
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<script>
|
|
96
|
+
let MyAlbum1 = document.getElementById('MyAlbum1');
|
|
97
|
+
let imageWidth = '0';
|
|
98
|
+
for(var i in googlePhotos.urls) {
|
|
99
|
+
let picture = document.createElement('object');
|
|
100
|
+
picture.setAttribute("data", googlePhotos.urls[i] + '=w' + imageWidth);
|
|
101
|
+
MyAlbum1.appendChild(picture);
|
|
102
|
+
}
|
|
103
|
+
</script>
|
|
104
|
+
```
|
|
105
|
+
|
|
52
106
|
### Hacking the Image URLs
|
|
53
107
|
|
|
54
108
|
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:
|
|
@@ -105,6 +159,20 @@ https://lh3.googleusercontent.com/p/AF....VnnY=w256-h256-c
|
|
|
105
159
|
#### Note
|
|
106
160
|
You can use `=w0-h0` for unaltered image quality.
|
|
107
161
|
|
|
162
|
+
# Error using this plugin with Github pages?
|
|
163
|
+
|
|
164
|
+
A lot of users are experiencing issues when using this plugin with Github pages.
|
|
165
|
+
|
|
166
|
+
#### Reason
|
|
167
|
+
|
|
168
|
+
Github only supports a limited number of Ruby gems.
|
|
169
|
+
|
|
170
|
+
https://stackoverflow.com/questions/53215356/jekyll-how-to-use-custom-plugins-with-github-pages
|
|
171
|
+
|
|
172
|
+
#### Solution
|
|
173
|
+
|
|
174
|
+
- Try building locally and then push contents of `_site` to your repository.
|
|
175
|
+
- Try other static site builders. Gitlab pages is a good alternative.
|
|
108
176
|
|
|
109
177
|
# Features to implement
|
|
110
178
|
|
|
@@ -3,9 +3,39 @@ layout: post
|
|
|
3
3
|
title: "Welcome to Jekyll!"
|
|
4
4
|
date: 2018-02-22 18:29:32 +0000
|
|
5
5
|
categories: jekyll update
|
|
6
|
+
gallery_urls:
|
|
7
|
+
- https://photos.app.goo.gl/bhWukds8QVodFU246
|
|
8
|
+
- https://photos.app.goo.gl/bhWukds8QVodFU246
|
|
9
|
+
album_settings:
|
|
10
|
+
delay: 5
|
|
11
|
+
title: "Trip to Annecy"
|
|
12
|
+
image_width: 0
|
|
13
|
+
image_height: 0
|
|
14
|
+
frame_height: "200px"
|
|
15
|
+
frame_width: "300px"
|
|
6
16
|
---
|
|
7
17
|
|
|
8
|
-
{% google_photos
|
|
18
|
+
{% google_photos page.gallery_urls page.album_settings %}
|
|
19
|
+
|
|
20
|
+
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
|
|
21
|
+
|
|
22
|
+
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
|
|
23
|
+
data-link="<Album link>"
|
|
24
|
+
data-title="<Album Name>"
|
|
25
|
+
data-description="<Album Description>"
|
|
26
|
+
data-delay="5"
|
|
27
|
+
id="MyAlbum1">
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<script>
|
|
31
|
+
let MyAlbum1 = document.getElementById('MyAlbum1');
|
|
32
|
+
let imageWidth = '0';
|
|
33
|
+
for(var i in googlePhotos.urls) {
|
|
34
|
+
let picture = document.createElement('object');
|
|
35
|
+
picture.setAttribute("data", googlePhotos.urls[i] + '=w' + imageWidth);
|
|
36
|
+
MyAlbum1.appendChild(picture);
|
|
37
|
+
}
|
|
38
|
+
</script>
|
|
9
39
|
|
|
10
40
|
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
41
|
|
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
def FlexbinCSS()
|
|
2
|
+
elem = %Q{
|
|
3
|
+
.flexbin {
|
|
4
|
+
display: flex;
|
|
5
|
+
overflow: hidden;
|
|
6
|
+
flex-wrap: wrap;
|
|
7
|
+
margin: -2.5px;
|
|
8
|
+
}
|
|
9
|
+
.flexbin:after {
|
|
10
|
+
content: "";
|
|
11
|
+
flex-grow: 999999999;
|
|
12
|
+
min-width: 300px;
|
|
13
|
+
height: 0;
|
|
14
|
+
}
|
|
15
|
+
.flexbin > * {
|
|
16
|
+
position: relative;
|
|
17
|
+
display: block;
|
|
18
|
+
height: 300px;
|
|
19
|
+
margin: 2.5px;
|
|
20
|
+
flex-grow: 1;
|
|
21
|
+
}
|
|
22
|
+
.flexbin > * > img {
|
|
23
|
+
height: 300px;
|
|
24
|
+
object-fit: cover;
|
|
25
|
+
max-width: 100%;
|
|
26
|
+
min-width: 100%;
|
|
27
|
+
vertical-align: bottom;
|
|
28
|
+
}
|
|
29
|
+
.flexbin.flexbin-margin {
|
|
30
|
+
margin: 2.5px;
|
|
31
|
+
}
|
|
32
|
+
@media (max-width: 300px) {
|
|
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: 75px;
|
|
43
|
+
height: 0;
|
|
44
|
+
}
|
|
45
|
+
.flexbin > * {
|
|
46
|
+
position: relative;
|
|
47
|
+
display: block;
|
|
48
|
+
height: 75px;
|
|
49
|
+
margin: 2.5px;
|
|
50
|
+
flex-grow: 1;
|
|
51
|
+
}
|
|
52
|
+
.flexbin > * > img {
|
|
53
|
+
height: 75px;
|
|
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
|
+
}
|
|
63
|
+
@media (min-width: 300px) and (max-width: 450px) {
|
|
64
|
+
.flexbin {
|
|
65
|
+
display: flex;
|
|
66
|
+
overflow: hidden;
|
|
67
|
+
flex-wrap: wrap;
|
|
68
|
+
margin: -2.5px;
|
|
69
|
+
}
|
|
70
|
+
.flexbin:after {
|
|
71
|
+
content: "";
|
|
72
|
+
flex-grow: 999999999;
|
|
73
|
+
min-width: 112px;
|
|
74
|
+
height: 0;
|
|
75
|
+
}
|
|
76
|
+
.flexbin > * {
|
|
77
|
+
position: relative;
|
|
78
|
+
display: block;
|
|
79
|
+
height: 112px;
|
|
80
|
+
margin: 2.5px;
|
|
81
|
+
flex-grow: 1;
|
|
82
|
+
}
|
|
83
|
+
.flexbin > * > img {
|
|
84
|
+
height: 112px;
|
|
85
|
+
object-fit: cover;
|
|
86
|
+
max-width: 100%;
|
|
87
|
+
min-width: 100%;
|
|
88
|
+
vertical-align: bottom;
|
|
89
|
+
}
|
|
90
|
+
.flexbin.flexbin-margin {
|
|
91
|
+
margin: 2.5px;
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
@media (min-width: 450px) and (max-width: 600px) {
|
|
95
|
+
.flexbin {
|
|
96
|
+
display: flex;
|
|
97
|
+
overflow: hidden;
|
|
98
|
+
flex-wrap: wrap;
|
|
99
|
+
margin: -2.5px;
|
|
100
|
+
}
|
|
101
|
+
.flexbin:after {
|
|
102
|
+
content: "";
|
|
103
|
+
flex-grow: 999999999;
|
|
104
|
+
min-width: 150px;
|
|
105
|
+
height: 0;
|
|
106
|
+
}
|
|
107
|
+
.flexbin > * {
|
|
108
|
+
position: relative;
|
|
109
|
+
display: block;
|
|
110
|
+
height: 150px;
|
|
111
|
+
margin: 2.5px;
|
|
112
|
+
flex-grow: 1;
|
|
113
|
+
}
|
|
114
|
+
.flexbin > * > img {
|
|
115
|
+
height: 150px;
|
|
116
|
+
object-fit: cover;
|
|
117
|
+
max-width: 100%;
|
|
118
|
+
min-width: 100%;
|
|
119
|
+
vertical-align: bottom;
|
|
120
|
+
}
|
|
121
|
+
.flexbin.flexbin-margin {
|
|
122
|
+
margin: 2.5px;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
@media (min-width: 600px) and (max-width: 750px) {
|
|
126
|
+
.flexbin {
|
|
127
|
+
display: flex;
|
|
128
|
+
overflow: hidden;
|
|
129
|
+
flex-wrap: wrap;
|
|
130
|
+
margin: -2.5px;
|
|
131
|
+
}
|
|
132
|
+
.flexbin:after {
|
|
133
|
+
content: "";
|
|
134
|
+
flex-grow: 999999999;
|
|
135
|
+
min-width: 175px;
|
|
136
|
+
height: 0;
|
|
137
|
+
}
|
|
138
|
+
.flexbin > * {
|
|
139
|
+
position: relative;
|
|
140
|
+
display: block;
|
|
141
|
+
height: 175px;
|
|
142
|
+
margin: 2.5px;
|
|
143
|
+
flex-grow: 1;
|
|
144
|
+
}
|
|
145
|
+
.flexbin > * > img {
|
|
146
|
+
height: 175px;
|
|
147
|
+
object-fit: cover;
|
|
148
|
+
max-width: 100%;
|
|
149
|
+
min-width: 100%;
|
|
150
|
+
vertical-align: bottom;
|
|
151
|
+
}
|
|
152
|
+
.flexbin.flexbin-margin {
|
|
153
|
+
margin: 2.5px;
|
|
154
|
+
}
|
|
155
|
+
}
|
|
156
|
+
@media (min-width: 750px) and (max-width: 900px) {
|
|
157
|
+
.flexbin {
|
|
158
|
+
display: flex;
|
|
159
|
+
overflow: hidden;
|
|
160
|
+
flex-wrap: wrap;
|
|
161
|
+
margin: -2.5px;
|
|
162
|
+
}
|
|
163
|
+
.flexbin:after {
|
|
164
|
+
content: "";
|
|
165
|
+
flex-grow: 999999999;
|
|
166
|
+
min-width: 175px;
|
|
167
|
+
height: 0;
|
|
168
|
+
}
|
|
169
|
+
.flexbin > * {
|
|
170
|
+
position: relative;
|
|
171
|
+
display: block;
|
|
172
|
+
height: 175px;
|
|
173
|
+
margin: 2.5px;
|
|
174
|
+
flex-grow: 1;
|
|
175
|
+
}
|
|
176
|
+
.flexbin > * > img {
|
|
177
|
+
height: 175px;
|
|
178
|
+
object-fit: cover;
|
|
179
|
+
max-width: 100%;
|
|
180
|
+
min-width: 100%;
|
|
181
|
+
vertical-align: bottom;
|
|
182
|
+
}
|
|
183
|
+
.flexbin.flexbin-margin {
|
|
184
|
+
margin: 2.5px;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
@media (min-width: 900px) and (max-width: 1050px) {
|
|
188
|
+
.flexbin {
|
|
189
|
+
display: flex;
|
|
190
|
+
overflow: hidden;
|
|
191
|
+
flex-wrap: wrap;
|
|
192
|
+
margin: -2.5px;
|
|
193
|
+
}
|
|
194
|
+
.flexbin:after {
|
|
195
|
+
content: "";
|
|
196
|
+
flex-grow: 999999999;
|
|
197
|
+
min-width: 175px;
|
|
198
|
+
height: 0;
|
|
199
|
+
}
|
|
200
|
+
.flexbin > * {
|
|
201
|
+
position: relative;
|
|
202
|
+
display: block;
|
|
203
|
+
height: 175px;
|
|
204
|
+
margin: 2.5px;
|
|
205
|
+
flex-grow: 1;
|
|
206
|
+
}
|
|
207
|
+
.flexbin > * > img {
|
|
208
|
+
height: 175px;
|
|
209
|
+
object-fit: cover;
|
|
210
|
+
max-width: 100%;
|
|
211
|
+
min-width: 100%;
|
|
212
|
+
vertical-align: bottom;
|
|
213
|
+
}
|
|
214
|
+
.flexbin.flexbin-margin {
|
|
215
|
+
margin: 2.5px;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
@media (min-width: 1050px) {
|
|
219
|
+
.flexbin {
|
|
220
|
+
display: flex;
|
|
221
|
+
overflow: hidden;
|
|
222
|
+
flex-wrap: wrap;
|
|
223
|
+
margin: -2.5px;
|
|
224
|
+
}
|
|
225
|
+
.flexbin:after {
|
|
226
|
+
content: "";
|
|
227
|
+
flex-grow: 999999999;
|
|
228
|
+
min-width: 180px;
|
|
229
|
+
height: 0;
|
|
230
|
+
}
|
|
231
|
+
.flexbin > * {
|
|
232
|
+
position: relative;
|
|
233
|
+
display: block;
|
|
234
|
+
height: 180px;
|
|
235
|
+
margin: 2.5px;
|
|
236
|
+
flex-grow: 1;
|
|
237
|
+
}
|
|
238
|
+
.flexbin > * > img {
|
|
239
|
+
height: 180px;
|
|
240
|
+
object-fit: cover;
|
|
241
|
+
max-width: 100%;
|
|
242
|
+
min-width: 100%;
|
|
243
|
+
vertical-align: bottom;
|
|
244
|
+
}
|
|
245
|
+
.flexbin.flexbin-margin {
|
|
246
|
+
margin: 2.5px;
|
|
247
|
+
}
|
|
248
|
+
}
|
|
249
|
+
.stage{
|
|
250
|
+
position:absolute;
|
|
251
|
+
width:100%;
|
|
252
|
+
height:100%;
|
|
253
|
+
background-color: black;
|
|
254
|
+
top:0;
|
|
255
|
+
left:0;
|
|
256
|
+
}
|
|
257
|
+
.stage img {
|
|
258
|
+
position:absolute;
|
|
259
|
+
left:0; right:0;
|
|
260
|
+
top:0; bottom:0;
|
|
261
|
+
margin:auto;
|
|
262
|
+
max-width:100%;
|
|
263
|
+
max-height:100%;
|
|
264
|
+
overflow:auto;
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
return elem
|
|
268
|
+
end
|
|
269
|
+
|
|
270
|
+
public :FlexbinCSS
|
|
@@ -8,336 +8,66 @@ module JekyllGooglePhotos
|
|
|
8
8
|
def initialize(tagName, args, tokens)
|
|
9
9
|
super
|
|
10
10
|
args = args.split(" ")
|
|
11
|
-
|
|
12
|
-
@
|
|
13
|
-
@imgLinks = getImageLinks(url)
|
|
14
|
-
@dom = createDOM()
|
|
11
|
+
@albumUrls = args[0]
|
|
12
|
+
@albumSettings = args[1]
|
|
15
13
|
end
|
|
16
14
|
|
|
17
15
|
def getImageLinks(url)
|
|
18
16
|
doc = Nokogiri::HTML(open(url.strip).read)
|
|
19
17
|
scripts = doc.xpath("//script")
|
|
18
|
+
jsonString = ""
|
|
20
19
|
for x in scripts do
|
|
21
20
|
if x.inner_html.match(/initDataCallback\(/)
|
|
22
21
|
jsonString = x.inner_html
|
|
23
|
-
jsonString = jsonString.
|
|
24
|
-
jsonString["\n}});"] = ""
|
|
22
|
+
jsonString = jsonString.scan(/\[\"(http.*googleusercontent.com\/[^((?!\/a\/).)*$].*)\"/)
|
|
25
23
|
end
|
|
26
24
|
end
|
|
27
|
-
|
|
28
|
-
return json[1]
|
|
29
|
-
end
|
|
30
|
-
|
|
31
|
-
def flexbinCSS()
|
|
32
|
-
elem = %Q{
|
|
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
|
-
}
|
|
297
|
-
return elem
|
|
25
|
+
return jsonString
|
|
298
26
|
end
|
|
299
27
|
|
|
300
28
|
def URLsInJSON()
|
|
301
|
-
sp =
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
sp += "];"
|
|
29
|
+
sp = 'googlePhotos.urls = ["'
|
|
30
|
+
newImgLinks = @imgLinks.uniq.join('", "')
|
|
31
|
+
sp += "#{newImgLinks}"
|
|
32
|
+
sp += '"];'
|
|
306
33
|
return sp
|
|
307
34
|
end
|
|
308
35
|
|
|
309
|
-
def createDOM()
|
|
36
|
+
def createDOM(albumSettings)
|
|
310
37
|
sp = "<script>"
|
|
311
38
|
sp += "googlePhotos = {};"
|
|
312
39
|
sp += URLsInJSON()
|
|
313
40
|
sp += "</script>"
|
|
314
|
-
if(@maxWidth != "none")
|
|
315
|
-
sp += %Q{<style>}
|
|
316
|
-
sp += flexbinCSS()
|
|
317
|
-
sp += %Q{</style>}
|
|
318
|
-
sp += addImages()
|
|
319
|
-
end
|
|
320
41
|
return sp
|
|
321
42
|
end
|
|
322
|
-
|
|
323
|
-
def
|
|
324
|
-
sp = %Q{
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
link = x[1][0] + "=w#{@maxWidth}"
|
|
328
|
-
sp += %Q{
|
|
329
|
-
<div onclick="showSlides(#{idx});" class="slideImgs">
|
|
330
|
-
<img src="#{link}" />
|
|
331
|
-
</div>
|
|
332
|
-
}
|
|
333
|
-
idx += 1
|
|
334
|
-
end
|
|
335
|
-
sp += %Q{</div>}
|
|
43
|
+
|
|
44
|
+
def imageObject(url)
|
|
45
|
+
sp = %Q{
|
|
46
|
+
<object data="#{url}=w#{@maxWidth}"></object>
|
|
47
|
+
}
|
|
336
48
|
return sp
|
|
337
49
|
end
|
|
338
|
-
|
|
50
|
+
|
|
339
51
|
def render(context)
|
|
340
|
-
@
|
|
52
|
+
@imgLinks = []
|
|
53
|
+
if @albumUrls[/https?:\/\/[\S]+/]
|
|
54
|
+
albumUrls = [].push(@albumUrls)
|
|
55
|
+
else
|
|
56
|
+
albumUrls = context[@albumUrls.strip]
|
|
57
|
+
if not albumUrls.instance_of? Array
|
|
58
|
+
albumUrls = [].push(context[@albumUrls.strip])
|
|
59
|
+
end
|
|
60
|
+
end
|
|
61
|
+
for albumUrl in albumUrls
|
|
62
|
+
imageLinks = getImageLinks(albumUrl)
|
|
63
|
+
for link in imageLinks
|
|
64
|
+
@imgLinks.push(link)
|
|
65
|
+
end
|
|
66
|
+
end
|
|
67
|
+
if @albumSettings != "none"
|
|
68
|
+
albumSettings = context[@albumSettings.strip]
|
|
69
|
+
end
|
|
70
|
+
createDOM(albumSettings)
|
|
341
71
|
end
|
|
342
72
|
end
|
|
343
73
|
end
|
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.4.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Chirag Arora
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date:
|
|
11
|
+
date: 2020-06-21 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -103,6 +103,7 @@ files:
|
|
|
103
103
|
- index.md
|
|
104
104
|
- jekyll-google-photos.gemspec
|
|
105
105
|
- lib/jekyll-google-photos.rb
|
|
106
|
+
- lib/jekyll-google-photos/css.rb
|
|
106
107
|
- lib/jekyll-google-photos/tag.rb
|
|
107
108
|
- lib/jekyll-google-photos/version.rb
|
|
108
109
|
homepage: https://github.com/heychirag/jekyll-google-photos
|