E-Mails: Import-Pakete für Mailjet und Logo ohne Hintergrund

Jede Mailjet-Mail als ZIP (HTML oben, Bilder in images/) zum Import über
„Mit HTML programmieren“. Packen mit quelle/pakete.py. Anleitung ergänzt.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

E-Mails/README.md

@@ -16,12 +16,28 @@
 | `bilder/banner/` | 14 Banner für die Mails in Mailjet | in Mailjet hochladen |
 | `bilder/webinargeek/` | 4 Banner für B0 bis B3 | für Dejan in WebinarGeek |
 | `bilder/logo-hivegrid.png`, `signatur-noah.png`, `heft-klein.png` | Logo, Signatur mit Foto, Heft-Bild | in jede Mail |
+| `bilder/logo-hivegrid-transparent.png` | Logo ohne Hintergrund | für Kopfbereiche in anderer Farbe |
+| `mailjet-import/*.zip` | jede Mailjet-Mail als ZIP mit HTML und Bildern | **schnellster Weg**, direkt in Mailjet importieren |
 | `quelle/` | Werkzeug, aus dem die Bilder und Vorschauen entstehen | nur zum neu Erzeugen, siehe unten |
 
 ---
 
 ## So gehst du in Mailjet vor
 
+### Am schnellsten: als ZIP importieren
+
+Jede Mail ist fertig gepackt, mit Text, Bildern und Buttons. Mailjet lädt die Bilder beim Import selbst hoch.
+
+1. In Mailjet unter **Meine Marketing-Vorlagen** auf **Neue Vorlage erstellen**, dann **Mit HTML programmieren** und die ZIP-Datei hochladen, z. B. `mailjet-import/k03.zip`.
+2. In der Vorlage **„[Vorname]“** durch die Personalisierung ersetzen (Eigenschaft `anrede`, siehe Platzhalter).
+3. **`{{ABMELDEN}}`** durch Mailjets Abmelde-Link ersetzen, **`{{HEFT_LINK}}`** und **`{{HARIS_LINK}}`** durch die Links von Dejan.
+4. Vorlage speichern und daraus die Kampagne anlegen. Betreff und Vorschautext stehen oben in der Datei und im PDF.
+5. Testmail schicken und prüfen, dass Mailjet nichts verschoben hat.
+
+Mailjet sagt dazu selbst, dass es eigenes HTML nicht prüft. Deshalb ist die Testmail Pflicht. Ändert sich eine Mail in `mails/`, die ZIPs neu packen mit `python3 quelle/pakete.py`.
+
+### Oder im Drag-and-drop-Editor nachbauen
+
 1. **Bilder hochladen:** alles aus `bilder/banner/`, dazu Logo, Signatur und Heft-Bild.
 2. **Einmal die Vorlage bauen**, nach `mails/k03.html` (das ist die Muster-Mail). Die Werte stehen unten unter „Gestaltung“. Als Vorlage speichern.
 3. **Für jede Mail die Vorlage kopieren:**
@@ -33,12 +49,7 @@
 4. **Platzhalter ersetzen**, siehe unten.
 5. **Testen und einplanen**, wie in der Planung (`../webinar/mail-strecke/README.md`, Schritt 5).
 
-Statt Drag-and-drop geht auch HTML: Bietet Mailjet beim Anlegen eigenes HTML an, kannst du die Datei aus `mails/` nehmen.
-- Vorher die Bildpfade (`../bilder/…`) durch die Adressen der hochgeladenen Bilder ersetzen.
-- Die Platzhalter ersetzen.
-- Den Abmelde-Link von Mailjet einsetzen.
-
-Prüf dann in der Testmail, dass Mailjet nichts verschoben hat.
+**Eigene Bilder in den Editor:** Den Baustein **Bild** in die Spalte ziehen, dann **Bild aus Galerie einfügen** und über **Hochladen** die Datei von hier wählen. Danach unter **Bearbeiten** Breite und Alt-Text setzen. Mailjet nimmt Bilder bis 2 MB, empfiehlt unter 200 KB. Alle Bilder hier liegen darunter.
 
 ---
 

E-Mails/quelle/bilder.html

@@ -275,6 +275,8 @@ function banner(id) {
 
 const BAUSTEINE = {
   logo: () => `<div class="logo"><img src="logo/hivegrid.svg" alt=""></div>`,
+  // Logo ohne Hintergrund, für Kopfbereiche in anderer Farbe (z. B. im Mailjet-Editor)
+  logofrei: () => { document.documentElement.style.background = document.body.style.background = "transparent"; return `<div class="logo" style="background:transparent"><img src="logo/hivegrid.svg" alt=""></div>`; },
   signatur: () => `<div class="signatur"><div class="rund"><img src="zeichnungen/noah-kopf.png" alt=""></div>
     <div><b>Noah Geerkens</b><span>Inhaber Geerkens GmbH, Rheinberg</span><i>Vierte Generation, seit 1948</i></div></div>`,
   heftklein: () => `<div class="heftklein"><img src="zeichnungen/heft-titel.png" alt=""></div>`,

E-Mails/quelle/erzeugen.sh

@@ -30,6 +30,7 @@ b1 1200 600 webinargeek/b1-morgen-abend-18-uhr
 b2 1200 600 webinargeek/b2-heute-abend-18-uhr
 b3 1200 600 webinargeek/b3-in-einer-stunde
 logo 456 120 logo-hivegrid
+logofrei 456 120 logo-hivegrid-transparent
 signatur 900 220 signatur-noah
 heftklein 260 360 heft-klein'
 
@@ -40,7 +41,7 @@ echo "$LISTE" | while read -r id breite hoehe datei; do
   fi
   "$CHROME" --headless=new --disable-gpu --hide-scrollbars --force-device-scale-factor=1 \
     --allow-file-access-from-files --virtual-time-budget=8000 \
-    --window-size="$breite,$hoehe" --screenshot="$TMP/$id.png" "$QUELLE?id=$id" >/dev/null 2>&1
+    --default-background-color=00000000 --window-size="$breite,$hoehe" --screenshot="$TMP/$id.png" "$QUELLE?id=$id" >/dev/null 2>&1
   if [ "$breite" = 1200 ]; then
     sips -s format jpeg -s formatOptions 84 "$TMP/$id.png" --out "$ZIEL/$datei.jpg" >/dev/null
     echo "$ZIEL/$datei.jpg"

E-Mails/quelle/pakete.py

@@ -0,0 +1,40 @@
+#!/usr/bin/env python3
+"""Packt jede Mailjet-Mail als ZIP zum Import in Mailjet.
+
+Mailjet: „Meine Marketing-Vorlagen“ → „Neue Vorlage erstellen“ → „Mit HTML
+programmieren“ → ZIP hochladen. Erwartet wird die HTML-Datei oben im ZIP und
+die Bilder in einem eigenen Ordner, mit relativen Pfaden wie ./images/bild.jpg.
+
+Legt ../mailjet-import/<kennung>.zip an. B0 bis B3 fehlen, die laufen über
+WebinarGeek. Erneut ausführen, wenn sich eine Mail in ../mails/ ändert.
+"""
+
+import re
+import zipfile
+from pathlib import Path
+
+HIER = Path(__file__).resolve().parent
+MAILS = HIER.parent / "mails"
+BILDER = HIER.parent / "bilder"
+ZIEL = HIER.parent / "mailjet-import"
+MAILJET = ["k01", "k02", "k03", "k04", "k07", "k08", "k09", "k10", "k11", "b4a", "b4b", "b4c", "b5", "b6"]
+BILD = re.compile(r'src="\.\./bilder/((?:banner/|webinargeek/)?([^"/]+))"')
+
+
+def main():
+    ZIEL.mkdir(exist_ok=True)
+    for kennung in MAILJET:
+        html = (MAILS / f"{kennung}.html").read_text(encoding="utf-8")
+        dateien = {name: BILDER / pfad for pfad, name in BILD.findall(html)}
+        html = BILD.sub(lambda m: f'src="./images/{m.group(2)}"', html)
+        html = html.replace("Bilder liegen in ../bilder/.", "Bilder liegen im Ordner images/.")
+        ziel = ZIEL / f"{kennung}.zip"
+        with zipfile.ZipFile(ziel, "w", zipfile.ZIP_DEFLATED) as z:
+            z.writestr(f"{kennung}.html", html)
+            for name, pfad in sorted(dateien.items()):
+                z.write(pfad, f"images/{name}")
+        print(f"{ziel.name}: {len(dateien)} Bilder, {ziel.stat().st_size // 1024} KB")
+
+
+if __name__ == "__main__":
+    main()