# Placeholder Service — Manual
> Vollständige Funktionsbeschreibung des Placeholder Service: das öffentliche URL-Schema mit allen Parametern und Grenzen, jede Option der Oberfläche, PNG- und SVG-Ausgabe.
Source: https://www.jpkc.com/db/tools/ph/manual/
Zurück zur Übersicht: [Placeholder Service](https://www.jpkc.com/db/tools/ph/) · Tool live öffnen: [www.jpkc.com/tools/ph/](https://www.jpkc.com/tools/ph/)
Dieses Manual beschreibt den **Placeholder Service** vollständig: das öffentlich aufrufbare URL-Schema mit allen Parametern und Grenzen, jede Option der Oberfläche und die zwei Ausgabewege PNG (Server) und SVG (Browser). Die Oberfläche des Tools ist auf Englisch — die Karten- und Button-Bezeichnungen stehen hier deshalb in ihrer englischen Original-Schreibweise (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.
## Die Oberfläche im Überblick
Die Generator-Seite ist zweispaltig: links die Ausgaben (**Preview**, **Generated Code**, **Direct URL**, **API Usage**), rechts die Eingaben (**Dimensions**, **Colors**, **Text Options**, **Actions**, **SVG Output**). Du stellst rechts etwas ein, links aktualisieren sich URL und Code sofort — nur die Bild-Vorschau lädst du bewusst per Knopf neu (siehe [Vorschau und Code-Ausgabe](#vorschau-und-code-ausgabe)). Die Voreinstellung ist ein **800 × 600**-Bild mit dunklem Hintergrund (`3c4955`) und hellem Text (`eeeeee`), das die Maße „800 x 600" anzeigt.
## Das URL-Schema (die eigentliche API)
Der Kern des Tools ist ein **echtes, öffentliches URL-Schema**: Jedes Platzhalter-Bild lässt sich allein durch den Aufruf einer Adresse erzeugen — ohne die Oberfläche, ohne Account, ohne Datei-Download. Der Server generiert daraus on-the-fly ein PNG.
### Aufbau der Adresse
Basis ist die Tool-URL, gefolgt von einem Parameter-Segment und einem Trailing-Slash:
```
https://www.jpkc.com/tools/ph/?BREITExHÖHE-HINTERGRUND-TEXTFARBE/
https://www.jpkc.com/tools/ph/?BREITExHÖHE-HINTERGRUND-TEXTFARBE-Text/
```
Das Segment besteht aus **drei oder vier** mit Bindestrich getrennten Teilen: zuerst die Maße als `BREITExHÖHE`, dann die Hintergrundfarbe, dann die Textfarbe und optional als vierter Teil ein eigener Text. Die optionalen Query-Parameter (siehe unten) hängst du **nach** dem Trailing-Slash mit `&` an.
### Pflicht-Parameter
| Teil | Bedeutung | Format / Grenze |
| --- | --- | --- |
| **W** | Breite | Ganzzahl 1–3200 |
| **H** | Höhe | Ganzzahl 1–3200 |
| **BG** | Hintergrundfarbe | 6-stelliger Hex **ohne** `#` (z. B. `cccccc`) |
| **TXT** | Textfarbe | 6-stelliger Hex **ohne** `#` (z. B. `333333`) |
| **Text** | Custom-Text (optional) | Buchstaben, Zahlen, Leerzeichen; `+` = Leerzeichen; max. 255 Zeichen |
Maße und Farben sind also immer Pflicht; der Text ist optional. Lässt du den Text weg, zeigt das Bild die Maße als „W x H".
### Optionale Query-Parameter
Diese hängst du hinter dem Trailing-Slash an (mit `&` verbunden):
| Parameter | Wirkung |
| --- | --- |
| `&size=small\|medium\|large\|xlarge` | Feste Textgröße statt automatischer Skalierung (Default: `auto`) |
| `¬ext=1` | Blendet **jeden** Text aus — reine Farbfläche |
| `&nodim=1` | Blendet die Maße-Zeile aus — zeigt nur den Custom-Text (nur sinnvoll, wenn ein Custom-Text gesetzt ist) |
### Beispiel-URLs
```
# 600 x 400, hellgrau, dunkler Text, zeigt die Maße
https://www.jpkc.com/tools/ph/?600x400-cccccc-333333/
# 800 x 600 in Markenfarben mit eigenem Text (Leerzeichen als +)
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Hello+World/
# große Schrift erzwingen
https://www.jpkc.com/tools/ph/?1200x630-264653-e9c46a-Cover/&size=xlarge
# nur Farbfläche, kein Text
https://www.jpkc.com/tools/ph/?300x250-eeeeee-eeeeee/¬ext=1
# nur der Custom-Text, ohne Maße-Zeile
https://www.jpkc.com/tools/ph/?800x600-3c4955-eeeeee-Sale/&nodim=1
```
### Validierung und Grenzen
Der Server prüft jede Adresse, bevor er ein Bild erzeugt:
- Das Segment muss **3 oder 4** Teile haben und der erste Teil exakt das Muster `BREITExHÖHE`. Hintergrund und Textfarbe müssen aus **Hex-Ziffern** bestehen und werden auf **genau 6 Zeichen** geprüft.
- Maße müssen numerisch sein und werden hart auf den Bereich **1–3200** begrenzt (`PH_MAX_DIMENSION`). Größere oder kleinere Werte werden zurechtgestutzt.
- Der Custom-Text wird gefiltert: `+` wird zu einem Leerzeichen, alles außer **Buchstaben, Ziffern und Leerzeichen** wird **entfernt**, und der Rest auf **255 Zeichen** gekürzt (`PH_MAX_TEXT_LENGTH`). Umlaute, Satzzeichen und Sonderzeichen fallen also weg.
- **Wichtig:** Passt eine Adresse nicht ins Schema (falsche Teil-Anzahl, ungültige Farbe), liefert der Server **kein Fehlerbild**, sondern zeigt die **Generator-Oberfläche** an. Eine kaputte Bild-URL erscheint im `` also als „defektes Bild", weil HTML zurückkommt statt PNG.
## Maße (Dimensions)
Die **Dimensions**-Karte hat zwei Zahlenfelder **Width** und **Height** (je 1–3200). Ein **Swap dimensions**-Knopf (Pfeil-Symbol) vertauscht Breite und Höhe — praktisch, um vom Quer- ins Hochformat zu wechseln. Darunter liegen vier **Presets**-Dropdowns mit fertigen Maßen; ein Klick auf einen Eintrag setzt Breite und Höhe (siehe [Presets](#presets-fertige-masse)).
## Farben (Colors)
Die **Colors**-Karte hat zwei Felder, **Background Color** und **Text Color**, jeweils über einen Farbwähler bedienbar (Hex-Format, mit einer Reihe vordefinierter Swatches). Ein **Swap colors**-Knopf tauscht Hinter- und Vordergrundfarbe — nützlich, um schnell eine helle und eine dunkle Variante zu vergleichen. Im URL-Schema landen diese Werte als 6-stelliger Hex ohne `#`.
## Text-Optionen (Text Options)
Die **Text Options**-Karte steuert, was auf dem Bild steht:
- **Show text on image** — Hauptschalter für den Text. Aus → das Bild ist eine reine Farbfläche (entspricht `notext=1`).
- **Show resolution (width × height)** — blendet die Maße-Zeile ein oder aus. Dieser Schalter ist **nur aktiv**, wenn Text gezeigt wird **und** ein Custom-Text gesetzt ist — sonst hätte das Bild gar keinen Text mehr, was nicht erlaubt ist. Aus → nur der Custom-Text erscheint (entspricht `nodim=1`).
- **Custom Text** — dein eigener Text (max. 255 Zeichen). Erlaubt sind nur Buchstaben, Zahlen und Leerzeichen; tippst du andere Zeichen, meldet das Feld „Only letters, numbers, and spaces allowed" und filtert sie heraus. Leer lassen → das Bild zeigt nur die Maße.
- **Text Size** — Auto (an die Bildgröße angepasst), Small, Medium, Large oder Extra Large. Bei `auto` skaliert die Schrift mit der kleineren Bildseite; die festen Größen entsprechen 12, 24, 48 bzw. 72 Punkt.
Sind Custom-Text **und** Maße sichtbar, rendert das Bild **zwei Zeilen**: oben der Custom-Text, darunter die Maße.
## Vorschau und Code-Ausgabe
Drei Karten links zeigen das Ergebnis:
- **Preview** — die Bild-Vorschau mit einem Badge, das die aktuellen Maße nennt. Sie aktualisiert sich **nicht automatisch**: Nach jeder Änderung wird der Knopf **Update Preview** aktiv; ein Klick lädt das Bild neu (mit einem Cache-Buster, damit der Browser nicht die alte Version zeigt). Das spart Server-Requests, während du noch an den Einstellungen drehst.
- **Generated Code** — der fertige ``-Tag inklusive `src`, `alt`, `width` und `height`, mit **Copy**-Knopf.
- **Direct URL** — die reine Bild-URL nach dem Schema oben, ebenfalls mit **Copy**-Knopf.
Eine **API Usage**-Karte fasst das URL-Format und die Parameter direkt im Tool zusammen — dieselben Angaben wie oben in diesem Manual.
## PNG- und SVG-Download
Die **Actions**-Karte bietet zwei Downloads:
- **Download PNG** — speichert das serverseitig erzeugte PNG als `placeholder-WxH.png`. Dieser Weg nutzt genau das URL-Schema.
- **Download SVG** — speichert die im Browser erzeugte SVG-Variante als `placeholder-WxH.svg`.
## SVG-Ausgabe im Detail
Die **SVG Output**-Karte ist eine eigenständige, **rein clientseitige** Funktion — sie erzeugt aus deinen Einstellungen eine SVG-Grafik **ohne** Server-Request. Oben siehst du eine Live-SVG-Vorschau, darunter drei Tabs mit Copy-Knopf:
- **SVG Source** — der rohe `