Szablon obrazka OG: Stos technologiczny

og1200×630 square1080×1080 portrait1080×1350 story1080×1920 pinterest1000×1500 youtube1280×720

Szablon obrazka Open Graph „Stos technologiczny” wyrenderowany przez Shareglint

Szablon Stos technologiczny w rozmiarze square (1080×1080)

Szablon Stos technologiczny w rozmiarze portrait (1080×1350)

Szablon Stos technologiczny w rozmiarze story (1080×1920)

Szablon Stos technologiczny w rozmiarze pinterest (1000×1500)

Szablon Stos technologiczny w rozmiarze youtube (1280×720)

To prawdziwe rendery z API z przykładowymi wartościami z tabeli niżej. Przełącz rozmiar wyżej: ten sam szablon układa się w każdym z 6 rozmiarów — wyślij size albo sizes w zapytaniu.

Dla programistów, agencji i ogłoszeń o pracę, które pokazują, na czym zbudowano projekt. Każda pozycja to jedna płyta z logo na boku; pozycja bez logo dostaje inicjały. Szerokie kadry mieszczą sześć płyt, kwadratowe osiem, pionowe dziesięć; ponad to ostatnia płyta jest przerywaną warstwą „+N more”, a przy wysokim stosie płyty robią się cieńsze. Bez pozycji stos pokazuje trzy puste płyty. W szerokich kadrach tytuł stoi po lewej, w kwadratowych i pionowych na górze.

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	Nagłówek, np. Zbudowane na albo Na czym działa Northwind. domyślnie: Built with	What powers Northwind
`project`	tekst	Nazwa projektu nad tytułem.	Northwind image API
`items`	tekst	Pozycje rozdzielone `;`, każda jako nazwa\|rola, rola opcjonalna, np. Laravel\|Aplikacja i API;PostgreSQL\|Baza danych. Pierwsza pozycja to górna płyta.	Laravel\|App and API;PostgreSQL\|Database;Redis\|Queues and cache;Headless Chrome\|Rendering;Docker\|Deploys;Go\|Egress proxy
`url`	tekst	Adres projektu w małym polu z czcionką o stałej szerokości, pod tytułem.	northwind.dev/stack
`logo_1`	adres obrazka	Logo pierwszej pozycji; logo_2 do logo_8 idą z kolejnymi pozycjami.	https://example.com/images/b06-icon-hex.png
`logo_2`	adres obrazka	Logo drugiej pozycji.	https://example.com/images/b06-icon-db.png
`logo_3`	adres obrazka	Logo trzeciej pozycji.	https://example.com/images/b06-icon-bolt.png
`logo_4`	adres obrazka	Logo czwartej pozycji.	https://example.com/images/b06-icon-spark.png
`logo_5`	adres obrazka	Logo piątej pozycji.	—
`logo_6`	adres obrazka	Logo szóstej pozycji.	—
`logo_7`	adres obrazka	Logo siódmej pozycji.	—
`logo_8`	adres obrazka	Logo ósmej pozycji; dalsze dostają inicjały.	—
`accent`	kolor	Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #f97316	#f97316
`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://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "tech-stack",
    "modifications": {
        "title": "What powers Northwind",
        "project": "Northwind image API",
        "items": "Laravel|App and API;PostgreSQL|Database;Redis|Queues and cache;Headless Chrome|Rendering;Docker|Deploys;Go|Egress proxy",
        "url": "northwind.dev/stack",
        "logo_1": "https://example.com/images/b06-icon-hex.png",
        "logo_2": "https://example.com/images/b06-icon-db.png",
        "logo_3": "https://example.com/images/b06-icon-bolt.png",
        "logo_4": "https://example.com/images/b06-icon-spark.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://shareglint.com/i/acc_YOUR_ACCOUNT_ID/tech-stack.png?items=Laravel%7CApp%20and%20API%3BPostgreSQL%7CDatabase%3BRedis%7CQueues%20and%20cache%3BHeadless%20Chrome%7CRendering%3BDocker%7CDeploys%3BGo%7CEgress%20proxy&project=Northwind%20image%20API&title=What%20powers%20Northwind&url=northwind.dev%2Fstack&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://shareglint.com/v1/templates/library/tech-stack/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Użyj tego szablonu — zacznij za darmo

Więcej szablonów: Dla programistów

Szablon obrazka Open Graph „repozytorium GitHub” wyrenderowany przez Shareglint

Repozytorium GitHub Szablon obrazka Open Graph „Endpoint API” wyrenderowany przez Shareglint

Endpoint API Szablon obrazka Open Graph „Fragment kodu” wyrenderowany przez Shareglint

Fragment kodu Szablon obrazka Open Graph „Nowa wersja pakietu” wyrenderowany przez Shareglint

Nowa wersja pakietu Szablon obrazka Open Graph „Wyniki Lighthouse” wyrenderowany przez Shareglint

Wyniki Lighthouse Szablon obrazka Open Graph „Biuletyn bezpieczeństwa” wyrenderowany przez Shareglint

Biuletyn bezpieczeństwa Szablon obrazka Open Graph „Okno przeglądarki” wyrenderowany przez Shareglint

Okno przeglądarki Szablon obrazka Open Graph „Przepis automatyzacji” wyrenderowany przez Shareglint

Przepis automatyzacji Szablon obrazka Open Graph „Karta promptu AI” wyrenderowany przez Shareglint

Karta promptu AI

Wszystkie szablony w kategorii Dla programistów (11) → · Wszystkie szablony →