claude and example site

example_site/template/__folder.image.html

@@ -0,0 +1,42 @@
+<div class="holder">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.css" integrity="sha512-vRbASHFS0JiM4xwX/iqr9mrD/pXGnOP2CLdmXSSNAjLdgQVFyt4qI+BIoUW7/81uSuKRj0cWv3Dov8vVQOTHLw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.js" integrity="sha512-lZD0JiwhtP4UkFD1mc96NiTZ14L7MjyX5Khk8PMxJszXMLvu7kjq1sp4bb0tcL6MY+/4sIuiUxubOqoueHrW4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <div class="breadcrumbs">
+        {% set breadcrumbs = currentPath.split('/') %}
+        {% for i in range(breadcrumbs|length) %}
+        {% if i+1 == breadcrumbs|length %}
+        <div class="current">{{ breadcrumbs[i] }}</div>
+        {% else %}
+        <a href="{{ '/' ~ '/'.join(breadcrumbs[:i+1]) }}"> 🗀 {{ breadcrumbs[i] }}</a>
+        <div class="seperator">/</div>
+        {% endif %}
+        {% endfor %}
+    </div>
+    <div class="content_holder">
+        <div class="albums">
+            {% for album in get_sibling_content_folders(currentPath) %}
+            <a href="/{{ album[1] }}">↪ 🗀 {{ album[0] }}</a>
+            {% endfor %}
+        </div>
+        <div class="content">
+            {% for picture in get_folder_contents(currentPath) | sort(attribute='date_modified', reverse=True) %}
+            {% if 'image' in picture.categories %}
+            <a class="post photo" style="
+                        max-width:{{picture.metadata.width//20}}px;
+                        max-height:{{picture.metadata.height//20}}px;
+                        width:calc({{picture.metadata.width//20}}px*250/{{picture.metadata.height//20}});
+                        flex-grow:calc({{picture.metadata.width//20}}*250/{{picture.metadata.height//20}})">
+                <img src="/download/{{ picture.path }}" alt="{{ picture.name }}" class="pre-loaded"
+                    onload="this.className+=' loaded'" data-zoom-image>
+                    {{ picture.metadata.exif['DateTimeOriginal '] }}
+            </a>
+            {% endif %}
+            {% endfor %}
+        </div>
+        <script>
+            const gallery = new Viewer(document.querySelector('.content'), {
+                inline: false,
+            });
+        </script>
+    </div>
+</div>