Fix album styling

.gitignore

@@ -2,6 +2,8 @@
 /.idea
 /venv
 
+/album_covers
+
 /content/images/albums
 
 /content/images/ifs/*

albums.py

@@ -9,128 +9,173 @@
 from threading import Thread
 
 albums_path = "content/images/albums"
+cover_path = "album_covers"
 albums_url = "https://www.mainframe.io/media/album-images"
 
-tmp_folder = tempfile.mkdtemp(prefix="ktt_ol_albums")
-print(tmp_folder)
 
+def join_folder_path(path_components: list[str]) -> str:
+    slugged_path_components = list()
 
-def get_url_metadata(folder) -> dict:
-    url = albums_url + "/" + folder + "/meta.json"
+    for component in path_components:
+        slugged_path_components.append(slugify(component))
+
+    return os.path.sep.join(slugged_path_components)
+
+
+def join_web_path(path_components: list[str]) -> str:
+    return '/'.join(path_components)
+
+
+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
 
 
-def create_index_md(base_uri: str, folder_path: str, folder: dict, lang: str, created: datetime) -> None:
-    title = folder["title"]
+def get_cover_image(path_components: list[str], tmp_folder_covers: str, image_filename: str) -> str:
+    url = albums_url + "/" + join_web_path(path_components) + "/" + image_filename
+
+    joined_components = join_folder_path(path_components)
+    img_folder_path = join_path(tmp_folder_covers, joined_components)
+    img_file_path = join_path(img_folder_path, image_filename)
 
-    title.replace('"', '\"')
+    if not os.path.exists(img_folder_path):
+        os.makedirs(img_folder_path)
 
-    header = "+++\n"
-    header += 'title = "' + lang + title + '"\n'
-    header += 'template = "album/album-list.html"\n'
-    header += '[extra]\n'
-    header += 'display_name = "' + title + '"\n'
-    header += 'image_count = ' + str(folder["imageCount"]) + '\n'
+    if os.path.exists(img_file_path) and os.path.isfile(img_file_path):
+        return join_path(joined_components, image_filename)
 
-    if "cover" in folder and folder["cover"] is not None:
-        header += 'cover = "' + albums_url + "/" + base_uri + "/" + folder["cover"] + '"\n'
+    img_data = requests.get(url).content
+    img_file = open(img_file_path, "wb")
+    img_file.write(img_data)
+    img_file.close()
 
-    if created is not None:
-        header += 'date = "' + created.strftime("%Y-%m-%dT%H:%M:%S") + '"\n'
+    return join_path(joined_components, image_filename)
 
-    header += "+++\n"
+
+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
+
+    title = metadata["title"]
+    title = title.replace('"', '\"')
 
     if lang != "":
         lang = "." + lang
 
-    f = open(join_path(folder_path, "_index" + lang + ".md"), "w")
-    f.write(header)
+    f = open(join_path(tmp_folder_albums, join_folder_path(path_components), "_index" + lang + ".md"), "w")
+    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('[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'))
+
+    f.write("+++\n")
     f.close()
 
 
-def create_image_md(base_uri: str, folder_path: str, image_metadata: dict, lang: str) -> None:
-    filename = image_metadata["filename"]
+def create_image_md(path_components: list[str], tmp_folder_albums: str, metadata: dict, lang: str) -> None:
+    filename = metadata["filename"]
     filename = filename.replace('"', '\"')
-    slug_name = slugify(filename)
 
     if lang != "":
         lang = "." + lang
 
-    image_file = open(join_path(folder_path, slug_name + lang + ".md"), "w")
+    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")
+    image_file = open(image_file_path, "w")
 
     image_file.write("+++\n")
     image_file.write('title = "' + filename + '"\n')
     image_file.write('template = "album/album-single.html"\n')
+    image_file.write('sort_by = "title"\n')
 
     image_file.write('[extra]\n')
-    image_file.write('height = ' + str(image_metadata["height"]) + "\n")
-    image_file.write('width = ' + str(image_metadata["width"]) + "\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')
+
     # 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("+++\n")
     image_file.close()
 
 
-def create_album_folder(base_uri: str, base_path: str, album_metadata: dict) -> None:
-    base_uri = base_uri + "/" + album_metadata["foldername"]
-    directory_metadata = get_url_metadata(base_uri)
+def create_album_folder(path_components: list[str], tmp_folder_albums: str, tmp_folder_covers: str,
+                        metadata: dict) -> None:
+    path_components = path_components.copy()
+    path_components.append(metadata["foldername"])
+    joined_path = join_folder_path(path_components)
 
-    if 'time' in directory_metadata:
-        date = datetime.fromtimestamp(int(directory_metadata["time"]) / 1000)
-    else:
-        date = None
-
-    album_folder_slug = slugify(album_metadata["foldername"])
-    album_folder = join_path(base_path, album_folder_slug)
+    album_folder = join_path(tmp_folder_albums, joined_path)
     os.makedirs(album_folder)
 
-    create_index_md(base_uri, album_folder, album_metadata, "", date)
-    create_index_md(base_uri, album_folder, album_metadata, "en", date)
+    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")
 
-    for image_metadata in directory_metadata["images"]:
-        create_image_md(base_uri, album_folder, image_metadata, "")
-        create_image_md(base_uri, album_folder, image_metadata, "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")
 
     sub_threads = []
-    for sub_directory in directory_metadata["subDirs"]:
-        sub_thread = Thread(target=create_album_folder, args=(base_uri, album_folder, sub_directory))
+
+    for sub_directory in current_metadata["subDirs"]:
+        sub_thread = Thread(target=create_album_folder,
+                            args=(path_components, tmp_folder_albums, tmp_folder_covers, sub_directory))
         sub_thread.start()
         sub_threads.append(sub_thread)
 
     for sub_thread in sub_threads:
         sub_thread.join()
 
 
-current_path = tmp_folder
-base_metadata = get_url_metadata("")
+base_metadata = get_url_metadata([])
+
+tmp_ktt_ol_albums = tempfile.mkdtemp(prefix="ktt_ol_albums")
+tmp_ktt_ol_cover = tempfile.mkdtemp(prefix="ktt_ol_cover")
 
 threads = []
 for directory in base_metadata["subDirs"]:
-    thread = Thread(target=create_album_folder, args=("", current_path, directory))
+    thread = Thread(target=create_album_folder,
+                    args=([], tmp_ktt_ol_albums, tmp_ktt_ol_cover, directory)
+                    )
     thread.start()
     threads.append(thread)
 
 for thread in threads:
     thread.join()
 
-
-index_file = open(join_path(tmp_folder, "_index.md"), "w")
+index_file = open(join_path(tmp_ktt_ol_albums, "_index.md"), "w")
 index_file.write("+++\n")
 index_file.write("title = 'Fotoalben'\n")
 index_file.write("template = 'album/album-list.html'\n")
 index_file.write("+++\n")
 index_file.close()
 
-index_file = open(join_path(tmp_folder, "_index.en.md"), "w")
+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("+++\n")
 index_file.close()
 
-os.rename(tmp_folder, albums_path)
+os.rename(tmp_ktt_ol_albums, albums_path)
+os.rename(tmp_ktt_ol_cover, cover_path)

templates/album/album-list.html

@@ -7,15 +7,20 @@ <h4>
     </h4>
 
     <div class="image-gallery">
-        {% for subsection in section.subsections | reverse %}
+        {% for subsection in section.subsections %}
             {% set subsection_data = get_section(path=subsection) %}
 
             {% if subsection_data.pages | length > 0 %}
 
                 {% if subsection_data.extra.cover %}
-                    {% set image_uri = subsection_data.extra.cover %}
+                    {% set image_metadata = get_image_metadata(path=subsection_data.extra.cover) %}
+
+                    {% set scaling = 200 / image_metadata.height %}
                     {% set height = 200 %}
-                    {% set width = 750 %}
+                    {% set width = image_metadata.width * scaling %}
+
+                    {% set resized_image = resize_image(path=subsection_data.extra.cover, height=200, op="fit_height") %}
+                    {% set image_uri = resized_image.url %}
                 {% else %}
                     {% set latest_page = subsection_data.pages | first %}
 
@@ -34,29 +39,35 @@ <h4>
                     {% endif %}
                 {% endif %}
 
-                {% if subsection_data.extra.image_count %}
-                    {% set image_count = subsection_data.extra.image_count %}
-                {% else %}
-                    {% set image_count = subsection_data.pages | length %}
-                {% endif %}
-
                 <a href="{{ subsection_data.path }}"
                    class="text-decoration-none rounded-1 p-0 overflow-hidden border border-1"
                    style="height: {{ height }}px; width: {{ width }}px;">
                     <img alt=""
-                         loading="lazy"
                          class="p-0 m-0"
-                         decoding="async"
+                         decoding="sync"
                          src="{{ image_uri }}"/>
+                    <div class="float-start 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>
+                        <span class="text-white text-center">{{ subsection_data.extra.image_count }} {{ trans(key="images", lang=lang) }}</span>
+                    </div>
+                </a>
+            {% 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;">
+                    <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"
                          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>
-                        <span class="text-white">{{ subsection_data.pages | length }} {{ trans(key="images", lang=lang) }}</span>
+                        <span class="text-white">{{ subsection_data.extra.image_count }} {{ trans(key="images", lang=lang) }}</span>
                     </div>
                 </a>
-            {% else %}
-                <p>HIER MÜSSTE EIN LEERES ALBUM SEIN. <i>TODO</i></p>
             {% endif %}
         {% endfor %}
 

templates/album/album-single.html

@@ -4,7 +4,7 @@
 {% block extra_meta %}
 
     <meta property="og:type" content="article"/>
-    {{ self::ifs_metadata(image_filename=page.extra.file_uri, width=page.extra.width, title=page.title, height=page.extra.height) }}
+    {{ self::album_metadata(image_uri=page.extra.file_uri, width=page.extra.width, title=page.title, height=page.extra.height) }}
 
 {% endblock extra_meta %}
 

templates/macros.html

@@ -65,16 +65,15 @@
     <meta name="article:published_time" content="{{ created }}"/>
 {% endmacro %}
 
-{% macro ifs_metadata(image_filename, width, height, title, preview_size=750) %}
+{% macro album_metadata(image_uri, width, height, title, preview_size=750) %}
 
     {% set scaling = preview_size / height %}
     {% set scaled_height = preview_size | round(precision=2) %}
     {% set scaled_width = (width * scaling) | round(precision=2) %}
-    {% set image_url = config.extra.ifs_base_path ~ "/.thumbs/" ~ preview_size ~ "-" ~ image_filename %}
 
     <meta property="og:type" content="article"/>
     {{ self::og_image(
-            image_url=image_url,
+            image_url=image_uri,
             width=scaled_width,
             height=scaled_height,
             author=config.author,
@@ -83,7 +82,7 @@
             )
             }}
 
-    {{ self::sd_image(image_url=image_url, title=title, author=config.author) }}
+    {{ self::sd_image(image_url=image_uri, title=title, author=config.author) }}
 
 {% endmacro %}