From e1fbe6ea72a15d82aa83832edfa30329c37b3e46 Mon Sep 17 00:00:00 2001
From: Adam Brewer <adamhb321@gmail.com>
Date: Sun, 8 Aug 2021 23:09:55 -0400
Subject: [PATCH] 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 #80.
---
gallery/static/css/styles.css | 11 +++++++++++
gallery/templates/view_dir.html | 2 ++
2 files changed, 13 insertions(+)
diff --git a/gallery/static/css/styles.css b/gallery/static/css/styles.css
index f5a6d9f..57b201d 100644
--- 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
index 840f687..ca54fcc 100644
--- 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>