jekyll-google-photos 1.0.3 → 1.1.0

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 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