kennethreitz/photos.kennethreitz.org
1
0
Fork 0
mirror of https://github.com/kennethreitz/photos.kennethreitz.org.git synced 2026-06-05 06:46:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Collection photo count overlay + move prev/next above map

Browse Source 
- Show photo count as badge overlaid on collection card images
- Move prev/next navigation to appear after EXIF/tags, before map
- Download dropdown now appears last

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Kenneth Reitz
2026-04-10 21:16:02 -04:00
parent 517357e5bb
commit efd1dd5ca0
3 changed files with 23 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gallery/templates/gallery/collection_list.html
+1 -1
View File
@@ -14,10 +14,10 @@
{% elif c.preview and c.preview.thumbnail_medium %}
<img src="{{ c.preview.thumbnail_medium.url }}" alt="{{ c.title }}">
{% endif %}
<span class="collection-card-count">{{ c.image_count }}</span>
</div>
<div class="collection-card-info">
<h3>{{ c.title }}</h3>
<span class="count">{{ c.image_count }} images</span>
</div>
</a>
{% empty %}
static/css/style.css
+14 -2
View File
@@ -376,6 +376,7 @@ a:hover { color: var(--accent-hover); }
aspect-ratio: 1;
background: var(--bg);
overflow: hidden;
position: relative;
}
.collection-card-image img {
width: 100%;
@@ -383,12 +384,23 @@ a:hover { color: var(--accent-hover); }
object-fit: cover;
display: block;
}
.collection-card-count {
position: absolute;
bottom: 0.5rem;
right: 0.5rem;
background: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 0.8rem;
font-weight: 600;
padding: 0.2rem 0.5rem;
border-radius: var(--radius);
line-height: 1;
}
.collection-card-info {
padding: 0.75rem 1rem;
}
.collection-card-info h3 { font-size: 1rem; margin-bottom: 0.15rem; }
.collection-card-info .count { color: var(--text-muted); font-size: 0.85rem; }
.collection-card-info h3 { font-size: 1rem; margin-bottom: 0; }
/* Collection detail */
.collection-header { margin-bottom: 2rem; }
templates/image_detail.html
+8 -8
View File
@@ -110,6 +110,14 @@
<p style="color: var(--text-muted); font-size: 0.85rem;">{{ image.view_count }} views</p>
</div>
<!-- Prev/Next nav -->
{% if prev_image or next_image %}
<div style="display: flex; justify-content: space-between; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border);">
{% if prev_image %}<a href="/images/{{ prev_image.id }}/" class="btn" id="prev-link">&larr; Previous</a>{% else %}<span></span>{% endif %}
{% if next_image %}<a href="/images/{{ next_image.id }}/" class="btn" id="next-link">Next &rarr;</a>{% else %}<span></span>{% endif %}
</div>
{% endif %}
{% if image.exif and image.exif.gps_latitude and image.exif.gps_longitude %}
<div id="map" style="height: 250px; border-radius: var(--radius); margin: 1rem 0;"></div>
<script>
@@ -134,14 +142,6 @@
{% if image.original %}<a href="{{ image.original.url }}" download><strong>O</strong> <span style="color: var(--text-muted);">Original</span></a>{% endif %}
</div>
</details>
<!-- Prev/Next nav -->
{% if prev_image or next_image %}
<div style="display: flex; justify-content: space-between; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border);">
{% if prev_image %}<a href="/images/{{ prev_image.id }}/" class="btn" id="prev-link">&larr; Previous</a>{% else %}<span></span>{% endif %}
{% if next_image %}<a href="/images/{{ next_image.id }}/" class="btn" id="next-link">Next &rarr;</a>{% endif %}
</div>
{% endif %}
</div>
{% endblock %}
{% block scripts %}