j1-template 2021.1.12 → 2021.1.13

Sign up to get free protection for your applications and to get access to all the features.
Files changed (89) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/themes/j1/layouts/content_generator_app.html +1 -1
  3. data/_includes/themes/j1/layouts/content_generator_blog_archive.html +1 -1
  4. data/_includes/themes/j1/layouts/content_generator_collection.html +1 -1
  5. data/_includes/themes/j1/layouts/content_generator_page.html +4 -1
  6. data/_includes/themes/j1/layouts/content_generator_post.html +1 -1
  7. data/_includes/themes/j1/layouts/content_generator_raw.html +1 -1
  8. data/_includes/themes/j1/layouts/layout_metadata_generator.html +55 -0
  9. data/_includes/themes/j1/modules/connectors/comment/commento.html +31 -0
  10. data/_includes/themes/j1/modules/connectors/comment/custom-provider.html +7 -8
  11. data/_includes/themes/j1/modules/connectors/comment/disqus.html +12 -54
  12. data/_includes/themes/j1/modules/connectors/comment/facebook.html +7 -8
  13. data/_includes/themes/j1/modules/connectors/comment/hyvor.html +33 -0
  14. data/_includes/themes/j1/modules/connectors/comment/just-comments.html +31 -0
  15. data/_includes/themes/j1/modules/connectors/comments +3 -0
  16. data/_layouts/default.html +51 -0
  17. data/assets/data/disqus.js +81 -0
  18. data/assets/data/hyvor.js +72 -0
  19. data/assets/error_pages/HTTP204.html +2 -1
  20. data/assets/error_pages/HTTP400.html +2 -1
  21. data/assets/error_pages/HTTP401.html +2 -1
  22. data/assets/error_pages/HTTP403.html +2 -1
  23. data/assets/error_pages/HTTP404.html +2 -1
  24. data/assets/error_pages/HTTP444.html +93 -0
  25. data/assets/error_pages/HTTP500.html +2 -1
  26. data/assets/error_pages/HTTP501.html +2 -1
  27. data/assets/error_pages/HTTP502.html +2 -1
  28. data/assets/error_pages/HTTP503.html +2 -1
  29. data/assets/themes/j1/adapter/js/algolia.js +10 -10
  30. data/assets/themes/j1/adapter/js/asciidoctor.js +6 -6
  31. data/assets/themes/j1/adapter/js/attic.js +17 -17
  32. data/assets/themes/j1/adapter/js/bmd.js +6 -6
  33. data/assets/themes/j1/adapter/js/carousel.js +10 -10
  34. data/assets/themes/j1/adapter/js/clipboard.js +10 -10
  35. data/assets/themes/j1/adapter/js/cookieConsent.js +46 -20
  36. data/assets/themes/j1/adapter/js/fam.js +34 -34
  37. data/assets/themes/j1/adapter/js/framer.js +6 -6
  38. data/assets/themes/j1/adapter/js/j1.js +322 -209
  39. data/assets/themes/j1/adapter/js/justifiedGallery.js +11 -11
  40. data/assets/themes/j1/adapter/js/justifiedGalleryCustomizer.js +19 -19
  41. data/assets/themes/j1/adapter/js/lightbox.js +6 -6
  42. data/assets/themes/j1/adapter/js/logger.js +7 -7
  43. data/assets/themes/j1/adapter/js/mmenu.js +25 -25
  44. data/assets/themes/j1/adapter/js/navigator.js +48 -48
  45. data/assets/themes/j1/adapter/js/quicksearch.js +6 -6
  46. data/assets/themes/j1/adapter/js/rouge.js +7 -7
  47. data/assets/themes/j1/adapter/js/rtable.js +6 -6
  48. data/assets/themes/j1/adapter/js/themer.js +24 -20
  49. data/assets/themes/j1/adapter/js/toccer.js +9 -9
  50. data/assets/themes/j1/modules/backstretch/js/backstretch.js +3 -3
  51. data/assets/themes/j1/modules/cookieConsent/js/cookieConsent.js +27 -20
  52. data/assets/themes/j1/modules/cookieConsent/js/cookieConsent.min.js +287 -1
  53. data/assets/themes/j1/modules/lunrSearch/js/quicksearch.js +1 -1
  54. data/assets/themes/j1/modules/themeSwitcher/js/switcher.js +19 -19
  55. data/lib/j1/version.rb +1 -1
  56. data/lib/starter_web/Gemfile +1 -1
  57. data/lib/starter_web/_config.yml +42 -24
  58. data/lib/starter_web/_data/j1_config.yml +22 -11
  59. data/lib/starter_web/_includes/attributes.asciidoc +1 -1
  60. data/lib/starter_web/_plugins/lunr_index.rb +1 -1
  61. data/lib/starter_web/index.html +3 -3
  62. data/lib/starter_web/package.json +1 -1
  63. data/lib/starter_web/pages/public/asciidoc_skeletons/book/book.adoc +3 -0
  64. data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/multi.adoc +3 -0
  65. data/lib/starter_web/pages/public/asciidoc_skeletons/simple-document/simple.adoc +3 -0
  66. data/lib/starter_web/pages/public/blog/navigator/archive.html +4 -0
  67. data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +4 -0
  68. data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +4 -0
  69. data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +5 -1
  70. data/lib/starter_web/pages/public/blog/navigator/index.html +4 -0
  71. data/lib/starter_web/pages/public/cookieConsent.adoc +3 -0
  72. data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +0 -1
  73. data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +2 -1
  74. data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +0 -2
  75. data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +0 -2
  76. data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +0 -1
  77. data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +0 -1
  78. data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +0 -1
  79. data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +0 -1
  80. data/lib/starter_web/pages/public/learn/roundtrip/600_quicksearch.adoc +0 -1
  81. data/lib/starter_web/pages/public/learn/where_to_go.adoc +0 -1
  82. data/lib/starter_web/pages/public/legal/en/100_copyright.adoc +3 -1
  83. data/lib/starter_web/pages/public/legal/en/200_impress.adoc +3 -1
  84. data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +78 -17
  85. data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc +3 -1
  86. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  87. data/lib/starter_web/utilsrv/package.json +1 -1
  88. metadata +8 -3
  89. data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.org.asciidoc +0 -244
@@ -15,6 +15,10 @@ pagination:
15
15
  enabled: false
16
16
  permalink: /page:num/
17
17
 
18
+ analytics: true
19
+ advertising: false
20
+ comments: false
21
+
18
22
  regenerate: true
19
23
 
20
24
  resources: []
@@ -15,6 +15,10 @@ pagination:
15
15
  enabled: false
16
16
  permalink: /page:num/
17
17
 
18
+ analytics: true
19
+ advertising: false
20
+ comments: false
21
+
18
22
  regenerate: false
19
23
 
20
24
  resource_options:
@@ -170,7 +174,7 @@ resource_options:
170
174
  </a>
171
175
  </div>
172
176
  </div -->
173
-
177
+
174
178
  <!-- place post -->
175
179
  <article class="card raised-z3 mb-5">
176
180
  <h3 id="{{100000|rand}}" class="card-header bg-primary">{{post.title}}</h3>
@@ -15,6 +15,10 @@ sort: date
15
15
  toc: true
16
16
  fam_menu_id: open_toc
17
17
 
18
+ analytics: true
19
+ advertising: false
20
+ comments: false
21
+
18
22
  regenerate: true # needed to update pagination pages
19
23
 
20
24
  resources: []
@@ -12,6 +12,9 @@ tags: [ Cookie, Consent ]
12
12
  scrollbar: false
13
13
  fam_menu_id: default
14
14
 
15
+ advertising: false
16
+ comments: false
17
+
15
18
  permalink: /pages/public/cookieConsent/
16
19
  regenerate: true
17
20
 
@@ -10,7 +10,6 @@ description: >
10
10
  categories: [ Images, Module ]
11
11
  tags: [ Roundtrip, Introduction ]
12
12
 
13
- comments: false
14
13
  fam_menu_id: page_ctrl_simple
15
14
 
16
15
  permalink: /pages/public/learn/roundtrip/present_images/
@@ -15,7 +15,8 @@ tags: [ Roundtrip, Introduction ]
15
15
  permalink: /pages/public/learn/roundtrip/present_videos/
16
16
  regenerate: false
17
17
 
18
- comments: false
18
+ personalization: true
19
+
19
20
  fam_menu_id: page_ctrl_simple
20
21
 
21
22
  resources: [
@@ -11,8 +11,6 @@ description: >
11
11
  categories: [ Typography, Module ]
12
12
  tags: [ Roundtrip, Introduction ]
13
13
 
14
-
15
- comments: false
16
14
  fam_menu_id: page_ctrl_simple
17
15
 
18
16
  permalink: /pages/public/learn/roundtrip/typography/
@@ -13,8 +13,6 @@ description: >
13
13
  categories: [ Icon, Module ]
14
14
  tags: [ Roundtrip, Introduction ]
15
15
 
16
-
17
- comments: false
18
16
  fam_menu_id: page_ctrl_simple
19
17
 
20
18
  permalink: /pages/public/learn/roundtrip/mdi_icon_font/
@@ -12,7 +12,6 @@ description: >
12
12
  categories: [ Asciidoc, Extension ]
13
13
  tags: [ Roundtrip, Introduction ]
14
14
 
15
- comments: false
16
15
  fam_menu_id: page_ctrl_simple
17
16
 
18
17
  permalink: /pages/public/learn/roundtrip/asciidoc_extensions/
@@ -13,7 +13,6 @@ categories: [ Bootstrap, Modals ]
13
13
  tags: [ Roundtrip, Introduction ]
14
14
 
15
15
  flowtext: false
16
- comments: false
17
16
  fam_menu_id: page_ctrl_simple
18
17
 
19
18
  permalink: /pages/public/learn/roundtrip/modals/
@@ -11,7 +11,6 @@ categories: [ Bootstrap, Tables ]
11
11
  tags: [ Roundtrip, Introduction ]
12
12
 
13
13
  flowtext: false
14
- comments: false
15
14
  fam_menu_id: page_ctrl_simple
16
15
 
17
16
  permalink: /pages/public/learn/roundtrip/responsive_tables/
@@ -12,7 +12,6 @@ categories: [ Bootstrap, Themes ]
12
12
  tags: [ Roundtrip, Introduction ]
13
13
 
14
14
  scrollbar: false
15
- comments: false
16
15
  fam_menu_id: page_ctrl_simple
17
16
 
18
17
  permalink: /pages/public/learn/roundtrip/themes/
@@ -15,7 +15,6 @@ tags: [ Roundtrip, Introduction ]
15
15
 
16
16
  toc: true
17
17
  scrollbar: false
18
- comments: false
19
18
  fam_menu_id: page_ctrl_simple
20
19
 
21
20
  permalink: /pages/public/learn/roundtrip/quicksearch/
@@ -10,7 +10,6 @@ description: >
10
10
  categories: [ Info ]
11
11
  tags: [ Roundtrip, Introduction ]
12
12
 
13
- comments: false
14
13
  fam_menu_id: default
15
14
 
16
15
  permalink: /pages/public/learn/where_to_go/
@@ -15,9 +15,11 @@ robots:
15
15
 
16
16
  fam_menu_id: page_ctrl_simple
17
17
  scrollbar: false
18
- comments: false
19
18
  toc: true
20
19
 
20
+ advertising: false
21
+ comments: false
22
+
21
23
  permalink: /pages/public/legal/en/copyright/
22
24
  regenerate: false
23
25
 
@@ -15,9 +15,11 @@ robots:
15
15
 
16
16
  fam_menu_id: page_ctrl_simple
17
17
  scrollbar: false
18
- comments: false
19
18
  toc: false
20
19
 
20
+ advertising: false
21
+ comments: false
22
+
21
23
  permalink: /pages/public/legal/en/impress/
22
24
  regenerate: false
23
25
 
@@ -15,9 +15,11 @@ robots:
15
15
 
16
16
  fam_menu_id: page_ctrl_simple
17
17
  scrollbar: false
18
- comments: false
19
18
  toc: true
20
19
 
20
+ advertising: false
21
+ comments: false
22
+
21
23
  permalink: /pages/public/legal/en/privacy/
22
24
  regenerate: false
23
25
 
@@ -47,6 +49,8 @@ resource_options:
47
49
  :cookie-consent: true
48
50
  :logs-files: false
49
51
  :google-analytics: true
52
+ :hyvor: true
53
+ :disqus: false
50
54
  :facebook: false
51
55
  :twitter: false
52
56
  :instagram: false
@@ -91,7 +95,6 @@ information about what data is collected and how they may be passed on
91
95
  to partners can be found in the privacy dialog by clicking on the
92
96
  `Privacy Policy` button.
93
97
 
94
-
95
98
  Necessary::
96
99
  data is stored to run base services of this site. This website is based on
97
100
  static content, and no database is used behind it. All information (data)
@@ -211,8 +214,8 @@ endif::[]
211
214
  ifeval::[{facebook} == true]
212
215
  == Use of Facebook Plug-ins
213
216
 
214
- We have integrated plug-ins (Like-Button) by the social network *Facebook*,
215
- provided by:
217
+ Commenting on *Facebook* is available if you have *agreed* on
218
+ *personalization* with your privacy settings to use this site provided by:
216
219
 
217
220
  ----
218
221
  Facebook Inc.
@@ -222,8 +225,6 @@ provided by:
222
225
  USA
223
226
  ----
224
227
 
225
- into our website.
226
-
227
228
  When you visit our website, the plug-in will establish a direct connection
228
229
  between your browser and the Facebook server. Thereby Facebook will be informed
229
230
  about your visit on our website with your IP address. If you click the Facebook
@@ -243,8 +244,8 @@ endif::[]
243
244
  ifeval::[{twitter} == true]
244
245
  == Use of Twitter
245
246
 
246
- We have integrated functions by the service provider Twitter into our website.
247
- These functions are offered by:
247
+ Commenting on *Twitter* is available if you have *agreed* on
248
+ *personalization* with your privacy settings to use this site provided by:
248
249
 
249
250
  ----
250
251
  Twitter Inc.
@@ -256,15 +257,16 @@ These functions are offered by:
256
257
 
257
258
  When using Twitter and the "re-tweet" function, the websites you have visited
258
259
  will be linked to your Twitter account and made available to other users.
259
- Data will also be transmitted to Twitter.
260
-
261
- We would like to point out that as provider of the website we possess no
262
- knowledge of the contents of the data transmitted or its use by Twitter.
263
- You can find further information on this topic in the Twitter privacy
264
- policy at link:{url-twitter--privacy-en}[Privacy Police, {browser-window--new}].
265
- You can change your Twitter privacy
266
- settings in your account settings at
260
+ Data will also be transmitted to Twitter. We would like to point out that as
261
+ provider of the website we possess no knowledge of the contents of the data
262
+ transmitted or its use by Twitter.
263
+
264
+ Further information on the handling of user data can be found in the
265
+ link:{url-twitter--privacy-en}[Privacy Police, {browser-window--new}].
266
+
267
+ You can change your Twitter privacy settings in your account settings at
267
268
  link:{url-twitter--login}[Login, {browser-window--new}].
269
+
268
270
  endif::[]
269
271
 
270
272
  ifeval::[{instagram} == true]
@@ -290,13 +292,15 @@ deren Nutzung durch Instagram erhalten.
290
292
 
291
293
  Weitere Informationen hierzu finden Sie in der
292
294
  link:{url-instagram--privacy-policy}[Privacy Police Instagram, {browser-window--new}].
295
+
293
296
  endif::[]
294
297
 
295
298
  ifeval::[{youtube} == true]
296
299
  == Use of YouTube
297
300
 
298
301
  We have integrated functions by the service provider *YouTube* into our
299
- website on selected pages. These functions are offered by:
302
+ website on selected pages. *YouTube* is available if you have *agreed* on
303
+ *personalization* with your privacy settings to use this site provided by:
300
304
 
301
305
  ----
302
306
  YouTube LLC,
@@ -315,4 +319,61 @@ by logging out of your YouTube account.
315
319
 
316
320
  Further information on the handling of user data can be found in the
317
321
  link:{url-google--privacy-policy-en}[Privacy Police Google/YouTube, {browser-window--new}].
322
+
323
+ endif::[]
324
+
325
+
326
+ ifeval::[{disqus} == true]
327
+ == Use of Disqus
328
+
329
+ We have integrated the social network|commenting platform *Disqus* into our
330
+ website. Commenting on *Disqus* is available if you have *agreed* on
331
+ *personalization* with your privacy settings to use this site provided by:
332
+
333
+ ----
334
+ Disqus, Inc.
335
+ 301 Howard Street
336
+ Suite 300
337
+ CA 94105
338
+ USA
339
+ ----
340
+
341
+ When you visit our website, the plug-in will establish a direct connection
342
+ between your browser and the Disqus server. Thereby Disqus will be informed
343
+ about your visit on our website with your IP address and other data tracked
344
+ by cookies and similiar technologies. Your personal data is shared by partners
345
+ of the provider *Disqus* with third-party advertising platforms.
346
+
347
+ Further information on the handling of user data can be found in the
348
+ https://help.disqus.com/en/articles/1717103-disqus-privacy-policy[Privacy Policy, {browser-window--new}].
349
+
350
+ endif::[]
351
+
352
+ ifeval::[{hyvor} == true]
353
+ == Use of Hyvor Talk
354
+
355
+ We have integrated the social network|commenting platform *Hyvor Talk* into
356
+ our website. Commenting on *Hyvor Talk* is available if you have *agreed* on
357
+ *personalization* with your privacy settings to use this site provided by:
358
+
359
+ ----
360
+ No 130
361
+ Green Mount State
362
+ Madawa, Pilessa
363
+ Kurunegala
364
+ Sri Lanka
365
+ ----
366
+
367
+ Hyvor Talk is a *privacy-first*, no ads, no tracking platform to support a
368
+ visitors for comments on this website. When you visit our website, the
369
+ commenting platform will establish a direct connection between your browser
370
+ and the Hyvor servers, but does *not* sell any of your personal data to
371
+ third-parties or advertisers.
372
+
373
+ Further information on the handling of user data can be found in the
374
+ https://hyvor.com/privacy-policy[Privacy Policy, {browser-window--new}].
375
+
376
+ NOTE: Hyvor Talk does not place any tracking, advertising, affiliate, or any
377
+ third-party codes.
378
+
318
379
  endif::[]
@@ -17,9 +17,11 @@ robots:
17
17
 
18
18
  fam_menu_id: page_ctrl_simple
19
19
  scrollbar: false
20
- comments: false
21
20
  toc: true
22
21
 
22
+ advertising: false
23
+ comments: false
24
+
23
25
  permalink: /pages/public/legal/en/comment_policy/
24
26
  regenerate: true
25
27
 
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": true,
3
3
  "name": "utls",
4
- "version": "2021.1.12",
4
+ "version": "2021.1.13",
5
5
  "description": "J1 Template Utility Server",
6
6
  "homepage": "https://jekyll.one",
7
7
  "author": {
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "private": true,
3
3
  "name": "utls",
4
- "version": "2021.1.12",
4
+ "version": "2021.1.13",
5
5
  "description": "J1 Template Utility Server",
6
6
  "homepage": "https://jekyll.one",
7
7
  "author": {
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: j1-template
3
3
  version: !ruby/object:Gem::Version
4
- version: 2021.1.12
4
+ version: 2021.1.13
5
5
  platform: ruby
6
6
  authors:
7
7
  - juergen_jekyll_one
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2021-07-15 00:00:00.000000000 Z
11
+ date: 2021-07-20 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -275,9 +275,12 @@ files:
275
275
  - _includes/themes/j1/modules/connectors/analytic/custom-provider.html
276
276
  - _includes/themes/j1/modules/connectors/analytic/google-analytics.html
277
277
  - _includes/themes/j1/modules/connectors/analytics
278
+ - _includes/themes/j1/modules/connectors/comment/commento.html
278
279
  - _includes/themes/j1/modules/connectors/comment/custom-provider.html
279
280
  - _includes/themes/j1/modules/connectors/comment/disqus.html
280
281
  - _includes/themes/j1/modules/connectors/comment/facebook.html
282
+ - _includes/themes/j1/modules/connectors/comment/hyvor.html
283
+ - _includes/themes/j1/modules/connectors/comment/just-comments.html
281
284
  - _includes/themes/j1/modules/connectors/comments
282
285
  - _includes/themes/j1/modules/connectors/sharing
283
286
  - _includes/themes/j1/modules/connectors/translator
@@ -335,10 +338,12 @@ files:
335
338
  - assets/data/banner.html
336
339
  - assets/data/carousel.json
337
340
  - assets/data/cookieconsent.html
341
+ - assets/data/disqus.js
338
342
  - assets/data/fam.html
339
343
  - assets/data/footer.html
340
344
  - assets/data/galleries.json
341
345
  - assets/data/gallery_customizer.html
346
+ - assets/data/hyvor.js
342
347
  - assets/data/mdi_icons.json
343
348
  - assets/data/menu.html
344
349
  - assets/data/mmenu.html
@@ -353,6 +358,7 @@ files:
353
358
  - assets/error_pages/HTTP401.html
354
359
  - assets/error_pages/HTTP403.html
355
360
  - assets/error_pages/HTTP404.html
361
+ - assets/error_pages/HTTP444.html
356
362
  - assets/error_pages/HTTP500.html
357
363
  - assets/error_pages/HTTP501.html
358
364
  - assets/error_pages/HTTP502.html
@@ -1294,7 +1300,6 @@ files:
1294
1300
  - lib/starter_web/pages/public/blog/navigator/index.html
1295
1301
  - lib/starter_web/pages/public/cookieConsent.adoc
1296
1302
  - lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc
1297
- - lib/starter_web/pages/public/learn/roundtrip/100_present_images.org.asciidoc
1298
1303
  - lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc
1299
1304
  - lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc
1300
1305
  - lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc
@@ -1,244 +0,0 @@
1
- ---
2
- title: Roundtrip
3
- tagline: present images
4
- date: 2020-11-03 00:00:00 +100
5
- description: >
6
- Welcome to the preview page focussing on the image module. This page
7
- shows some valuable features of the J1 Template to manage your image-based
8
- content using lightboxes, carousels (slider), and galleries.
9
-
10
- categories: [ Images, Module ]
11
- tags: [ Roundtrip, Introduction ]
12
-
13
- comments: false
14
- fam_menu_id: page_ctrl_simple
15
-
16
- permalink: /pages/public/learn/roundtrip/present_images/
17
- regenerate: false
18
-
19
- resources: [
20
- clipboard, rouge, carousel, lightbox,
21
- justifiedGallery, lightGallery
22
- ]
23
- resource_options:
24
- - attic:
25
- padding_top: 400
26
- padding_bottom: 50
27
- opacity: 0.5
28
- slides:
29
- - url: /assets/images/pages/roundtrip/images-1920x1280-bw.jpg
30
- alt: Photo by Ricardo Gomez Angel on Unsplash
31
- badge:
32
- type: unsplash
33
- author: Ricardo Gomez Angel
34
- href: https://unsplash.com/@ripato/portfolio
35
- ---
36
-
37
- // Page Initializer
38
- // =============================================================================
39
- // Enable the Liquid Preprocessor
40
- :page-liquid:
41
-
42
- // Set (local) page attributes here
43
- // -----------------------------------------------------------------------------
44
- // :page--attr: <attr-value>
45
- :images-dir: {imagesdir}/pages/roundtrip/100_present_images
46
-
47
- // Load Liquid procedures
48
- // -----------------------------------------------------------------------------
49
- {% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}
50
-
51
- // Load page attributes
52
- // -----------------------------------------------------------------------------
53
- {% include {{load_attributes}} scope="all" %}
54
-
55
- // Page content
56
- // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
57
-
58
- // Include sub-documents
59
- // -----------------------------------------------------------------------------
60
-
61
- Welcome to the first preview page focussing on the image module. This page
62
- shows some valuable features of the J1 Template to manage your image-based
63
- content using lightboxes, carousels (slider), and galleries.
64
-
65
- The image module offers complex functionality based on powerful OpenSource
66
- libraries like JustifiedGallery for high-end, masonry-styled preview maps.
67
- J1 Template uses the jQuery plugin Owl Carousel as a base for image sliders.
68
- A carousel app (slider) lets you present your images as shows.
69
-
70
- Lightboxes like LightGallery or Lightbox V2 support your web for enlarged
71
- image views of your picture or video content. Have a look, a quick tour
72
- of what J1 can do for image data. Have fun!
73
-
74
- == J1 Lightboxes
75
-
76
- A Lightbox, in general, is a helper which displays enlarged, almost
77
- screen-filling versions of pictures (or videos) while dimming the rest of the
78
- page. The technique, introduced by Lightbox V2, gained widespread popularity
79
- due to its simple and elegant style. The term lightbox is used since then for
80
- Javascript libraries to support such functionality.
81
-
82
- For the J1 Template, two different lightboxes can be used:
83
-
84
- * Lightbox V2 (lightbox)
85
- * LightGallery
86
-
87
- The default lightbox used by J1 Template is Lightbox V2, a Javascript library
88
- written by _Lokesh Dhakar_. The name of that (build-in) is simply: lightbox.
89
- For more complex use cases, like a thumbnail gallery preview or video support,
90
- LightGallery can be used alternatively.
91
-
92
- NOTE: The name LightGallery implies a sort of a Gallery, but the library is a
93
- _lightbox_. And, LightGallery provides much more functionality on image-based
94
- data rather than enlarged displaying of images. See the examples below to check
95
- for the differences in comparison to the simpler Lightbox V2 lightbox.
96
-
97
- Both lightboxes are fully integrated to be used as standalone modules or
98
- used as helpers *under-the-hood* by other apps or modules focussing on
99
- image-data like gallery or carousel, the build-in carousel module.
100
-
101
- == Lightbox Examples
102
-
103
- Find below an example of using the lightbox Lightbox standalone. See how
104
- single (individual) images are linked for use with Lightbox.
105
-
106
- .Lightbox block for standalone images
107
- lightbox::example-standalone[ 400, {data-images-standalone} ]
108
-
109
- Lightbox supports image groups (image sets). Click on the images below to
110
- see how Lightbox manages a group of images.
111
-
112
- .Lightbox block for grouped images
113
- lightbox::example-group[ 400, {data-images-group}, group ]
114
-
115
- === LightGallery Example
116
-
117
- LightGallery provides more complex functions on image data. The module
118
- supports a gallery-style thumbnail preview plus image resizing, a download
119
- dialog, sharing provider support, and some more helpful. Check what
120
- LightGallery can do by the following example.
121
-
122
- gallery::jg_old_times[]
123
-
124
-
125
- == J1 Carousel App
126
-
127
- J1 Carousel is based on OWL Carousel V1 in the latest (and unfortunately
128
- last) version of 1.3.3. OWL Carousel is a clean and neat jQuery slider plugin
129
- for creating fully responsive and touch-enabled carousel sliders.
130
-
131
- NOTE: OWL Carousel V1 is no longer available on the Internet; for an
132
- unknown reason. Anyway, the J1 Template is using this version of OWL
133
- Carousel as a build-in carousel module because the software does an excellent
134
- job, is based on an MIT license with no issues using them for private and
135
- business use. And offers a lot of great features!
136
-
137
- === Simple Text Carousel
138
-
139
- A slider or carousel is typically used for displaying images. Still, the
140
- implementation for the J1 Template supports a lot more sources to be
141
- displayed as a slide show: simple text, for example.
142
-
143
- .Simple text carousel
144
- carousel::demo_text_carousel[role="mb-3"]
145
-
146
- Important statements or topics can be placed, e.g., on top of an article or
147
- a paragraph to give them better visibility. In one line, you can present
148
- a bunch of facts to know animated for the reader's attention within a single
149
- line. No much space is needed!
150
-
151
- === Parallax Text Carousel
152
-
153
- A more eye-minded type of a text-show is a parallax text slider. If you
154
- want to place emphasis on your personal statements focussing the meaning, this
155
- kind of a slide show may be interesting. Image-based slide shows may draw off
156
- the reader's attention from the text, therefor a pure text-based presentation
157
- may the better choice.
158
-
159
- .Parallax text carousel
160
- carousel::demo_text_carousel_parallax[role="mb-3"]
161
-
162
- Parallax text shows can be placed as banners on a page. A lot of different
163
- animations can be used. Internally, J1 Template is using some of the really
164
- great CSS styles offered by _animate.css_.
165
-
166
- TIP: Have a look a https://daneden.github.io/animate.css/[Dan Eden's home page]
167
- to see all the possible dynamic styles, you can create based on pure CSS. Some
168
- of them are implemented for OWL Carousel for animation. See the documentation
169
- for the CAROUSEL Module for more details.
170
-
171
- === Simple Image Carousel
172
-
173
- Carousels are mostly used for pictures data to animate the images as a series.
174
- Find with the following some examples how to use a carousel for your image
175
- data.
176
-
177
- A simple image show is useful for example as an animated (or not animated)
178
- banner presenting exciting things of your site or the products offered.
179
-
180
- .Simple Image Carousel
181
- carousel::demo_simple[role="mb-3"]
182
-
183
- === Carousel + Caption + Lightbox
184
-
185
- Carousels can be used for an exceptionally compact form of image galleries.
186
- This example shows some pictures having individual caption text and supports
187
- a lightbox to enlarge images full size. For the example below, a almost simple
188
- lightbox is used: Lightbox V2; or short: lightbox.
189
-
190
- .Nice cats
191
- carousel::demo_cats[role="mb-3"]
192
-
193
- The J1 module lightbox is a simple Lightbox but offers a bunch of impressive
194
- features for displaying images. For example, the lightbox can display all
195
- images (of a carousel) as a group. If one picture is opened in the lightbox, all
196
- the other can be browsed as well.
197
-
198
- === One Slide Carousel + Lightbox
199
-
200
- The build-in Carousel carousel supports multiple and single image shows.
201
- Here you find an example of a single image slide show with controls enabled
202
- to browse all images back and forth. An indicator below the slider shows how
203
- many images the show contains.
204
-
205
- .Single Slide Carousel and a Lightbox
206
- carousel::demo_oneslide[role="mb-3"]
207
-
208
- == J1 Gallery App
209
-
210
- To create image and video galleries, J1 Template implements the jQuery
211
- plugin JustifiedGallery as the main gallery module. Beside Justified
212
- Gallery, a gallery based on pure _Bootstrap_ code is available with the
213
- built-in gallery app *gallery*.
214
-
215
- JustifiedGallery is a great jQuery plugin to create responsive, infinite,
216
- and high quality justified image galleries. J1 Template combines the Gallery
217
- with the lightboxes supported to enlarge the images of a gallery.
218
-
219
- See JustifiedGallery in action - and for sure all that you see is even
220
- responsive. Change the size of your current browser window, by width or height,
221
- to see what will happen!
222
-
223
- === JustifiedGallery
224
-
225
- Pictures you've made are typically not even in size. Images may have the
226
- same size (resolution), but some of them are orientated landscape or other
227
- may portrait. For that reason, a more powerful gallery is needed to create
228
- so-called justified views.
229
-
230
- JustifiedGallery is using a so-called masonry grid layout. It works by
231
- placing elements in an optimal position based on available horizontal and
232
- vertical space. Sort of like mason fitting stones in a wall. You’ll have
233
- seen it in use all over the Internet!
234
-
235
- .Masonry grid layout of JustifiedGallery
236
- gallery::jg_customizer[]
237
-
238
- == Whats next
239
-
240
- Hopefully, you've enjoyed exploring the possibilities J1 offers for managing
241
- and displaying digital image content. But much, much more can the J1 do for
242
- your web.
243
-
244
- Incredible? See the next example page link:{roundtrip-present-videos}[Present videos].