course-lesson

Szablon obrazka OG: lekcja kursu

Nazwa kursu, numer lekcji, tytuł, prowadzący i pasek postępu na pełnym kolorze.

Szablon obrazka Open Graph „lekcja kursu” wyrenderowany przez Image API

To prawdziwy render z API z przykładowymi wartościami z tabeli niżej, w rozmiarze 1200×630.

Dla platform kursowych, kohort i serii na YouTubie. Cały kadr ma kolor akcentu, a kolor tekstu się do niego dopasowuje — żółta marka dostaje ciemny tekst sama. Pasek postępu pokazuje, jak daleko w kursie jest ta lekcja.

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
title tekst Tytuł lekcji. domyślnie: Lesson title Designing idempotent REST APIs
course tekst Nazwa kursu. API Design Masterclass
lesson tekst Etykieta lekcji, np. Lekcja 4 z 12. Lesson 4 of 12
instructor tekst Imię i nazwisko prowadzącego. Daniel Okafor
duration tekst Czas trwania, np. 48 min. 18 min
progress tekst Postęp w kursie, liczba od 0 do 100. 33
site tekst Twoja domena albo krótki adres. learn.northwind.dev
photo adres obrazka Zdjęcie prowadzącego. https://example.com/images/avatar-man.jpg
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #7c3aed #7c3aed
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": "course-lesson",
    "modifications": {
        "title": "Designing idempotent REST APIs",
        "course": "API Design Masterclass",
        "lesson": "Lesson 4 of 12",
        "instructor": "Daniel Okafor",
        "duration": "18 min",
        "progress": 33,
        "site": "learn.northwind.dev",
        "photo": "https://example.com/images/avatar-man.jpg"
    }
}'

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/course-lesson.png?course=API%20Design%20Masterclass&duration=18%20min&instructor=Daniel%20Okafor&lesson=Lesson%204%20of%2012&progress=33&site=learn.northwind.dev&title=Designing%20idempotent%20REST%20APIs&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/course-lesson/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Więcej szablonów obrazków OG

Wszystkie szablony →