comparison

Szablon obrazka OG: porównanie (A vs B)

Dwie opcje obok siebie na skośnym podziale, z logo, nazwami i znaczkiem VS.

Szablon obrazka Open Graph „porównanie (A vs B)” wyrenderowany przez Image API

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.

Pola

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. —

Wyrenderuj go jednym żądaniem

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"
    }
}'

Albo wklej podpisany adres w og:image

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">

Dopasuj do siebie

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"

Więcej szablonów obrazków OG

Wszystkie szablony →