Provide a way to set alternative descriptions

revelateur.py

@@ -55,7 +55,7 @@ def list_galleries_in(path):
             private = True
             slug = f"{slug}-{password}"
 
-        photos = list(list_photos_in(gallery_dir, slug))
+        photos = list(list_photos_in(gallery_dir, metadata, slug))
         if not photos:
             continue
         photos.sort(key=itemgetter("name"))
@@ -81,7 +81,7 @@ def find_photo(photos, photo_name):
     return None
 
 
-def list_photos_in(gallery_dir, gallery_slug):
+def list_photos_in(gallery_dir, gallery_metadata, gallery_slug):
     photo_files = [
         f for f in os.scandir(gallery_dir) if re.match(".+\.jpg", f.name, re.I)
     ]
@@ -89,6 +89,7 @@ def list_photos_in(gallery_dir, gallery_slug):
         with Image.open(photo_file.path) as image:
             width, height = image.size
         name = Path(photo_file.name).stem
+        metadata = gallery_metadata.get(name, {})
         page_url = f"{gallery_slug}-{name}.html"
         photo = {
             "gallery_slug": gallery_slug,
@@ -100,6 +101,7 @@ def list_photos_in(gallery_dir, gallery_slug):
             "height": height,
             "narrow": height > width,
             "wide": height * 2 < width,
+            "alt": metadata.get("alt", ""),
         }
         yield photo
 

theme/index.html.j2

@@ -35,7 +35,7 @@
                             {%- endfor -%}
                             "
                             sizes="min((100vw - 2rem), 330px)"
-                            alt="TODO" loading="lazy" decoding="async">
+                            alt="{{ gallery.cover_photo.alt or 'TODO' }}" loading="lazy" decoding="async">
                         <figcaption>{{ gallery.name }}</figcaption>
                     </picture>
                 </a>

theme/media.html.j2

@@ -33,11 +33,14 @@
                 sizes="min(100vw, calc(100vh * {{ photo.width }} / {{ photo.height }}))"
                 fetchpriority="high"
                 decoding="sync"
-                alt="TODO">
+                alt="{{ photo.alt or 'TODO' }}">
         </picture>
     </div>
 
     <h1>{{ gallery.name }}{% if gallery.private %} (🔒 privé){% endif %}</h1>
+    {% if photo.alt %}
+        <h2>{{ photo.alt }}</h2>
+    {% endif %}
 
     <nav>
         <p class="u-center">
@@ -116,6 +119,7 @@
             {% if previous %}
                 <a href="{{ previous.page_url }}"
                     title="Photo précédente, vous pouvez utiliser la flèche du clavier ←"
+                    rel="prev"
                     data-navigation-target="previous"
                 >← Photo précédente</a>
                 •
@@ -128,6 +132,7 @@
                 •
                 <a href="{{ next.page_url }}"
                     title="Photo suivante, vous pouvez utiliser la flèche du clavier →"
+                    rel="next"
                     data-navigation-target="next"
                 >Photo suivante →</a>
             {% endif %}

theme/style/main.css

@@ -129,6 +129,10 @@ h1 {
     font-size: 2rem;
     line-height: 2.5rem;
 }
+h2 {
+    text-align: center;
+    margin-bottom: 1.75rem;
+}
 
 img {
     max-width: 100%;