jekyll-google-photos 1.2.0 → 1.4.3
Sign up to get free protection for your applications and to get access to all the features.
- 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
|