jekyll-google-photos 1.0.3 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 49ce43490b36c2955809e4a4f25ee73b088a97eb
4
- data.tar.gz: 10422bba8e78feb821846212e655a28724de960a
3
+ metadata.gz: 5b2bbd1230935d3f172d54c5b0c8eb2e197c3cc0
4
+ data.tar.gz: e9074e81e1be5e790b23b1ca3d255386e5e17ec5
5
5
  SHA512:
6
- metadata.gz: 6b317256607e20587c2aa497085c2a112e09d985c06dc7f74daae1a8c1c34db4d91ab5c763e1fef97aefee4566a25b6c8784b81743d97f54fca06a43a810684d
7
- data.tar.gz: 9e4973460a3c40a8175beb7ade5a9119b1feee65226d7ab15ebecb1dfef0fcddac93c6b4b21ef77c7a309e014b6d102a31c49703e2109253ab7a7fc0169b3aaa
6
+ metadata.gz: 54cb9301afd3a136f319729cb528dae22cebbcc11922953369e59e24508b66ee844e86f5b119f933416dfd64c02a813a720b6065298627e79b14a8031c0adf51
7
+ data.tar.gz: 50452132671bf73109d23a783384e4da7ccafa243281fbd6234ceedbb26d19b8ee93cb7efdfacbc54c3485c83af3f2c73816849941710a57cb3eea5edfe2f9fa
data/README.md CHANGED
@@ -6,12 +6,12 @@
6
6
 
7
7
  # Installing
8
8
 
9
- add the following to your plugins in `_config.yml`:
9
+ Install the gem using:
10
10
  ```
11
- - jekyll-google-photos
11
+ gem install jekyll-google-photos
12
12
  ```
13
13
 
14
- Install the gem using bundle or use the regular gem installation method
14
+ Or use the following if you are using bundler
15
15
  ```
16
16
  bundle add jekyll-google-photos
17
17
  ```
@@ -24,18 +24,13 @@ plugins:
24
24
 
25
25
  # Usage:
26
26
  ```
27
- {% google_photos <link_to_album> row_height row_height_tablet row_height_phone tablet_max phone_max margin %}
27
+ {% google_photos <link_to_album> <max_width> %}
28
28
  ```
29
- `row_height`: Row height on the biggest screen (in pixels)
30
- `row_height_tablet`: Row height on tablets (in pixels)
31
- `row_height_phone`: Row height on phones (in pixels)
32
- `tablet_max`: Width below which `row_height_tablet` will be used (in pixels)
33
- `phone_max`: Width below which `row_height_phone` will be used (in pixels)
34
- `margin`: space or margin between rows and adjacent photos
29
+ `max_width`: Max width of the image loaded from Google servers for the gallery. Larger widths may increase page load time.
35
30
 
36
31
  Example:
37
32
  ```
38
- {% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 300 150 100 1280 400 5 %}
33
+ {% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
39
34
  ```
40
35
 
41
36
  # Features to implement
@@ -5,7 +5,7 @@ date: 2018-02-22 18:29:32 +0000
5
5
  categories: jekyll update
6
6
  ---
7
7
 
8
- {% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 300 150 100 1280 400 5 %}
8
+ {% google_photos https://photos.app.goo.gl/bhWukds8QVodFU246 800 %}
9
9
 
10
10
  You’ll find this post in your `_posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `jekyll serve`, which launches a web server and auto-regenerates your site when a file is updated.
11
11
 
data/grid.sass ADDED
@@ -0,0 +1,115 @@
1
+ // Default variables that can be overrided
2
+ $flexbin-row-height: 300px !default;
3
+ $flexbin-space: 5px !default;
4
+
5
+ $flexbin-phone-max: 300px !default;
6
+ $flexbin-row-height-phone: 75px !default;
7
+ $flexbin-space-phone: $flexbin-space !default;
8
+
9
+ $a-max: 450px !default;
10
+ $a-height: 112px !default;
11
+
12
+ $b-max: 600px !default;
13
+ $b-height: 150px !default;
14
+
15
+ $c-max: 750px !default;
16
+ $c-height: 175px !default;
17
+
18
+ $d-max: 900px !default;
19
+ $d-height: 175px !default;
20
+
21
+ $e-max: 1050px !default;
22
+ $e-height: 175px !default;
23
+
24
+ $f-max: 1200px !default;
25
+ $f-height: 180px !default;
26
+
27
+ $g-max: 1350px !default;
28
+ $g-height: 185px !default;
29
+
30
+ $h-max: 1500px !default;
31
+ $h-height: 200px !default;
32
+
33
+ $i-max: 1650px !default;
34
+ $i-height: 210px !default;
35
+
36
+ $j-max: 1800px !default;
37
+ $j-height: 225px !default;
38
+
39
+ $k-max: 1950px !default;
40
+ $k-height: 240px !default;
41
+
42
+ $l-max: 2100px !default;
43
+ $l-height: 250px !default;
44
+
45
+ // Minxin for customize multiple Flexbin layout
46
+ // For example, 300px height for desktop devices, 150px height for mobile devices
47
+ @mixin flexbin($row-height, $space) {
48
+ display: flex;
49
+ overflow: hidden;
50
+ flex-wrap: wrap;
51
+ margin: - $space / 2;
52
+
53
+ // Let final row align left fit if images are not enough to fill
54
+ // If the gap is very small, fill the final row
55
+ &:after {
56
+ content: '';
57
+ flex-grow: 999999999; // avoid final row zoom too much to fit width
58
+ min-width: $row-height; // avoid small gap in final row (< $row-height)
59
+ height: 0;
60
+ }
61
+
62
+ > * {
63
+ position: relative;
64
+ display: block;
65
+ height: $row-height;
66
+ margin: $space / 2;
67
+ flex-grow: 1;
68
+
69
+ > img {
70
+ height: $row-height;
71
+ object-fit: cover;
72
+ max-width: 100%;
73
+ min-width: 100%;
74
+ vertical-align: bottom;
75
+ }
76
+ }
77
+
78
+
79
+ // Add margin around flexbin gallery
80
+ // Visual margin is the same with space between rows
81
+ &.flexbin-margin {
82
+ margin: $space / 2;
83
+ }
84
+ }
85
+
86
+ // CSS class for basic usage
87
+ .flexbin {
88
+ // Desktop devices
89
+ @include flexbin($flexbin-row-height, $flexbin-space);
90
+
91
+ // Tablet devices
92
+
93
+ // Phone devices
94
+ @media (max-width: $flexbin-phone-max) {
95
+ @include flexbin($flexbin-row-height-phone, $flexbin-space-phone);
96
+ }
97
+ @media (min-width: $flexbin-phone-max) and (max-width: $a-max) {
98
+ @include flexbin($a-height, $flexbin-space-phone);
99
+ }
100
+ @media (min-width: $a-max) and (max-width: $b-max) {
101
+ @include flexbin($b-height, $flexbin-space-phone);
102
+ }
103
+ @media (min-width: $b-max) and (max-width: $c-max) {
104
+ @include flexbin($c-height, $flexbin-space-phone);
105
+ }
106
+ @media (min-width: $c-max) and (max-width: $d-max) {
107
+ @include flexbin($d-height, $flexbin-space-phone);
108
+ }
109
+ @media (min-width: $d-max) and (max-width: $e-max) {
110
+ @include flexbin($e-height, $flexbin-space-phone);
111
+ }
112
+ @media (min-width: $e-max) {
113
+ @include flexbin($f-height, $flexbin-space-phone);
114
+ }
115
+ }
@@ -9,14 +9,7 @@ module JekyllGooglePhotos
9
9
  super
10
10
  args = args.split(" ")
11
11
  url = args[0]
12
- @row_height = args[1].to_i
13
- @space = args[6].to_i
14
- @tablet_max = args[4].to_i
15
- @row_height_tablet = args[2].to_i
16
- @space_tablet = @space
17
- @phone_max = args[5].to_i
18
- @row_height_phone = args[3].to_i
19
- @space_phone = @space
12
+ @maxWidth = args[1]
20
13
  @imgLinks = getImageLinks(url)
21
14
  @dom = createDOM()
22
15
  end
@@ -37,98 +30,252 @@ module JekyllGooglePhotos
37
30
 
38
31
  def flexbinCSS()
39
32
  elem = %Q{
40
- .flexbin {
41
- display: flex;
42
- overflow: hidden;
43
- flex-wrap: wrap;
44
- margin: -#{@space/2.0}px;
45
- }
46
- .flexbin:after {
47
- content: '';
48
- flex-grow: 999999999;
49
- min-width: #{@row_height}px;
50
- height: 0;
51
- }
52
- .flexbin > * {
53
- position: relative;
54
- display: block;
55
- height: #{@row_height}px;
56
- margin: #{@space/2.0}px;
57
- flex-grow: 1;
58
- }
59
- .flexbin > * > img {
60
- height: #{@row_height}px;
61
- object-fit: cover;
62
- max-width: 100%;
63
- min-width: 100%;
64
- vertical-align: bottom;
65
- }
66
- .flexbin.flexbin-margin {
67
- margin: #{@space/2.0}px;
68
- }
69
- @media (max-width: #{@tablet_max}px) {
70
- .flexbin {
71
- display: flex;
72
- overflow: hidden;
73
- flex-wrap: wrap;
74
- margin: -#{@space/2.0}px;
75
- }
76
- .flexbin:after {
77
- content: '';
78
- flex-grow: 999999999;
79
- min-width: #{@row_height_tablet}px;
80
- height: 0;
81
- }
82
- .flexbin > * {
83
- position: relative;
84
- display: block;
85
- height: #{@row_height_tablet}px;
86
- margin: #{@space/2.0}px;
87
- flex-grow: 1;
88
- }
89
- .flexbin > * > img {
90
- height: #{@row_height_tablet}px;
91
- object-fit: cover;
92
- max-width: 100%;
93
- min-width: 100%;
94
- vertical-align: bottom;
95
- }
96
- .flexbin.flexbin-margin {
97
- margin: #{@space/2.0}px;
98
- }
99
- }
100
- @media (max-width: #{@phone_max}px) {
101
- .flexbin {
102
- display: flex;
103
- overflow: hidden;
104
- flex-wrap: wrap;
105
- margin: -#{@space/2.0}px;
106
- }
107
- .flexbin:after {
108
- content: '';
109
- flex-grow: 999999999;
110
- min-width: #{@row_height_phone}px;
111
- height: 0;
112
- }
113
- .flexbin > * {
114
- position: relative;
115
- display: block;
116
- height: #{@row_height_phone}px;
117
- margin: #{@space/2.0}px;
118
- flex-grow: 1;
119
- }
120
- .flexbin > * > img {
121
- height: #{@row_height_phone}px;
122
- object-fit: cover;
123
- max-width: 100%;
124
- min-width: 100%;
125
- vertical-align: bottom;
126
- }
127
- .flexbin.flexbin-margin {
128
- margin: #{@space/2.0}px;
129
- }
130
- }
131
-
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
+ }
132
279
  }
133
280
  return elem
134
281
  end
@@ -144,9 +291,9 @@ module JekyllGooglePhotos
144
291
  def addImages()
145
292
  sp = %Q{<div class="flexbin">}
146
293
  for x in @imgLinks
147
- link = x[1][0] + %Q{=w#{@tablet_max}}
294
+ link = x[1][0] + "=w#{@maxWidth}"
148
295
  sp += %Q{
149
- <a href="#{x[1][0]}">
296
+ <a href="#{x[1][0] + "=w0"}">
150
297
  <img src="#{link}" />
151
298
  </a>
152
299
  }
@@ -1,3 +1,3 @@
1
1
  module JekyllGooglePhotos
2
- VERSION = "1.0.3".freeze
2
+ VERSION = "1.1.0".freeze
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: jekyll-google-photos
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.0.3
4
+ version: 1.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Chirag Arora
@@ -99,6 +99,7 @@ files:
99
99
  - _plugins/jekyll-google-photos.rb
100
100
  - _posts/2018-02-22-welcome-to-jekyll.markdown
101
101
  - about.md
102
+ - grid.sass
102
103
  - index.md
103
104
  - jekyll-google-photos.gemspec
104
105
  - lib/jekyll-google-photos.rb