Properly size thumbnail images with nonexistent/unavailable sources

Adds some HTML and CSS to ensure that thumbnail images with bad sources are correctly sized. Resolves ComputerScienceHouse#80.
adamhb123 · Aug 9, 2021 · e1fbe6e · e1fbe6e
1 parent 48bed50
commit e1fbe6e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/gallery/static/css/styles.css b/gallery/static/css/styles.css
@@ -38,7 +38,18 @@ h2 {
   transition: 0.3s box-shadow;
 }
 
+.album-wrapper > a {
+    display: inline-block;
+    position: relative;
+    width: 100%;
+}
+
 .album {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   transform: rotate(5deg);
   display: block;
   width: 100%;

diff --git a/gallery/templates/view_dir.html b/gallery/templates/view_dir.html
@@ -42,6 +42,8 @@
                         {% if child_type == "Directory" %}
                             <div class="album-wrapper">
                                 <a href="/view/dir/{{ child.id }}">
+                                    <!-- Dummy div, needed for ensuring proper element sizing (see issue #80) -->
+                                    <div style="margin-top:100%"></div>
                                     <img class="album" src="/api/thumbnail/get/dir/{{ child.id }}">
                                 </a>
                             </div>