j1-template 2021.1.11 → 2021.1.16

Sign up to get free protection for your applications and to get access to all the features.
Files changed (150) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/themes/j1/blocks/footer/boxes/issue.proc +28 -5
  3. data/_includes/themes/j1/blocks/footer/boxes/legal_statements.proc +66 -23
  4. data/_includes/themes/j1/blocks/footer/boxes/links_box.proc +0 -1
  5. data/_includes/themes/j1/blocks/footer/boxes/news_box.proc +16 -1
  6. data/_includes/themes/j1/layouts/content_generator_app.html +1 -1
  7. data/_includes/themes/j1/layouts/content_generator_blog_archive.html +197 -219
  8. data/_includes/themes/j1/layouts/content_generator_collection.html +4 -2
  9. data/_includes/themes/j1/layouts/content_generator_page.html +4 -1
  10. data/_includes/themes/j1/layouts/content_generator_post.html +31 -23
  11. data/_includes/themes/j1/layouts/content_generator_raw.html +1 -1
  12. data/_includes/themes/j1/layouts/layout_metadata_generator.html +55 -0
  13. data/_includes/themes/j1/modules/connectors/comment/commento.html +31 -0
  14. data/_includes/themes/j1/modules/connectors/comment/custom-provider.html +7 -8
  15. data/_includes/themes/j1/modules/connectors/comment/disqus.html +12 -54
  16. data/_includes/themes/j1/modules/connectors/comment/facebook.html +7 -8
  17. data/_includes/themes/j1/modules/connectors/comment/hyvor.html +33 -0
  18. data/_includes/themes/j1/modules/connectors/comment/just-comments.html +31 -0
  19. data/_includes/themes/j1/modules/connectors/comments +3 -0
  20. data/_includes/themes/j1/procedures/posts/collate_timeline.proc +27 -5
  21. data/_includes/themes/j1/procedures/posts/pager.proc +123 -0
  22. data/_layouts/default.html +52 -1
  23. data/assets/data/cookieconsent.html +0 -2
  24. data/assets/data/disqus.js +81 -0
  25. data/assets/data/hyvor.js +72 -0
  26. data/assets/data/menu.html +1 -1
  27. data/assets/data/mmenu_toc.html +20 -1
  28. data/assets/data/panel.html +28 -7
  29. data/assets/error_pages/HTTP204.html +2 -1
  30. data/assets/error_pages/HTTP400.html +2 -1
  31. data/assets/error_pages/HTTP401.html +2 -1
  32. data/assets/error_pages/HTTP403.html +2 -1
  33. data/assets/error_pages/HTTP404.html +2 -1
  34. data/assets/error_pages/HTTP444.html +93 -0
  35. data/assets/error_pages/HTTP500.html +2 -1
  36. data/assets/error_pages/HTTP501.html +2 -1
  37. data/assets/error_pages/HTTP502.html +2 -1
  38. data/assets/error_pages/HTTP503.html +2 -1
  39. data/assets/themes/j1/adapter/js/algolia.js +10 -10
  40. data/assets/themes/j1/adapter/js/asciidoctor.js +6 -6
  41. data/assets/themes/j1/adapter/js/attic.js +17 -17
  42. data/assets/themes/j1/adapter/js/bmd.js +6 -6
  43. data/assets/themes/j1/adapter/js/carousel.js +10 -10
  44. data/assets/themes/j1/adapter/js/clipboard.js +10 -10
  45. data/assets/themes/j1/adapter/js/cookieConsent.js +58 -47
  46. data/assets/themes/j1/adapter/js/fam.js +34 -34
  47. data/assets/themes/j1/adapter/js/framer.js +6 -6
  48. data/assets/themes/j1/adapter/js/j1.js +520 -252
  49. data/assets/themes/j1/adapter/js/justifiedGallery.js +11 -11
  50. data/assets/themes/j1/adapter/js/justifiedGalleryCustomizer.js +19 -19
  51. data/assets/themes/j1/adapter/js/lightbox.js +6 -6
  52. data/assets/themes/j1/adapter/js/logger.js +7 -7
  53. data/assets/themes/j1/adapter/js/mmenu.js +25 -25
  54. data/assets/themes/j1/adapter/js/navigator.js +55 -48
  55. data/assets/themes/j1/adapter/js/quicksearch.js +6 -6
  56. data/assets/themes/j1/adapter/js/rouge.js +7 -7
  57. data/assets/themes/j1/adapter/js/rtable.js +6 -6
  58. data/assets/themes/j1/adapter/js/themer.js +43 -47
  59. data/assets/themes/j1/adapter/js/toccer.js +9 -9
  60. data/assets/themes/j1/modules/backstretch/js/backstretch.js +3 -3
  61. data/assets/themes/j1/modules/cookieConsent/js/cookieConsent.js +35 -23
  62. data/assets/themes/j1/modules/cookieConsent/js/cookieConsent.min.js +2 -2
  63. data/assets/themes/j1/modules/lunrSearch/js/quicksearch.js +1 -1
  64. data/assets/themes/j1/modules/themeSwitcher/js/switcher.js +74 -55
  65. data/assets/themes/j1/modules/themeSwitcher/js/switcher.min.js +75 -57
  66. data/lib/j1/version.rb +3 -3
  67. data/lib/starter_web/Gemfile +4 -5
  68. data/lib/starter_web/_config.yml +42 -24
  69. data/lib/starter_web/_data/blocks/footer.yml +52 -20
  70. data/lib/starter_web/_data/blocks/panel.yml +4 -4
  71. data/lib/starter_web/_data/builder/blog_navigator.yml +9 -192
  72. data/lib/starter_web/_data/builder/defaults/blog_navigator.yml +389 -0
  73. data/lib/starter_web/_data/j1_config.yml +24 -10
  74. data/lib/starter_web/_data/locales/be.yml +269 -0
  75. data/lib/starter_web/_data/locales/cs.yml +218 -0
  76. data/lib/starter_web/_data/locales/da.yml +213 -0
  77. data/lib/starter_web/_data/locales/de.yml +222 -0
  78. data/lib/starter_web/_data/locales/el.yml +215 -0
  79. data/lib/starter_web/_data/locales/en.yml +215 -0
  80. data/lib/starter_web/_data/locales/es.yml +219 -0
  81. data/lib/starter_web/_data/locales/et.yml +207 -0
  82. data/lib/starter_web/_data/locales/fi.yml +211 -0
  83. data/lib/starter_web/_data/locales/fr.yml +219 -0
  84. data/lib/starter_web/_data/locales/hr.yml +240 -0
  85. data/lib/starter_web/_data/locales/hu.yml +196 -0
  86. data/lib/starter_web/_data/locales/it.yml +215 -0
  87. data/lib/starter_web/_data/locales/lv.yml +233 -0
  88. data/lib/starter_web/_data/locales/nl.yml +213 -0
  89. data/lib/starter_web/_data/locales/pl.yml +241 -0
  90. data/lib/starter_web/_data/locales/pt.yml +217 -0
  91. data/lib/starter_web/_data/locales/readme +4 -0
  92. data/lib/starter_web/_data/locales/ro.yml +209 -0
  93. data/lib/starter_web/_data/locales/ru.yml +269 -0
  94. data/lib/starter_web/_data/locales/sk.yml +211 -0
  95. data/lib/starter_web/_data/locales/sl.yml +209 -0
  96. data/lib/starter_web/_data/locales/sv.yml +207 -0
  97. data/lib/starter_web/_data/modules/defaults/cookieconsent.yml +11 -10
  98. data/lib/starter_web/_data/modules/defaults/themer.yml +1 -0
  99. data/lib/starter_web/_data/modules/themer.yml +1 -0
  100. data/lib/starter_web/_data/plugins/defaults/paginator.yml +7 -6
  101. data/lib/starter_web/_data/plugins/paginator.yml +3 -0
  102. data/lib/starter_web/_includes/attributes.asciidoc +1 -1
  103. data/lib/starter_web/_plugins/date-i18n.rb +67 -0
  104. data/lib/starter_web/_plugins/lunr_index.rb +1 -1
  105. data/lib/starter_web/assets/images/modules/attics/markus-spiske-1920x1280.jpg +0 -0
  106. data/lib/starter_web/assets/images/modules/attics/matthew-dockery-1920x1280.jpg +0 -0
  107. data/lib/starter_web/collections/posts/public/featured/_posts/2020-01-01-about-cookies.adoc +1 -1
  108. data/lib/starter_web/collections/posts/public/featured/_posts/2021-03-01-site-generators.adoc +1 -1
  109. data/lib/starter_web/collections/posts/public/featured/_posts/2021-03-03-about-j1.adoc +1 -1
  110. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-01-post-test-series.adoc +2 -2
  111. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-02-post-test-series.adoc +2 -2
  112. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-03-post-test-series.adoc +2 -2
  113. data/lib/starter_web/collections/posts/public/series/_posts/2020-01-04-post-test-series.adoc +2 -2
  114. data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-20-minneapolis.adoc +1 -1
  115. data/lib/starter_web/collections/posts/public/wikipedia/_posts/2016-11-24-narcisse-snake-dens.adoc +1 -1
  116. data/lib/starter_web/index.html +3 -3
  117. data/lib/starter_web/package.json +1 -1
  118. data/lib/starter_web/pages/public/asciidoc_skeletons/book/book.adoc +3 -0
  119. data/lib/starter_web/pages/public/asciidoc_skeletons/multi-document/multi.adoc +3 -0
  120. data/lib/starter_web/pages/public/asciidoc_skeletons/simple-document/simple.adoc +3 -0
  121. data/lib/starter_web/pages/public/blog/navigator/archive.html +80 -12
  122. data/lib/starter_web/pages/public/blog/navigator/archive/categoryview.html +94 -26
  123. data/lib/starter_web/pages/public/blog/navigator/archive/dateview.html +81 -12
  124. data/lib/starter_web/pages/public/blog/navigator/archive/tagview.html +95 -37
  125. data/lib/starter_web/pages/public/blog/navigator/index.html +4 -0
  126. data/lib/starter_web/pages/public/cookieConsent.adoc +3 -0
  127. data/lib/starter_web/pages/public/learn/quickstart.adoc +473 -0
  128. data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.adoc +0 -1
  129. data/lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc +2 -1
  130. data/lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc +0 -2
  131. data/lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc +0 -2
  132. data/lib/starter_web/pages/public/learn/roundtrip/400_asciidoc_extensions.adoc +0 -1
  133. data/lib/starter_web/pages/public/learn/roundtrip/410_bs_modals_extentions.adoc +0 -1
  134. data/lib/starter_web/pages/public/learn/roundtrip/420_responsive_tables_extensions.adoc +0 -1
  135. data/lib/starter_web/pages/public/learn/roundtrip/500_themes.adoc +0 -1
  136. data/lib/starter_web/pages/public/learn/roundtrip/600_quicksearch.adoc +0 -1
  137. data/lib/starter_web/pages/public/learn/where_to_go.adoc +0 -1
  138. data/lib/starter_web/pages/public/legal/de/100_copyright.adoc +116 -0
  139. data/lib/starter_web/pages/public/legal/de/100_impress.adoc +94 -0
  140. data/lib/starter_web/pages/public/legal/de/300_privacy.adoc +320 -0
  141. data/lib/starter_web/pages/public/legal/de/400_comment_policy.adoc +123 -0
  142. data/lib/starter_web/pages/public/legal/en/100_copyright.adoc +3 -1
  143. data/lib/starter_web/pages/public/legal/en/200_impress.adoc +3 -1
  144. data/lib/starter_web/pages/public/legal/en/300_privacy.adoc +81 -20
  145. data/lib/starter_web/pages/public/legal/en/400_comment_policy.adoc +34 -16
  146. data/lib/starter_web/utilsrv/_defaults/package.json +1 -1
  147. data/lib/starter_web/utilsrv/package.json +1 -1
  148. metadata +41 -4
  149. data/_includes/themes/j1/procedures/global/pager.proc +0 -79
  150. data/lib/starter_web/pages/public/learn/roundtrip/100_present_images.org.asciidoc +0 -244
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.11
4
+ version: 2021.1.16
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-14 00:00:00.000000000 Z
11
+ date: 2021-08-03 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
@@ -298,7 +301,6 @@ files:
298
301
  - _includes/themes/j1/procedures/global/get_documents_dir.proc
299
302
  - _includes/themes/j1/procedures/global/get_page_path.proc
300
303
  - _includes/themes/j1/procedures/global/get_page_url.proc
301
- - _includes/themes/j1/procedures/global/pager.proc
302
304
  - _includes/themes/j1/procedures/global/select_color.proc
303
305
  - _includes/themes/j1/procedures/global/select_font_size.proc
304
306
  - _includes/themes/j1/procedures/global/select_icon_size.proc
@@ -316,6 +318,7 @@ files:
316
318
  - _includes/themes/j1/procedures/posts/collate_timeline.proc
317
319
  - _includes/themes/j1/procedures/posts/create_ad_block.proc
318
320
  - _includes/themes/j1/procedures/posts/create_series_header.proc
321
+ - _includes/themes/j1/procedures/posts/pager.proc
319
322
  - _layouts/app.html
320
323
  - _layouts/blog_archive.html
321
324
  - _layouts/collection.html
@@ -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
@@ -940,6 +946,7 @@ files:
940
946
  - lib/starter_web/_data/blocks/footer.yml
941
947
  - lib/starter_web/_data/blocks/panel.yml
942
948
  - lib/starter_web/_data/builder/blog_navigator.yml
949
+ - lib/starter_web/_data/builder/defaults/blog_navigator.yml
943
950
  - lib/starter_web/_data/categories.yml
944
951
  - lib/starter_web/_data/colors.yml
945
952
  - lib/starter_web/_data/font_sizes.yml
@@ -952,6 +959,29 @@ files:
952
959
  - lib/starter_web/_data/layouts/page.yml
953
960
  - lib/starter_web/_data/layouts/post.yml
954
961
  - lib/starter_web/_data/layouts/raw.yml
962
+ - lib/starter_web/_data/locales/be.yml
963
+ - lib/starter_web/_data/locales/cs.yml
964
+ - lib/starter_web/_data/locales/da.yml
965
+ - lib/starter_web/_data/locales/de.yml
966
+ - lib/starter_web/_data/locales/el.yml
967
+ - lib/starter_web/_data/locales/en.yml
968
+ - lib/starter_web/_data/locales/es.yml
969
+ - lib/starter_web/_data/locales/et.yml
970
+ - lib/starter_web/_data/locales/fi.yml
971
+ - lib/starter_web/_data/locales/fr.yml
972
+ - lib/starter_web/_data/locales/hr.yml
973
+ - lib/starter_web/_data/locales/hu.yml
974
+ - lib/starter_web/_data/locales/it.yml
975
+ - lib/starter_web/_data/locales/lv.yml
976
+ - lib/starter_web/_data/locales/nl.yml
977
+ - lib/starter_web/_data/locales/pl.yml
978
+ - lib/starter_web/_data/locales/pt.yml
979
+ - lib/starter_web/_data/locales/readme
980
+ - lib/starter_web/_data/locales/ro.yml
981
+ - lib/starter_web/_data/locales/ru.yml
982
+ - lib/starter_web/_data/locales/sk.yml
983
+ - lib/starter_web/_data/locales/sl.yml
984
+ - lib/starter_web/_data/locales/sv.yml
955
985
  - lib/starter_web/_data/modules/advertising.yml
956
986
  - lib/starter_web/_data/modules/attics.yml
957
987
  - lib/starter_web/_data/modules/authentication.yml
@@ -1006,6 +1036,7 @@ files:
1006
1036
  - lib/starter_web/_plugins/asciidoctor-extensions/panel.rb
1007
1037
  - lib/starter_web/_plugins/asciidoctor-extensions/shout-block.rb
1008
1038
  - lib/starter_web/_plugins/asciidoctor-extensions/twitter-emoji-inline.rb
1039
+ - lib/starter_web/_plugins/date-i18n.rb
1009
1040
  - lib/starter_web/_plugins/debug.rb
1010
1041
  - lib/starter_web/_plugins/filters.rb
1011
1042
  - lib/starter_web/_plugins/lorem_inline.rb
@@ -1044,8 +1075,10 @@ files:
1044
1075
  - lib/starter_web/assets/images/modules/attics/leon-1920x1280.jpg
1045
1076
  - lib/starter_web/assets/images/modules/attics/lianhao-1920x1280.jpg
1046
1077
  - lib/starter_web/assets/images/modules/attics/machine-generator-1920x1280.jpg
1078
+ - lib/starter_web/assets/images/modules/attics/markus-spiske-1920x1280.jpg
1047
1079
  - lib/starter_web/assets/images/modules/attics/markus-spiske4-1920x1280.jpg
1048
1080
  - lib/starter_web/assets/images/modules/attics/matthaeus-1920x1280.jpg
1081
+ - lib/starter_web/assets/images/modules/attics/matthew-dockery-1920x1280.jpg
1049
1082
  - lib/starter_web/assets/images/modules/attics/runner-1920x1200.jpg
1050
1083
  - lib/starter_web/assets/images/modules/attics/tldr-1920x800.jpg
1051
1084
  - lib/starter_web/assets/images/modules/carousel/cats/cat-1.jpg
@@ -1293,8 +1326,8 @@ files:
1293
1326
  - lib/starter_web/pages/public/blog/navigator/archive/tagview.html
1294
1327
  - lib/starter_web/pages/public/blog/navigator/index.html
1295
1328
  - lib/starter_web/pages/public/cookieConsent.adoc
1329
+ - lib/starter_web/pages/public/learn/quickstart.adoc
1296
1330
  - 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
1331
  - lib/starter_web/pages/public/learn/roundtrip/100_present_videos.adoc
1299
1332
  - lib/starter_web/pages/public/learn/roundtrip/200_typography.adoc
1300
1333
  - lib/starter_web/pages/public/learn/roundtrip/300_icon_fonts.adoc
@@ -1318,6 +1351,10 @@ files:
1318
1351
  - lib/starter_web/pages/public/learn/roundtrip/_includes/documents/419_advanced_modals_demo.asciidoc
1319
1352
  - lib/starter_web/pages/public/learn/roundtrip/_includes/documents/tables/bs_modal_examples.asciidoc
1320
1353
  - lib/starter_web/pages/public/learn/where_to_go.adoc
1354
+ - lib/starter_web/pages/public/legal/de/100_copyright.adoc
1355
+ - lib/starter_web/pages/public/legal/de/100_impress.adoc
1356
+ - lib/starter_web/pages/public/legal/de/300_privacy.adoc
1357
+ - lib/starter_web/pages/public/legal/de/400_comment_policy.adoc
1321
1358
  - lib/starter_web/pages/public/legal/en/100_copyright.adoc
1322
1359
  - lib/starter_web/pages/public/legal/en/200_impress.adoc
1323
1360
  - lib/starter_web/pages/public/legal/en/300_privacy.adoc
@@ -1,79 +0,0 @@
1
- {% comment %}
2
- # -----------------------------------------------------------------------------
3
- # ~/_includes/themes/j1/procedures/global/pager.proc
4
- # HTML/Liquid procedure to create a paginator for pages of type "post"
5
- #
6
- # Product/Info:
7
- # http://jekyll.one
8
- #
9
- # Copyright (C) 2021 Juergen Adams
10
- #
11
- # J1 Template is licensed under the MIT License.
12
- # See: https://github.com/jekyll-one-org/J1 Template/blob/master/LICENSE
13
- # -----------------------------------------------------------------------------
14
- # NOTE:
15
- # This pager reads the "page path" from cookie "cookieUserState". This
16
- # data is used to return from a previous (page builder) page.
17
- # -----------------------------------------------------------------------------
18
- # Test data:
19
- # liquid_var: {{ liquid_var | debug }}
20
- # -----------------------------------------------------------------------------
21
- {% endcomment %}
22
-
23
-
24
- {% comment %} Variables
25
- -------------------------------------------------------------------------------- {% endcomment %}
26
-
27
-
28
- {% comment %} Liquid procedures
29
- -------------------------------------------------------------------------------- {% endcomment %}
30
-
31
-
32
- {% comment %} Main
33
- -------------------------------------------------------------------------------- {% endcomment %}
34
-
35
- <div class="paginator">
36
- <ul class="pagination raised-z0">
37
-
38
- {% comment %} Set PREVIOUS page
39
- ---------------------------------------------------------------------------- {% endcomment %}
40
- {% if page.previous %}
41
- <li class="page-item"><a class="page-link" href="{{ base_path }}{{ page.previous.url }}" title="{{ page.previous.title }}">Prev</a></li>
42
- {% else %}
43
- <li class="page-item disabled"><a class="page-link">Prev</a></li>
44
- {% endif %}
45
-
46
- {% comment %} Set BACK page (PagerURL)
47
- ---------------------------------------------------------------------------- {% endcomment %}
48
- <!-- [INFO ] [procedures.global.pager.proc ] [Manage the current pager settings for: {{ builder_path }}] -->
49
- <script>
50
- var cookie_names = j1.getCookieNames();
51
- var user_state_cookie_name = cookie_names.user_session;
52
- var user_state = j1.readCookie(user_state_cookie_name);
53
- var re = new RegExp('navigator|dateview|tagview|archive');
54
- var last_pager = user_state.last_pager;
55
- var last_pager_url;
56
-
57
- <!-- [INFO ] [procedures.global.pager.proc ] [Calculate BackURL from User State Cookie for page: {{page.title}}] -->
58
- if (re.test(last_pager)) {
59
- last_pager_url = '<li class="page-item"><a class="page-link" href="' + last_pager + '" title="Back to Top Page">Back</a></li>';
60
- } else {
61
- last_pager_url = '<li class="page-item disabled"><a class="page-link" title="Back to Top Page">Back</a></li>';
62
- }
63
- document.write( last_pager_url );
64
- j1.writeCookie({
65
- name: user_state_cookie_name,
66
- data: user_state
67
- });
68
- </script>
69
-
70
- {% comment %} Set NEXT page
71
- ---------------------------------------------------------------------------- {% endcomment %}
72
- {% if page.next %}
73
- <li class="page-item"><a class="page-link" href="{{ base_path }}{{ page.next.url }}" title="{{ page.next.title }}">Next</a></li>
74
- {% else %}
75
- <li class="page-item disabled"><a class="page-link" href="#">Next</a></li>
76
- {% endif %}
77
-
78
- </ul>
79
- </div>
@@ -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].