gabriel/computerschaf
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Use image thumbnails

Browse source
This commit is contained in:
Gabriel Huber 2023-02-23 00:46:24 +01:00
parent bbf1e8ce9e
commit 9ca3c60df9
9 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
static/img/fotos/datentraeger_240.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 58 KiB

BIN
static/img/fotos/datentraeger_360.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 73 KiB

BIN
static/img/fotos/datentraeger_480.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 93 KiB

BIN
static/img/fotos/laptop_matte_240.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 70 KiB

BIN
static/img/fotos/laptop_matte_360.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 97 KiB

BIN
static/img/fotos/laptop_matte_480.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 130 KiB

12
static/img/fotos/thumbnail.py Executable file
View file

@ -0,0 +1,12 @@
#!/usr/bin/python3
import sys
import pathlib
import subprocess
SIZES = [(320, 240), (480, 360), (640, 480)]
image_path = pathlib.Path(sys.argv[1])
for width, height in SIZES:
thumb_name = image_path.with_name(f"{image_path.stem}_{height}.webp")
print(f"Generating {width}x{height} at {thumb_name}")
subprocess.run(["convert", str(image_path), "-resize", f"{width}x{height}", thumb_name])

2
templates/_base.html
View file

@ -1,5 +1,5 @@
<!DOCTYPE html>
<html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

20
templates/index.html
View file

@ -77,7 +77,15 @@
</p>
</div>
<div class="split-section-img">
<img width="4896" height="3672" src="static/img/fotos/laptop_matte.jpeg" alt="Laptop zur Reparatur geöffnet auf einer Arbeitsunterlage">
<a href="static/img/fotos/laptop_matte.jpeg">
<img
width="320" height="240" src="static/img/fotos/laptop_matte_240.webp"
srcset="static/img/fotos/laptop_matte_240.webp 1x,
static/img/fotos/laptop_matte_360.webp 1.5x,
static/img/fotos/laptop_matte_480.webp 2x"
alt="Laptop zur Reparatur geöffnet auf einer Arbeitsunterlage"
>
</a>
</div>
</div>
</div>
@ -108,7 +116,15 @@
</p>
</div>
<div class="split-section-img">
<img width="4896" height="3672" src="static/img/fotos/datentraeger.jpeg" alt="Geöffnetes Gehäuse eines SSD Datenträgers">
<a href="static/img/fotos/datentraeger.jpeg">
<img
width="320" height="240" src="static/img/fotos/datentraeger_240.webp"
srcset="static/img/fotos/datentraeger_240.webp 1x,
static/img/fotos/datentraeger_360.webp 1.5x,
static/img/fotos/datentraeger_480.webp 2x"
alt="Geöffnetes Gehäuse eines SSD Datenträgers"
>
</a>
</div>
</div>
</div>