Set and show album information

albums.py

@@ -1,6 +1,7 @@
 #!/usr/bin/env python3
 import json
 import os
+import time
 import requests
 import tempfile
 import hashlib
@@ -29,7 +30,6 @@ def join_web_path(path_components: list[str]) -> str:
 
 def get_url_metadata(path_components: list[str]) -> dict:
     url = albums_url + "/" + join_web_path(path_components) + "/meta.json"
-    print("Fetching meta from: " + url)
     folder_data = json.loads(requests.get(url).text)
     return folder_data
 
@@ -56,12 +56,7 @@ def get_cover_image(path_components: list[str], tmp_folder_covers: str, image_fi
 
 
 def create_index_md(path_components: list[str], tmp_folder_albums: str, tmp_folder_covers: str, metadata: dict,
-                    lang: str) -> None:
-    if 'time' in metadata and metadata['time'] is not None:
-        date = datetime.fromtimestamp(int(metadata["time"]) / 1000)
-    else:
-        date = None
-
+                    created_at: datetime, lang: str) -> None:
     title = metadata["title"]
     title = title.replace('"', '\"')
 
@@ -72,49 +67,57 @@ def create_index_md(path_components: list[str], tmp_folder_albums: str, tmp_fold
     f.write("+++\n")
     f.write('title = "' + title + '"\n')
     f.write('template = "album/album-list.html"\n')
-
-    if date is not None:
-        f.write('date = "' + date.strftime("%Y-%m-%dT%H:%M:%S") + '"\n')
+    f.write('sort_by = "date"\n')
+    f.write('weight = ' + str(int(time.mktime(created_at.timetuple()))) + '\n')
 
     f.write('[extra]\n')
     f.write('display_name = "' + title + '"\n')
     f.write('image_count = ' + str(metadata["imageCount"]) + '\n')
 
-    if "cover" in metadata and metadata["cover"] is not None:
-        f.write('cover = "' + join_path(cover_path, get_cover_image(path_components, tmp_folder_covers, metadata["cover"]) + '"\n'))
+    if metadata["cover"] is not None:
+        cover_image_path = join_path(cover_path, get_cover_image(path_components, tmp_folder_covers, metadata["cover"]))
+        cover_image_path = cover_image_path.replace("\\", "\\\\")
+        f.write('cover = "' + cover_image_path + '"\n')
 
     f.write("+++\n")
     f.close()
 
 
-def create_image_md(path_components: list[str], tmp_folder_albums: str, metadata: dict, lang: str) -> None:
-    filename = metadata["filename"]
-    filename = filename.replace('"', '\"')
-
+def create_image_md(path_components: list[str], tmp_folder_albums: str, metadata: dict, created_at: datetime,
+                    lang: str) -> None:
     if lang != "":
         lang = "." + lang
 
-    slug_name = slugify(filename)
-
     base_uri = join_web_path(path_components)
 
-    image_file_path = join_path(tmp_folder_albums, join_folder_path(path_components), slug_name + lang + ".md")
+    date_str = created_at.strftime("%Y-%m-%d")
+    time_str = created_at.strftime("%H:%M:%S")
+
+    page_filename = date_str + "-" + slugify(metadata["filename"]) + lang + ".md"
+    image_file_path = join_path(tmp_folder_albums, join_folder_path(path_components), page_filename)
+
+    if os.path.exists(image_file_path):
+        raise FileExistsError(image_file_path)
+
     image_file = open(image_file_path, "w")
 
     image_file.write("+++\n")
-    image_file.write('title = "' + filename + '"\n')
+    image_file.write('title = "' + metadata["filename"] + '"\n')
     image_file.write('template = "album/album-single.html"\n')
     image_file.write('sort_by = "title"\n')
+    image_file.write('date = ' + date_str + "T" + time_str + '\n')
 
     image_file.write('[extra]\n')
+    image_file.write('filename = "' + metadata["filename"] + '"\n')
     image_file.write('height = ' + str(metadata["height"]) + "\n")
     image_file.write('width = ' + str(metadata["width"]) + "\n")
-    image_file.write('file_uri = "' + albums_url + "/" + base_uri + "/" + filename + '"\n')
-    image_file.write('file_uri_300 = "' + albums_url + "/" + base_uri + "/.thumbs/300-" + filename + '"\n')
+    image_file.write('file_uri = "' + albums_url + "/" + base_uri + "/" + metadata["filename"] + '"\n')
+    image_file.write('file_uri_300 = "' + albums_url + "/" + base_uri + "/.thumbs/300-" + metadata["filename"] + '"\n')
 
     # Albums do not have 750 pixel thumbnail, use 1200 instead
-    image_file.write('file_uri_750 = "' + albums_url + "/" + base_uri + "/.thumbs/1200-" + filename + '"\n')
-    image_file.write('file_uri_1200 = "' + albums_url + "/" + base_uri + "/.thumbs/1200-" + filename + '"\n')
+    image_file.write('file_uri_750 = "' + albums_url + "/" + base_uri + "/.thumbs/1200-" + metadata["filename"] + '"\n')
+    image_file.write(
+        'file_uri_1200 = "' + albums_url + "/" + base_uri + "/.thumbs/1200-" + metadata["filename"] + '"\n')
     image_file.write("+++\n")
     image_file.close()
 
@@ -123,18 +126,30 @@ def create_album_folder(path_components: list[str], tmp_folder_albums: str, tmp_
                         metadata: dict) -> None:
     path_components = path_components.copy()
     path_components.append(metadata["foldername"])
+
+    if metadata['time'] is not None:
+        album_created_at = datetime.fromtimestamp(int(metadata["time"]) / 1000)
+    else:
+        print("Album has no creation date: ", path_components)
+        album_created_at = datetime.fromtimestamp(0)
+
     joined_path = join_folder_path(path_components)
 
     album_folder = join_path(tmp_folder_albums, joined_path)
     os.makedirs(album_folder)
 
-    create_index_md(path_components, tmp_folder_albums, tmp_folder_covers, metadata, "")
-    create_index_md(path_components, tmp_folder_albums, tmp_folder_covers, metadata, "en")
+    create_index_md(path_components, tmp_folder_albums, tmp_folder_covers, metadata, album_created_at, "")
+    create_index_md(path_components, tmp_folder_albums, tmp_folder_covers, metadata, album_created_at, "en")
 
     current_metadata = get_url_metadata(path_components)
     for image_metadata in current_metadata["images"]:
-        create_image_md(path_components, tmp_folder_albums, image_metadata, "")
-        create_image_md(path_components, tmp_folder_albums, image_metadata, "en")
+        if image_metadata['exif']['time'] is not None:
+            image_created_at = datetime.fromtimestamp(int(image_metadata['exif']['time']) / 1000)
+        else:
+            image_created_at = datetime.fromtimestamp(0)
+
+        create_image_md(path_components, tmp_folder_albums, image_metadata, image_created_at, "")
+        create_image_md(path_components, tmp_folder_albums, image_metadata, image_created_at, "en")
 
     sub_threads = []
 
@@ -168,13 +183,15 @@ def create_album_folder(path_components: list[str], tmp_folder_albums: str, tmp_
 index_file.write("+++\n")
 index_file.write("title = 'Fotoalben'\n")
 index_file.write("template = 'album/album-list.html'\n")
+index_file.write('sort_by = "date"\n')
 index_file.write("+++\n")
 index_file.close()
 
 index_file = open(join_path(tmp_ktt_ol_albums, "_index.en.md"), "w")
 index_file.write("+++\n")
 index_file.write("title = 'Albums'\n")
 index_file.write("template = 'album/album-list.html'\n")
+index_file.write('sort_by = "date"\n')
 index_file.write("+++\n")
 index_file.close()
 

ifs.py

@@ -18,41 +18,44 @@
 
 date = None
 ifs_year_folder = None
-last_year = ""
+last_year = 0
 year_count = 0
+year = 0
 
 for image in ifs_images:
     # check if time exists and is after IFS introduction year (2012)
-    if image["exif"]["time"] and image["exif"]["time"] > 1325416332000:
+    if image["exif"]["time"] is not None and image["exif"]["time"] > 1325416332000:
         new_date = datetime.fromtimestamp(int(image["exif"]["time"]) / 1000)
 
         if date is None or new_date > date:
             date = new_date
 
-        date_str = date.strftime("%Y-%m-%d")
-        datetime_str = date_str + "T" + date.strftime("%H:%M:%S")
+        year = date.year
 
-        year = date.strftime("%Y")
-
-        if last_year != year:
+        if year > last_year:
             last_year = year
             year_count = 0
 
-        ifs_year_folder = ifs_folder + "/" + year
+        ifs_year_folder = ifs_folder + "/" + str(year)
 
         if not os.path.exists(ifs_year_folder):
             os.mkdir(ifs_year_folder)
 
+    if image["exif"]["time"] is not None:
+        datetime_str = datetime.fromtimestamp(int(image["exif"]["time"]) / 1000).strftime("%Y-%m-%dT%H:%M:%S")
+    else:
+        datetime_str = "1970-01-01T01:00:00"
+
     year_count += 1
 
     frontmatter = '+++\n'
-    frontmatter += 'title = "Images From Space ' + year + '"\n'
+    frontmatter += 'title = "Images From Space ' + str(year) + '"\n'
     frontmatter += 'sort_by = "weight"\n'
     frontmatter += 'template = "album/album-list.html"\n'
-    frontmatter += 'weight = ' + year + '\n'
+    frontmatter += 'weight = ' + str(year) + '\n'
     frontmatter += 'in_search_index = false\n'
     frontmatter += '[extra]\n'
-    frontmatter += 'display_name = ' + year + '\n'
+    frontmatter += 'display_name = "' + str(year) + '"\n'
     frontmatter += 'image_count = ' + str(year_count) + '\n'
     frontmatter += '+++\n'
 
@@ -71,14 +74,13 @@
     frontmatter = '+++\n'
     frontmatter += 'title = "' + title + '"\n'
     frontmatter += 'slug = "' + image_id_str + '"\n'
-    frontmatter += 'weight = ' + str(ifs_count - image_id) + '\n'
+    frontmatter += 'weight = ' + image_id_str + '\n'
     frontmatter += 'template = "album/album-single.html"\n'
     frontmatter += 'in_search_index = false\n'
-
-    if image["exif"]["time"]:
-        frontmatter += 'date = "' + datetime_str + '"\n'
+    frontmatter += 'date = ' + datetime_str + '\n'
 
     frontmatter_extra = '[extra]\n'
+    frontmatter_extra += 'filename = "' + image["filename"] + '"\n'
     frontmatter_extra += 'height = ' + str(image["height"]) + "\n"
     frontmatter_extra += 'width = ' + str(image["width"]) + "\n"
     frontmatter_extra += 'file_uri = "' + ifs_url + "/" + image["filename"] + '"\n'
@@ -87,20 +89,20 @@
     frontmatter_extra += 'file_uri_1200 = "' + ifs_url + "/.thumbs/1200-" + image["filename"] + '"\n'
 
     frontmatter_extra += "\nimage_id = " + image_id_str
-    frontmatter_extra += "\nimage_year = " + year
+    frontmatter_extra += "\nimage_year = " + str(year)
     frontmatter_extra += '\nog_title = "' + title + '"'
     frontmatter_extra += '\nog_description = "Random Image From Space of the hackspace oldenburg"'
     frontmatter_extra += '\n+++\n'
 
     image_elem = '![' + title + '](' + ifs_url + '/.thumbs/750-' + image["filename"] + ')'
 
-    f = open(ifs_folder + "/" + year + "/" + "IFS-" + image_id_str + ".md", "w")
+    f = open(ifs_folder + "/" + str(year) + "/" + "IFS-" + image_id_str + ".md", "w")
     f.write(frontmatter)
     f.write('aliases = ["/images/ifs/by-id/' + image_id_str + '"]\n')
     f.write(frontmatter_extra)
     f.close()
 
-    f = open(ifs_folder + "/" + year + "/" + "IFS-" + image_id_str + ".en.md", "w")
+    f = open(ifs_folder + "/" + str(year) + "/" + "IFS-" + image_id_str + ".en.md", "w")
     f.write(frontmatter)
     f.write('aliases = ["/en/images/ifs/by-id/' + image_id_str + '"]\n')
     f.write(frontmatter_extra)

sass/css/site.scss

@@ -90,6 +90,20 @@ a {
   flex: 1 1 auto;
   cursor: pointer;
   position: relative;
+  border-radius: 5px;
+  border: 1px solid rgba(var(--bs-primary-rgb), 0);
+}
+
+.image-gallery > a:hover {
+  border: 1px solid rgba(var(--bs-primary-rgb), 1);
+}
+
+.image-gallery > a .album-hover-info {
+  display: none !important;
+}
+
+.image-gallery > a:hover .album-hover-info {
+  display: flex !important;
 }
 
 .image-gallery a img {
@@ -99,8 +113,7 @@ a {
   border: 1px solid rgba(var(--bs-secondary-rgb), 0.25);
   border-radius: 5px;
   vertical-align: middle;
-  background: url("/media/img/img-loader.gif") no-repeat;
-  background-position: center;
+  background: url("/media/img/img-loader.gif") no-repeat center;
 }
 
 .image-gallery::after {

templates/album/album-list.html

@@ -19,10 +19,10 @@ <h4>
                     {% set height = 200 %}
                     {% set width = image_metadata.width * scaling %}
 
-                    {% set resized_image = resize_image(path=subsection_data.extra.cover, height=200, op="fit_height") %}
+                    {% set resized_image = resize_image(path=subsection_data.extra.cover, height=height * 2, op="fit_height") %}
                     {% set image_uri = resized_image.url %}
                 {% else %}
-                    {% set latest_page = subsection_data.pages | first %}
+                    {% set latest_page = subsection_data.pages | last %}
 
                     {% set scaling = 200 / latest_page.extra.height %}
                     {% set height = 200 %}
@@ -46,7 +46,7 @@ <h4>
                          class="p-0 m-0"
                          decoding="sync"
                          src="{{ image_uri }}"/>
-                    <div class="float-start m-0 py-1 px-2 d-inline-flex flex-column position-relative"
+                    <div class="m-0 py-1 px-2 d-inline-flex flex-column position-relative"
                          style="background-color: rgba(var(--bs-secondary-bg-rgb), 0.75); top: -50%; left: 50%; z-index: 100; transform: translateX(-50%) translateY(-50%);">
                         <h5 class="p-0 m-0 text-white border-0"><span
                                 class="mx-auto">{{ subsection_data.extra.display_name }}</span></h5>
@@ -56,12 +56,12 @@ <h5 class="p-0 m-0 text-white border-0"><span
             {% else %}
                 <a href="{{ subsection_data.path }}"
                    class="text-decoration-none rounded-1 p-0 overflow-hidden border border-1"
-                   style="height: {{ 200 }}px; width: {{ 200 }}px;">
+                   style="height: 200px; width: 200px;">
                     <div style="background-color: dimgrey"
                          class="w-100 fs-1 fw-bolder h-100 justify-content-center align-items-center d-inline-flex">
                         ?
                     </div>
-                    <div class="float-start m-0 py-1 px-2 d-inline-flex flex-column position-relative"
+                    <div class="m-0 py-1 px-2 d-inline-flex flex-column position-relative"
                          style="background-color: rgba(var(--bs-secondary-bg-rgb), 0.75); top: -50%; left: 50%; z-index: 100; transform: translateX(-50%) translateY(-50%);">
                         <h3 class="p-0 m-0 text-white border-0"><span
                                 class="mx-auto">{{ subsection_data.extra.display_name }}</span></h3>
@@ -72,7 +72,7 @@ <h3 class="p-0 m-0 text-white border-0"><span
         {% endfor %}
 
 
-        {% for page in section.pages %}
+        {% for page in section.pages | reverse %}
 
             {% set scaling = 200 / page.extra.height %}
             {% set height = 200 %}
@@ -88,12 +88,30 @@ <h3 class="p-0 m-0 text-white border-0"><span
                 {% set image_uri = page.extra.file_uri_300 %}
             {% endif %}
 
-            <a href="{{ page.path }}" style="height: {{ height }}px; width: {{ width }}px;">
+            <a class="text-decoration-none" href="{{ page.path }}" style="height: {{ height }}px; width: {{ width }}px;">
                 <img alt=""
                      loading="lazy"
                      class="p-0"
                      decoding="async"
                      src="{{ image_uri }}"/>
+                {% set font_size = 12 %}
+                <div class="font-monospace position-absolute w-100 px-1 text-light justify-content-between text-truncate album-hover-info"
+                     style="background-color: rgba(var(--bs-primary-rgb), 30%); transform: translateY(-100%); font-size: {{font_size}}px; min-height: 3em">
+
+                    <span class="text-start my-auto">{{ page.extra.filename }}</span>
+
+                    {% if page.date | date(format="%Y") | int > 2000 %}
+                    {% set date_str = page.date | date(format="%d.%m.%Y") %}
+                    {% set date_size = date_str | length * (font_size * 0.6) %}
+                    {% set title_size = page.extra.filename | length * (font_size * 0.6) %}
+                    <pre class="d-none">{{date_str}}-{{date_size}}</pre>
+                    <pre class="d-none">{{title_size}}</pre>
+
+                    {% if date_size + title_size + font_size < width %}
+                    <span class="text-end my-auto">{{ page.date | date(format="%d.%m.%Y") }}<br>{{ page.date | date(format="%H:%M") }}</span>
+                    {% endif %}
+                    {% endif %}
+                </div>
             </a>
 
         {% endfor %}