jekyll-google-photos 1.4.0 → 1.4.1
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 +49 -3
- data/_posts/2018-02-22-welcome-to-jekyll.markdown +21 -1
- data/lib/jekyll-google-photos/css.rb +270 -0
- 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: 4adcab6389d74279f43e50c63312cce573f7d6d2
|
|
4
|
+
data.tar.gz: aa245f98c010fcf3d786006fcf2bdb010513f79c
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8ebedcde5633762d541ef07015a89cabd5b05f345aa5fc58b5c2586494e611fe72ea8829cbceda1724ac5a2fcd952d0a1f099f1ae77dc600a4622966e8348c9c
|
|
7
|
+
data.tar.gz: d34415433391bdb72760ad448bf5f015bcdd3256b6d78de00993f0b1ad81c86560475efdd2ddf38a5a9d6c35572e037f09269c99c38bc786363f0413e1dfc5a1
|
data/README.md
CHANGED
|
@@ -34,14 +34,32 @@ Example:
|
|
|
34
34
|
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
|
|
35
35
|
```
|
|
36
36
|
or using variables/front matter
|
|
37
|
-
|
|
38
|
-
```
|
|
39
|
-
{% google_photos post.gallery_url 800 %}
|
|
40
37
|
```
|
|
38
|
+
---
|
|
39
|
+
gallery_url: https://photos.app.goo.gl/bhWukds8QVodFU24
|
|
40
|
+
---
|
|
41
41
|
|
|
42
|
+
{% google_photos page.gallery_url 800 %}
|
|
43
|
+
```
|
|
42
44
|
#### Note
|
|
43
45
|
You can use `0` to get original quality image.
|
|
44
46
|
|
|
47
|
+
### Adding Multiple Albums
|
|
48
|
+
|
|
49
|
+
Create a custom variable in the front matter of the page that would contain URL to albums you'd like to use:
|
|
50
|
+
```
|
|
51
|
+
---
|
|
52
|
+
album_urls:
|
|
53
|
+
- <URL 1>
|
|
54
|
+
- <URL 2>
|
|
55
|
+
- <URL N>
|
|
56
|
+
---
|
|
57
|
+
```
|
|
58
|
+
Then use the `google_photos` tag using the same principle but this time passing the new variable:
|
|
59
|
+
```
|
|
60
|
+
{% google_photos page.album_urls 800 %}
|
|
61
|
+
```
|
|
62
|
+
|
|
45
63
|
# Want to Display images your way?
|
|
46
64
|
|
|
47
65
|
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.
|
|
@@ -55,6 +73,34 @@ googlePhotos.urls = ["img1","img2",...];
|
|
|
55
73
|
#### Note
|
|
56
74
|
Image urls will always be available at `googlePhotos.urls` irrespective of what is passed in `max_width`.
|
|
57
75
|
|
|
76
|
+
### Example integrating a third party gallery plugin
|
|
77
|
+
|
|
78
|
+
This is the answer to issue [#5](https://github.com/heychirag/jekyll-google-photos/issues/5)
|
|
79
|
+
|
|
80
|
+
```
|
|
81
|
+
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 none %}
|
|
82
|
+
|
|
83
|
+
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
|
|
84
|
+
|
|
85
|
+
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
|
|
86
|
+
data-link="<Album link>"
|
|
87
|
+
data-title="<Album Name>"
|
|
88
|
+
data-description="<Album Description>"
|
|
89
|
+
data-delay="5"
|
|
90
|
+
id="MyAlbum1">
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<script>
|
|
94
|
+
let MyAlbum1 = document.getElementById('MyAlbum1');
|
|
95
|
+
let imageWidth = '0';
|
|
96
|
+
for(var i in googlePhotos.urls) {
|
|
97
|
+
let picture = document.createElement('object');
|
|
98
|
+
picture.setAttribute("data", googlePhotos.urls[i] + '=w' + imageWidth);
|
|
99
|
+
MyAlbum1.appendChild(picture);
|
|
100
|
+
}
|
|
101
|
+
</script>
|
|
102
|
+
```
|
|
103
|
+
|
|
58
104
|
### Hacking the Image URLs
|
|
59
105
|
|
|
60
106
|
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:
|
|
@@ -8,7 +8,27 @@ gallery_urls:
|
|
|
8
8
|
- https://photos.app.goo.gl/bhWukds8QVodFU246
|
|
9
9
|
---
|
|
10
10
|
|
|
11
|
-
{% google_photos
|
|
11
|
+
{% google_photos page.gallery_urls none %}
|
|
12
|
+
|
|
13
|
+
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
|
|
14
|
+
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
|
|
15
|
+
data-link="<Album link>"
|
|
16
|
+
data-title="<Album Name>"
|
|
17
|
+
data-description="<Album Description>"
|
|
18
|
+
data-delay="5"
|
|
19
|
+
id="MyAlbum1">
|
|
20
|
+
</div>
|
|
21
|
+
<script>
|
|
22
|
+
let MyAlbum1 = document.getElementById('MyAlbum1');
|
|
23
|
+
let imageWidth = '0';
|
|
24
|
+
for(var i in googlePhotos.urls) {
|
|
25
|
+
console.log(googlePhotos.urls[i]);
|
|
26
|
+
console.log(MyAlbum1);
|
|
27
|
+
let picture = document.createElement('object');
|
|
28
|
+
picture.setAttribute("data", googlePhotos.urls[i] + '=w' + imageWidth);
|
|
29
|
+
MyAlbum1.appendChild(picture);
|
|
30
|
+
}
|
|
31
|
+
</script>
|
|
12
32
|
|
|
13
33
|
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.
|
|
14
34
|
|
|
@@ -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
|
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.
|
|
4
|
+
version: 1.4.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Chirag Arora
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2020-03-
|
|
11
|
+
date: 2020-03-16 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
|