Dwie opcje obok siebie na skośnym podziale, z logo, nazwami i znaczkiem VS.
To prawdziwy render z API z przykładowymi wartościami z tabeli niżej, w rozmiarze 1200×630.
Do artykułów „X vs Y", stron z alternatywami i serwisów z recenzjami. Każda strona ma własny kolor — accent po lewej, accent_b po prawej — a kolor tekstu po każdej stronie się do niego dopasowuje.
Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.
| Pole | Typ | Opis | Przykład |
|---|---|---|---|
left |
tekst | Nazwa pierwszej opcji. domyślnie: Option A | PostgreSQL |
right |
tekst | Nazwa drugiej opcji. domyślnie: Option B | MySQL |
title |
tekst | Pytanie na górze kadru. | Which database for your next SaaS? |
left_note |
tekst | Jedna linijka o pierwszej opcji. | Extensions, JSONB, strict types |
right_note |
tekst | Jedna linijka o drugiej opcji. | Simple replication, huge ecosystem |
accent_b |
kolor | Kolor tła prawej strony, w zapisie hex. domyślnie: #111827 | — |
site |
tekst | Twoja domena albo krótki adres. | stackdecisions.dev |
left_logo |
adres obrazka | Logo pierwszej opcji. | https://example.com/images/logo-p.png |
right_logo |
adres obrazka | Logo drugiej opcji. | https://example.com/images/logo-m.png |
accent |
kolor | Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #2563eb | #2563eb |
theme |
dark | light | Schemat kolorów: dark albo light. | — |
Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.
curl -X POST "https://imageapi.benchkithq.com/v1/images?wait=true" \
-H "Authorization: Bearer sk_live_YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{
"template": "comparison",
"modifications": {
"left": "PostgreSQL",
"right": "MySQL",
"title": "Which database for your next SaaS?",
"left_note": "Extensions, JSONB, strict types",
"right_note": "Simple replication, huge ecosystem",
"site": "stackdecisions.dev",
"left_logo": "https://example.com/images/logo-p.png",
"right_logo": "https://example.com/images/logo-m.png"
}
}'
Dla stron statycznych, Webflow, Shopify i narzędzi no-code: pola idą w query stringu, a całość podpisujesz swoim sekretem. Pierwsze żądanie renderuje obrazek, każde kolejne to przekierowanie na gotowy plik. Jak policzyć podpis.
<meta property="og:image" content="https://imageapi.benchkithq.com/i/acc_YOUR_ACCOUNT_ID/comparison.png?left=PostgreSQL&left_note=Extensions%2C%20JSONB%2C%20strict%20types&right=MySQL&right_note=Simple%20replication%2C%20huge%20ecosystem&site=stackdecisions.dev&title=Which%20database%20for%20your%20next%20SaaS%3F&s=YOUR_SIGNATURE">
accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.
curl -X POST "https://imageapi.benchkithq.com/v1/templates/library/comparison/copy" \
-H "Authorization: Bearer sk_live_YOUR_KEY"
Wpis na blogu
Oferta pracy
Wydarzenie
Odcinek podcastu
Changelog / wydanie
Strona dokumentacji
Oferta nieruchomości
Karta produktu
Produkt w promocji
Lekcja kursu
Przepis
Wydanie newslettera
Karta z cytatem
Case study / opinia klienta
Repozytorium GitHub
Zapowiedź funkcji
Profil / karta autora
Wyróżniona liczba