feat(demo): add story 1 — Sorano: Rock and Time

2026-06-20 21:19:57 +02:00
parent 42ed59a6b3
commit 8f87155c1d
5508 changed files with 1595740 additions and 124 deletions
@@ -0,0 +1,31 @@
+{# add javascript for gallery and lightbox configuration #}
+$("#{{ id }}").justifiedGallery({
+    rowHeight: {{  rowHeight  }},
+    margins: {{  margins  }},
+    lastRow: "{{  lastRow  }}",
+    captions: {{  captions  }},
+    border: {{  border  }},
+    {#~ use given width and height, don't load "src" attribute #}
+    waitThumbnailsLoad: false,
+    thumbnailPath: function (currentPath, width, height, image) {
+        {#~ don't try to reload image from "src" #}
+        return image.currentSrc;
+    },
+});
+
+GLightbox({
+    selector: ".glightbox-{{ id }}",
+    openEffect: "{{ openEffect }}",
+    closeEffect: "{{ closeEffect }}",
+    slideEffect: "{{ slideEffect }}",
+    closeButton: {{ closeButton }},
+    touchNavigation: {{ touchNavigation }},
+    touchFollowAxis: {{ touchFollowAxis }},
+    keyboardNavigation: {{ keyboardNavigation }},
+    closeOnOutsideClick: {{ closeOnOutsideClick }},
+    loop: {{ loop }},
+    draggable: {{ draggable }},
+    descPosition: "{{ descPosition }}",
+    moreText: "{{ descMoreText }}",
+    moreLength: {{ descMoreLength }},
+});
@@ -0,0 +1,43 @@
+{# html #}
+<p id="{{ id }}">
+    {%~ for image in images %}
+    <a href="{{ image["src"] }}" class="glightbox-{{ id }}"
+        {#- add description, if enabled #}
+        {%- if descEnabled == "true" %}
+            {{- "" }} data-description="{{ image["desc"]|raw }}"
+        {%- endif %}
+>
+        {#~ try to generate a thumbnail image #}
+        {#- get the full image url              https://mywebsite.com/user/pages/02.gallery/01.landscapes/image01.jpg #}
+        {%- set original_image = image["src"] %}
+        {#- remove the sites url                                     /user/pages/02.gallery/01.landscapes/image01.jpg #}
+        {%- if base_url %}
+            {%- set original_image = original_image|replace({(base_url): ""}) %}
+        {%- endif %}
+        {#- remove "/user/"                                                pages/02.gallery/01.landscapes/image01.jpg #}
+        {#- be careful, a page can be named "user", only replace the first occurence #}
+        {%- set original_image = original_image|split("/user/", 2) %}
+        {#- add "user://"                                           user://pages/02.gallery/01.landscapes/image01.jpg #}
+        {%- set original_image = "user://" ~ original_image[1] %}
+        {#- use the generated url to get the image via grav (can load any image in the /user directory) #}
+        {%- set original_image = page.media[original_image] %}
+        {#- success: can now generate a smaller thumbnail image #}
+        {%- if original_image %}
+        {%- set estimated_thumb_width = ( original_image.width * rowHeight / original_image.height ) | round %}
+        {#- force the use of the first image in srcset (thumbnail) with sizes="1px" #}
+        {#- RSS readers shouldn't use srcset images, otherwise they will display something similar to JG, but not justified #}
+        {#- width and height to avoid Justified Gallery loading the image from "src" attribute #}
+        {{ original_image
+            .derivatives( [ ( estimated_thumb_width * resizeFactor ) | round ] )
+            .sizes( "1px" )
+            .width( estimated_thumb_width )
+            .height( rowHeight )
+            .loading.html(image.title, image.alt)|raw }}
+        {#~ couldn't find the image inside grav, so just use the original url #}
+        {%- else %}
+        {{ image["image"]|raw }}
+        {{- "\n" }}
+        {%- endif %}
+    </a>
+    {%~ endfor %}
+</p>