update .gitignore for thumbnail files, add proper directory with icons to content, add proper thumbnail img loading with lazy loading for performance

viewer/templates/browse.html

@@ -21,7 +21,7 @@
                 <span class="pl-1" style="font-weight: 400; font-style: italic; font-size: 70%;">
                     {{ files|length }} files
                 </span>
-                <span class="icon">
+                <span class="icon align-self">
                     <a href="{% url 'refresh' directory.id %}">
                         <i class="fas fa-sync"></i>
                     </a>
@@ -32,15 +32,17 @@
             <div class="content">
                 {% for directory in directories %}
                 <div>
-
+                    <span class="icon">
+                        <i class="fas fa-folder"></i>
+                    </span>
+                    {{ directory }}
                 </div>
 
                 {% endfor %}
                 {% for file in files %}
                     <div class="media">
-                        {% load thumbnail %}
-                        <img class="px-2" src="{{ file.fullpath|thumbnail_url:'small' }}">
-{#                        <img class="px-2" src="https://picsum.photos/200/130?random={{ file.0 }}">#}
+                        {% load static %}
+                        <img class="px-2" loading="lazy" src="{% static "/thumbnails/"|add:file.thumbnail %}">
                         <span class="media-filename">
                             <a href="{% url 'file' directory.id file.filename %}">
                                 {{ file.filename }}
@@ -84,6 +86,5 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"
             integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg=="
             crossorigin="anonymous"></script>
-    {% load static %}
     <script src="{% static "hover.js" %}"></script>
 {% endblock content %}