jekyll-google-photos 1.1.0 → 1.4.2
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/LICENSE +1 -1
- data/README.md +143 -2
- 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 +59 -270
- 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: 3fe68c97c44ab51081e25a9601f378cfeccbf261
|
|
4
|
+
data.tar.gz: b0f516a1e5cec8261eb3f28d022816fb2b129179
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 20567c39f741858f611a579bdd9ab05e27e229929e82ec54adac8d88b533d17312684b7233e44e834f46fe2e4fb3dcf8c16b11e6362c850c86c323b1bbd32563
|
|
7
|
+
data.tar.gz: 69b9a35bd59ea14e6941597e72225dd81ceb0aeebe62511f6f462a137691bf2d2b9b46c782781c9e29c56a4d3efd405fff88ae0d31b8d55ad3dec041410a7b82
|
data/Gemfile.lock
CHANGED
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,9 +1,12 @@
|
|
|
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
|
|
|
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
|
+
|
|
7
10
|
# Installing
|
|
8
11
|
|
|
9
12
|
Install the gem using:
|
|
@@ -26,12 +29,150 @@ plugins:
|
|
|
26
29
|
```
|
|
27
30
|
{% google_photos <link_to_album> <max_width> %}
|
|
28
31
|
```
|
|
29
|
-
`max_width
|
|
32
|
+
`max_width` (pixels): Max width of the image loaded from Google servers for the gallery. Larger widths may increase page load time.
|
|
30
33
|
|
|
31
34
|
Example:
|
|
32
35
|
```
|
|
33
36
|
{% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
|
|
34
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
|
+
```
|
|
46
|
+
#### Note
|
|
47
|
+
You can use `0` to get original quality image.
|
|
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
|
+
|
|
65
|
+
# Want to Display images your way?
|
|
66
|
+
|
|
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.
|
|
68
|
+
```
|
|
69
|
+
{% google_photos <link_to_album> none %}
|
|
70
|
+
```
|
|
71
|
+
The image URLs are present in the following array inside the `googlePhotos` object.
|
|
72
|
+
```
|
|
73
|
+
googlePhotos.urls = ["img1","img2",...];
|
|
74
|
+
```
|
|
75
|
+
#### Note
|
|
76
|
+
Image urls will always be available at `googlePhotos.urls` irrespective of what is passed in `max_width`.
|
|
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
|
+
|
|
106
|
+
### Hacking the Image URLs
|
|
107
|
+
|
|
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:
|
|
109
|
+
|
|
110
|
+
<table>
|
|
111
|
+
<tr>
|
|
112
|
+
<th>
|
|
113
|
+
Parameter
|
|
114
|
+
</th>
|
|
115
|
+
<th>
|
|
116
|
+
Description
|
|
117
|
+
</th>
|
|
118
|
+
</tr>
|
|
119
|
+
<tr>
|
|
120
|
+
<td>
|
|
121
|
+
w, h
|
|
122
|
+
</td>
|
|
123
|
+
<td>
|
|
124
|
+
The width, <b>w</b> and height, <b>h</b> parameters.
|
|
125
|
+
|
|
126
|
+
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.
|
|
127
|
+
|
|
128
|
+
<b>Example:</b>
|
|
129
|
+
|
|
130
|
+
<b><i>BASE_URL</i></b>=w<i><b>MAX_WIDTH</b></i>-h<i><b>MAX_HEIGHT</b></i>
|
|
131
|
+
|
|
132
|
+
Here is an example to display a media item no wider than 2048 px and no taller than 1024 px:
|
|
133
|
+
|
|
134
|
+
https://lh3.googleusercontent.com/p/AF....VnnY<b>=w2048-h1024</b>
|
|
135
|
+
</td>
|
|
136
|
+
</tr>
|
|
137
|
+
<tr>
|
|
138
|
+
<td>
|
|
139
|
+
c
|
|
140
|
+
</td>
|
|
141
|
+
<td>
|
|
142
|
+
The crop, <b>c</b> parameter.
|
|
143
|
+
|
|
144
|
+
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.
|
|
145
|
+
|
|
146
|
+
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).
|
|
147
|
+
|
|
148
|
+
<b>Example:</b>
|
|
149
|
+
|
|
150
|
+
<b><i>BASE_URL</i></b>=w<i><b>MAX_WIDTH</b></i>-h<i><b>MAX_HEIGHT</b></i>-c
|
|
151
|
+
|
|
152
|
+
In this example, the application displays a media item that is exactly 256 px wide by 256 px high, such as a thumbnail:
|
|
153
|
+
|
|
154
|
+
https://lh3.googleusercontent.com/p/AF....VnnY<b>=w256-h256-c</b>
|
|
155
|
+
</td>
|
|
156
|
+
</tr>
|
|
157
|
+
</table>
|
|
158
|
+
|
|
159
|
+
#### Note
|
|
160
|
+
You can use `=w0-h0` for unaltered image quality.
|
|
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.
|
|
35
176
|
|
|
36
177
|
# Features to implement
|
|
37
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
|
|
@@ -2,308 +2,97 @@ require "jekyll"
|
|
|
2
2
|
require 'open-uri'
|
|
3
3
|
require 'nokogiri'
|
|
4
4
|
require 'net/http'
|
|
5
|
+
require_relative 'css'
|
|
6
|
+
require_relative 'js'
|
|
5
7
|
|
|
6
8
|
module JekyllGooglePhotos
|
|
7
9
|
class Tag < Liquid::Tag
|
|
8
10
|
def initialize(tagName, args, tokens)
|
|
9
11
|
super
|
|
10
12
|
args = args.split(" ")
|
|
11
|
-
|
|
12
|
-
@
|
|
13
|
-
@imgLinks = getImageLinks(url)
|
|
14
|
-
@dom = createDOM()
|
|
13
|
+
@albumUrls = args[0]
|
|
14
|
+
@albumSettings = args[1]
|
|
15
15
|
end
|
|
16
16
|
|
|
17
17
|
def getImageLinks(url)
|
|
18
18
|
doc = Nokogiri::HTML(open(url.strip).read)
|
|
19
19
|
scripts = doc.xpath("//script")
|
|
20
|
+
jsonString = ""
|
|
20
21
|
for x in scripts do
|
|
21
22
|
if x.inner_html.match(/initDataCallback\(/)
|
|
22
23
|
jsonString = x.inner_html
|
|
23
|
-
jsonString = jsonString.
|
|
24
|
-
jsonString["\n}});"] = ""
|
|
24
|
+
jsonString = jsonString.scan(/\[\"(http.*googleusercontent.com\/[^((?!\/a\/).)*$].*)\"/)
|
|
25
25
|
end
|
|
26
26
|
end
|
|
27
|
-
|
|
28
|
-
return json[1]
|
|
27
|
+
return jsonString
|
|
29
28
|
end
|
|
30
29
|
|
|
31
30
|
def flexbinCSS()
|
|
32
|
-
elem =
|
|
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
|
-
}
|
|
31
|
+
elem = JekyllGooglePhotos::FlexbinCSS()
|
|
280
32
|
return elem
|
|
281
33
|
end
|
|
282
34
|
|
|
283
|
-
def
|
|
284
|
-
sp =
|
|
285
|
-
|
|
286
|
-
sp +=
|
|
287
|
-
sp +=
|
|
35
|
+
def URLsInJSON()
|
|
36
|
+
sp = 'googlePhotos.urls = ["'
|
|
37
|
+
newImgLinks = @imgLinks.uniq.join('", "')
|
|
38
|
+
sp += "#{newImgLinks}"
|
|
39
|
+
sp += '"];'
|
|
288
40
|
return sp
|
|
289
41
|
end
|
|
290
42
|
|
|
291
|
-
def
|
|
292
|
-
sp =
|
|
43
|
+
def createDOM(albumSettings)
|
|
44
|
+
sp = "<script>"
|
|
45
|
+
sp += "googlePhotos = {};"
|
|
46
|
+
sp += URLsInJSON()
|
|
47
|
+
sp += "</script>"
|
|
48
|
+
#puts albumSettings
|
|
49
|
+
##if(albumSettings != "none")
|
|
50
|
+
##sp += JekyllGooglePhotos::PublicalbumJS()
|
|
51
|
+
##sp += addImages(albumSettings)
|
|
52
|
+
##end
|
|
53
|
+
return sp
|
|
54
|
+
end
|
|
55
|
+
|
|
56
|
+
def imageObject(url)
|
|
57
|
+
sp = %Q{
|
|
58
|
+
<object data="#{url}=w#{@maxWidth}"></object>
|
|
59
|
+
}
|
|
60
|
+
return sp
|
|
61
|
+
end
|
|
62
|
+
|
|
63
|
+
def addImages(albumSettings)
|
|
64
|
+
sp = %Q{<div class="pa-gallery-player-widget" style="width:#{albumSettings["frame_width"]}; height:#{albumSettings["frame_height"]}; display:none;"
|
|
65
|
+
data-title="#{albumSettings["title"]}"
|
|
66
|
+
data-delay="#{albumSettings["delay"]}">
|
|
67
|
+
}
|
|
293
68
|
for x in @imgLinks
|
|
294
|
-
|
|
295
|
-
sp += %Q{
|
|
296
|
-
<a href="#{x[1][0] + "=w0"}">
|
|
297
|
-
<img src="#{link}" />
|
|
298
|
-
</a>
|
|
299
|
-
}
|
|
69
|
+
sp += %Q{<object data="#{x}=w#{albumSettings["image_width"]}-h#{albumSettings["image_height"]}"></object>}
|
|
300
70
|
end
|
|
301
71
|
sp += %Q{</div>}
|
|
302
72
|
return sp
|
|
303
73
|
end
|
|
304
74
|
|
|
305
75
|
def render(context)
|
|
306
|
-
@
|
|
76
|
+
@imgLinks = []
|
|
77
|
+
if @albumUrls[/https?:\/\/[\S]+/]
|
|
78
|
+
albumUrls = [].push(@albumUrls)
|
|
79
|
+
else
|
|
80
|
+
albumUrls = context[@albumUrls.strip]
|
|
81
|
+
if not albumUrls.instance_of? Array
|
|
82
|
+
albumUrls = [].push(context[@albumUrls.strip])
|
|
83
|
+
end
|
|
84
|
+
end
|
|
85
|
+
for albumUrl in albumUrls
|
|
86
|
+
imageLinks = getImageLinks(albumUrl)
|
|
87
|
+
#puts imageLinks[0]
|
|
88
|
+
for link in imageLinks
|
|
89
|
+
@imgLinks.push(link)
|
|
90
|
+
end
|
|
91
|
+
end
|
|
92
|
+
if @albumSettings != "none"
|
|
93
|
+
albumSettings = context[@albumSettings.strip]
|
|
94
|
+
end
|
|
95
|
+
createDOM(albumSettings)
|
|
307
96
|
end
|
|
308
97
|
end
|
|
309
98
|
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.2
|
|
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
|