prettier photos page, higher quality previews

photospagegen.py

@@ -12,21 +12,16 @@ def create_image_viewer():
     # Create thumbnails directory
     thumbnails_dir = os.path.join(output_dir, '.vuepress', 'public', 'thumbnails')
     os.makedirs(thumbnails_dir, exist_ok=True)
-
-    # Function to process images in a directory
+
     def process_directory(directory, relative_path=''):
         html_content = ''
         for item in os.listdir(directory):
             item_path = os.path.join(directory, item)
             relative_item_path = os.path.join(relative_path, item)
             if os.path.isdir(item_path):
-                # Add folder to HTML content
-                html_content += f'<h2>{item}</h2>\n'
-                html_content += '<div class="image-grid">\n'
-                html_content += process_directory(item_path, relative_item_path)
-                html_content += '</div>\n'
+                # Process subdirectories (you may want to add recursive handling here)
+                pass
             elif item.lower().endswith(('.png', '.jpg', '.jpeg', '.gif')):
-                # Process image file
                 with Image.open(item_path) as img:
                     creation_date = datetime.fromtimestamp(os.path.getmtime(item_path))
                     folder_name = creation_date.strftime('%Y-%m-%d')
@@ -39,18 +34,22 @@ def process_directory(directory, relative_path=''):
                     shutil.copy(item_path, folder_path)
 
                     # Create and save thumbnail
-                    img.thumbnail((200, 200))
+                    img.thumbnail((900, 900), Image.LANCZOS)
                     thumbnail_name = f"thumb_{relative_item_path.replace(os.path.sep, '_')}"
                     thumbnail_path = os.path.join(thumbnails_dir, thumbnail_name)
-                    img.save(thumbnail_path)
+                    img.save(thumbnail_path, quality=95)
 
                 # Add image to HTML content
                 html_content += f'''
 <div class="image-item">
-    <a href="/{os.path.join(relative_path, folder_name, item)}" target="_blank">
-        <img src="/thumbnails/{thumbnail_name}?url" alt="{item}">
+    <a href="/{os.path.join(relative_path, folder_name, item)}" target="_blank" class="image-link">
+        <img src="/thumbnails/{thumbnail_name}?url" alt="{item}" loading="lazy">
+        <div class="image-overlay">
+            <p class="image-title">{item}</p>
+            <p class="image-date">{folder_name}</p>
+        </div>
+        <br></br>
     </a>
-    <p>{item}<br>{folder_name}</p>
 </div>
                 '''
 
@@ -63,21 +62,101 @@ def process_directory(directory, relative_path=''):
 createTime: {datetime.now().strftime('%Y/%m/%d %H:%M:%S')}
 permalink: /photos
 ---
-# Image Viewer
 
 <ClientOnly>
 <div class="image-viewer">
     {process_directory('src/.vuepress/public/img/archive')}
 </div>
 </ClientOnly>
 
+<style>
+.image-viewer {{
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}}
+
+.folder-title {{
+    font-size: 24px;
+    margin-top: 40px;
+    margin-bottom: 20px;
+    color: #333;
+    border-bottom: 2px solid #eee;
+    padding-bottom: 10px;
+}}
+
+.image-grid {{
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    gap: 20px;
+    margin-bottom: 40px;
+}}
+
+.image-item {{
+    position: relative;
+    overflow: hidden;
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+    aspect-ratio: 1 / 1;
+}}
+
+.image-item:hover {{
+    transform: translateY(-5px);
+}}
+
+.image-link {{
+    display: block;
+    position: relative;
+    width: 100%;
+    height: 100%;
+}}
+
+.image-link img {{
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}}
+
+.image-overlay {{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 10px;
+    transform: translateY(100%);
+    transition: transform 0.3s ease;
+}}
+
+.image-item:hover .image-overlay {{
+    transform: translateY(0);
+}}
+
+.image-title {{
+    margin: 0;
+    font-size: 14px;
+    font-weight: bold;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}}
+
+.image-date {{
+    margin: 5px 0 0;
+    font-size: 12px;
+    opacity: 0.8;
+}}
+</style>
 '''
 
     # Write VuePress page file
     with open(os.path.join(output_dir, 'photos.md'), 'w') as f:
         f.write(page_content)
-
-    print("VuePress page created successfully in the 'src/photos.md' file.")
+    
+    print("Modern VuePress page created successfully in the 'src/photos.md' file.")
 
 if __name__ == "__main__":
     create_image_viewer()