Created
August 24, 2025 08:37
-
-
Save steve214724/f92d95950655793b4c30614c2dd72ff8 to your computer and use it in GitHub Desktop.
Steev Galerie python to HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import os | |
| # === Ordner auf deinem PC === | |
| main_folder = r"C:\Users\steph\Pictures\Graffiti\images\puzzlaz\2025" | |
| thumb_folder = os.path.join(main_folder, "thumbs") | |
| # === relative Web-Pfade (so wie sie auf dem Server liegen) === | |
| URL_MAIN = "images/puzzlaz/2025" | |
| URL_THUMB = "images/puzzlaz/2025/thumbs" | |
| output_file = "pz.html" | |
| image_extensions = (".jpg", ".jpeg", ".png") | |
| # --- HTML Start --- | |
| html_output = """<!doctype html> | |
| <html lang="de"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Puzzlaz Galerie 2025</title> | |
| <style> | |
| body { font-family: Arial, sans-serif; background:#f8f9fa; margin:0; padding:20px;} | |
| h1 { text-align:center; margin-bottom:30px; } | |
| .accordion { cursor:pointer; padding:15px; margin:5px 0; background:#007BFF; color:white; | |
| border:none; outline:none; font-size:1.1rem; text-align:left; border-radius:8px; position:relative;} | |
| .accordion::after { content:'\\25BC'; position:absolute; right:20px; transition:transform 0.3s;} | |
| .accordion.active::after { transform:rotate(180deg);} | |
| .panel { max-height:0; overflow:hidden; transition:max-height 0.4s ease; background:white; border-radius:8px; padding:0 15px;} | |
| .gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); gap:12px; margin-top:12px;} | |
| .gallery figure { margin:0;} | |
| .gallery img { width:100%; height:auto; border-radius:10px; box-shadow:0 2px 6px rgba(0,0,0,.15);} | |
| figcaption { text-align:center; font-size:14px; color:#555; margin-top:4px;} | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Puzzlaz Galerie</h1> | |
| <button class="accordion">📁 2025</button> | |
| <div class="panel"> | |
| <div class="gallery"> | |
| """ | |
| # --- Bilder sammeln --- | |
| for file in sorted(os.listdir(main_folder)): | |
| if file.lower().endswith(image_extensions) and os.path.isfile(os.path.join(main_folder, file)): | |
| thumb_path = f"{URL_THUMB}/{file}" | |
| full_path = f"{URL_MAIN}/{file}" | |
| # Caption: Dateiendung weg, "-" zu Leerzeichen, "by" zu "von" | |
| caption = os.path.splitext(file)[0] | |
| caption = caption.replace("-", " ").replace("by", "von") | |
| html_output += f""" | |
| <figure> | |
| <a href="{full_path}" target="_blank"> | |
| <img src="{thumb_path}" alt="{caption}"> | |
| </a> | |
| <figcaption>{caption}</figcaption> | |
| </figure>""" | |
| # --- HTML Ende --- | |
| html_output += """ | |
| </div> | |
| </div> | |
| <script> | |
| const acc=document.getElementsByClassName("accordion"); | |
| for(let i=0;i<acc.length;i++){acc[i].addEventListener("click",function(){ | |
| this.classList.toggle("active"); | |
| let panel=this.nextElementSibling; | |
| if(panel.style.maxHeight){panel.style.maxHeight=null;}else{panel.style.maxHeight=panel.scrollHeight+"px";} | |
| });} | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # --- Datei speichern --- | |
| with open(output_file, "w", encoding="utf-8") as f: | |
| f.write(html_output) | |
| print(f"✅ Galerie erstellt: {output_file}") |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment