logo-wall

Szablon obrazka OG: Ściana logotypów

Wyrównana ściana logotypów klientów, sponsorów albo partnerów, opcjonalnie w pasach poziomów, jak Złoty i Srebrny.

Szablon obrazka Open Graph „Ściana logotypów” wyrenderowany przez Shareglint
Szablon Ściana logotypów w rozmiarze square (1080×1080)
Szablon Ściana logotypów w rozmiarze portrait (1080×1350)
Szablon Ściana logotypów w rozmiarze story (1080×1920)
Szablon Ściana logotypów w rozmiarze pinterest (1000×1500)
Szablon Ściana logotypów 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 dowodu społecznego w SaaS, podziękowań dla sponsorów wydarzeń, stron partnerów i kart „piszą o nas”. Do dwunastu logotypów; rzędy są wyrównane (siedem logotypów to rzędy po cztery i trzy). Miejsce bez obrazka pokazuje nazwę z pola names jako napis, więc ściana działa nawet z samym tekstem. Z polem tiers każdy poziom to pas z etykietą, a wyższe poziomy mają większe logotypy. Szerokie kadry mają długie rzędy; kwadratowe i pionowe mniej logotypów w rzędzie i wyższe pasy.

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 nad ścianą, np. Zaufali nam. domyślnie: Trusted by Thank you to our 2026 sponsors
subtitle tekst Jedna linijka pod tytułem. Frontend Summit would not happen without them.
names tekst Nazwy firm rozdzielone ;, w tej samej kolejności co logo_1…logo_12, np. Aurora Audio;Kestrel;Halden. Pokazywane zamiast brakującego logo. Aurora Audio;Kestrel;Halden;Quillwork;Lumen;Orbitly;Fernway;Tidewater
tiers tekst Opcjonalne poziomy rozdzielone ;, każdy jako etykieta|liczba logotypów, po kolei, np. Złoty|2;Srebrny|3;Społeczność|3. Gold|2;Silver|3;Community|3
monochrome tekst yes rysuje wszystkie logotypy jednym kolorem (kolorem tekstu), no zostawia ich własne kolory. jedna z wartości: yes | no domyślnie: no no
logo_1 adres obrazka Pierwsze logo; najlepiej PNG z przezroczystością albo SVG. logo_2 do logo_12 idą po kolei. https://example.com/images/b06-wm-aurora.png
logo_2 adres obrazka Drugie logo. https://example.com/images/b06-wm-kestrel.png
logo_3 adres obrazka Trzecie logo. https://example.com/images/b06-wm-halden.png
logo_4 adres obrazka Czwarte logo. https://example.com/images/b06-wm-quill.png
logo_5 adres obrazka Piąte logo. https://example.com/images/b06-wm-lumen.png
logo_6 adres obrazka Szóste logo. https://example.com/images/b06-wm-orbitly.png
logo_7 adres obrazka Siódme logo. https://example.com/images/b06-wm-fernway.png
logo_8 adres obrazka Ósme logo. https://example.com/images/b06-wm-tidewater.png
logo_9 adres obrazka Dziewiąte logo. —
logo_10 adres obrazka Dziesiąte logo. —
logo_11 adres obrazka Jedenaste logo. —
logo_12 adres obrazka Dwunaste logo. —
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #6366f1 #6366f1
theme dark | light Schemat kolorów: dark albo light. domyślnie: 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": "logo-wall",
    "modifications": {
        "title": "Thank you to our 2026 sponsors",
        "subtitle": "Frontend Summit would not happen without them.",
        "names": "Aurora Audio;Kestrel;Halden;Quillwork;Lumen;Orbitly;Fernway;Tidewater",
        "tiers": "Gold|2;Silver|3;Community|3",
        "monochrome": "no",
        "logo_1": "https://example.com/images/b06-wm-aurora.png",
        "logo_2": "https://example.com/images/b06-wm-kestrel.png",
        "logo_3": "https://example.com/images/b06-wm-halden.png",
        "logo_4": "https://example.com/images/b06-wm-quill.png",
        "logo_5": "https://example.com/images/b06-wm-lumen.png",
        "logo_6": "https://example.com/images/b06-wm-orbitly.png",
        "logo_7": "https://example.com/images/b06-wm-fernway.png",
        "logo_8": "https://example.com/images/b06-wm-tidewater.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/logo-wall.png?monochrome=no&names=Aurora%20Audio%3BKestrel%3BHalden%3BQuillwork%3BLumen%3BOrbitly%3BFernway%3BTidewater&subtitle=Frontend%20Summit%20would%20not%20happen%20without%20them.&tiers=Gold%7C2%3BSilver%7C3%3BCommunity%7C3&title=Thank%20you%20to%20our%202026%20sponsors&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/logo-wall/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Więcej szablonów: Marketing i dowód społeczny

Wszystkie szablony w kategorii Marketing i dowód społeczny (9) →  ·  Wszystkie szablony →