# Jeden szablon, każdy rozmiar: post, relacja, pin i miniatura w jednym zapytaniu

> Jeden szablon HTML daje podgląd linku, post kwadratowy i pionowy, relację, pin i miniaturę na YouTube — każdy rozmiar ułożony od nowa, nie przycięty.

Opublikowano 2026-11-06 · https://shareglint.com/pl/features/one-template-every-size

Grafika do kampanii rzadko jest jednym obrazkiem. Podgląd linku chce 1,91:1, aktualności kwadratu albo pionu 4:5, relacje i rolki 9:16, Pinterest 2:3, a YouTube 16:9. Projektowanie tej samej karty sześć razy — albo przycinanie jednego wzorca, aż odpadnie nagłówek — to najwolniejsza część publikowania w social mediach. W Shareglint projektujesz szablon raz i prosisz o wszystkie kształty w **jednym zapytaniu**: `"sizes": ["og", "square", "portrait", "story", "pinterest", "youtube"]`. Każdy rozmiar układa się od nowa z HTML-a w swojej szerokości i wysokości, więc nic nie jest przycinane, rozciągane ani wpychane między czarne pasy.

## Presety

Presetów rozmiaru jest 6: **og 1200×630, square 1080×1080, portrait 1080×1350, story 1080×1920, pinterest 1000×1500, youtube 1280×720**. Odpowiadają miejscom, do których trafiają obrazki:

| Preset | Kształt | Typowe zastosowanie |
|---|---|---|
| `og` | 1,91:1 | Podgląd linku (`og:image`) na Facebooku, LinkedInie, X, Slacku, WhatsAppie |
| `square` | 1:1 | Posty w aktualnościach, karuzele, okładki podcastów |
| `portrait` | 4:5 | Pionowe posty na Instagramie i Facebooku |
| `story` | 9:16 | Relacje, okładki rolek i Shorts, TikTok |
| `pinterest` | 2:3 | Piny |
| `youtube` | 16:9 | Miniatury filmów |

Pliki rastrowe (PNG, JPEG, WebP) mają domyślnie dwukrotność wymiarów presetu, więc plik `story` ma 2160×3840 — ostry na każdym telefonie. Liczby podawane przez same platformy, każda ze źródłem i datą sprawdzenia, są na stronie [wymiary grafik w social media](https://shareglint.com/pl/wymiary-grafik-social-media); szczegóły podglądu linku — na stronie [rozmiar obrazka OG](https://shareglint.com/pl/og-image-size).

## Jedno zapytanie, każdy rozmiar

```bash
curl -X POST "https://shareglint.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_..." \
  -H "Content-Type: application/json" \
  -d '{
    "template": "blog-og",
    "sizes": ["og", "square", "portrait", "story", "pinterest"],
    "modifications": {
      "title": "We moved to a four-day week. Here is what happened.",
      "author": "Northwind Engineering",
      "site": "northwind.dev",
      "photo": "https://cdn.example.com/team.jpg"
    }
  }'
```

Odpowiedź to `{"renders": [...]}` z jednym wpisem na rozmiar, w kolejności, w jakiej je podałeś: każdy ma własne `id`, `size` i `url`. Każdy rozmiar to zwykły render — z własnym wpisem w pamięci podręcznej, wywołaniem webhooka i zwrotem, jeśli się nie uda — więc adresy możesz zapisać przy wpisie w CMS-ie i przekazać do narzędzia do planowania publikacji.

Dwie zasady sprawiają, że rachunek jest przewidywalny:

- **Wszystko albo nic.** Jeśli limit pozostały w tym miesiącu nie pokrywa wszystkich nowych rozmiarów, dostajesz `402` i nic nie trafia do kolejki. Nigdy nie skończysz z kwadratem bez relacji.
- **Powtórki są darmowe.** Rozmiar wyrenderowany już z tymi samymi wartościami zwraca istniejący plik bez opłaty, więc dodanie `story` do wczorajszego zapytania kosztuje tylko relację.

Zlecenia hurtowe też przyjmują `sizes`: CSV z 40 wpisami na bloga i `"sizes": ["og", "square", "pinterest"]` zwraca 120 obrazków i jeden ZIP. Podpisane adresy przyjmują zamiast tego parametr `size` (`…/blog-og.png?title=…&size=story&s=…`); jest podpisany jak każda inna wartość, więc adresu podpisanego dla jednego rozmiaru nie da się przełączyć na inny.

## Ułożone od nowa, nie przycięte

Narzędzia do zmiany rozmiaru, które zaczynają od gotowej bitmapy, mają dwa wyjścia: przyciąć albo dopełnić tłem. Przycięcie karty 1200×630 do 9:16 zostawia wąski pasek ze środka; dopełnienie daje małą kartę zawieszoną w wysokim kolorowym prostokącie. Renderowanie z HTML-a ma trzecie wyjście: ułożyć treść od nowa. Szeroka karta może postawić zdjęcie obok nagłówka, kwadratowa ułożyć je jedno pod drugim, a relacja oddać nagłówkowi więcej wysokości — tak, jak dla danego kształtu mówi CSS szablonu.

Każdy z 153 wbudowanych szablonów już to robi. Długie nagłówki zmniejszają się, żeby zmieścić się w swoim polu w każdym kształcie, zamiast wychodzić poza krawędź, a `accent` i `theme` działają tak samo we wszystkich rozmiarach. [Galeria szablonów](https://shareglint.com/pl/templates) pokazuje każdy szablon wyrenderowany w kilku kształtach, zanim napiszesz choćby linijkę kodu.

## Własny szablon w każdym kształcie

Szablon, który sam piszesz w HTML-u i CSS, jest traktowany tak samo — podczas każdego renderu element `<html>` dostaje dwa zaczepy:

- **klasę kształtu**: `shape-landscape`, `shape-square` albo `shape-tall`;
- **klasę rozmiaru**: `size-og`, `size-story`, `size-pinterest` i tak dalej.

Większości układów wystarczą klasy kształtu:

```css
.card { display: flex; gap: 48px; padding: 64px; height: 100%; }
.shape-landscape .card { flex-direction: row; align-items: center; }
.shape-square .card,
.shape-tall .card { flex-direction: column; justify-content: flex-end; }

.shape-tall h1 { font-size: 96px; }      /* relację ogląda się na pełnym ekranie telefonu */
.size-story .card { padding-bottom: 360px; } /* tekst z dala od paska odpowiedzi */
```

Używaj jednostek, które idą za polem — procentów, `flex`, `grid`, `vh`/`vw` renderu — zamiast stałych pozycji w pikselach, a szablon będzie się przelewał. Każdy kształt sprawdzisz za darmo, zanim wydasz limit: podgląd szablonu (`POST /v1/templates/preview`) nie zużywa limitu i przyjmuje te same wartości `size`.

Szablon, którego własne wymiary są równe presetowi (projekt 1080×1080 zamówiony jako `square`), renderuje ten sam obrazek co bez `size` — jeden wpis w pamięci podręcznej, nie dwa.

## Gdzie ucieka czas

Jeden szablon na każdy rozmiar nie oszczędza czasu renderowania — to i tak sekunda czy dwie na obrazek — tylko ręczne kroki wokół niego:

1. **Żadnych osobnych plików projektu dla każdej sieci.** Literówkę w nagłówku poprawiasz raz i renderujesz od nowa wszędzie.
2. **Żadnego przeglądania kadrów.** O układzie decyduje szablon, więc nikt nie sprawdza sześciu eksportów w poszukiwaniu uciętego logo.
3. **Żadnego żonglowania wgrywaniem.** Odpowiedź zawiera każdy adres; narzędzie do planowania publikacji albo automatyzacji ([n8n](https://shareglint.com/en/integrations/n8n) czy [Make](https://shareglint.com/en/integrations/make)) publikuje każdy rozmiar w jego sieci.

Na bloga zwykle wystarcza zestaw: `og` jako `og:image` artykułu, `square` albo `portrait` do posta w aktualnościach i `pinterest` na pin. Dla podcastu albo kanału wideo: `youtube` na miniaturę, `square` na okładkę odcinka i `story` na zapowiedź.

## Koszt

Jeden render na obrazek i rozmiar. Post w pięciu rozmiarach to pięć renderów; te same pięć jeszcze raz jest za darmo. 100 renderów miesięcznie w planie Free ma znak wodny; Starter kosztuje $9 miesięcznie za 2 000 renderów, a Pro $29 za 10 000 ([cennik](https://shareglint.com/pl/pricing)). Animowany GIF albo MP4 kosztuje 5 renderów na rozmiar, jak każdy animowany render.

## Czego nie robi

- **Nie gwarantuje stref bezpiecznych konkretnych platform.** Przyciski i podpisy każdej sieci zasłaniają inną część obrazka i zmieniają się bez zapowiedzi; jeśli twój projekt jest ciasny, trzymaj tekst z dala od krawędzi we własnym szablonie. Meta zaleca na przykład, żeby w reklamie w relacjach około 14% u góry i 35% u dołu obrazka pozostało bez tekstu ([Meta Ads Guide](https://www.facebook.com/business/ads-guide/update/image/instagram-story)).
- **Nie robi dowolnych rozmiarów w jednym zapytaniu.** `sizes` przyjmuje presety; dla innego rozmiaru (np. banera na LinkedIna 1584×396) zapisz szablon w tym rozmiarze.
- **Nie publikuje.** API zwraca adresy obrazków; publikuje je twoje narzędzie do planowania, CMS albo automatyzacja.
- **Nie przekomponowuje obrazu przez AI.** Układ wynika z HTML-a i CSS, które napisałeś ty albo autor wbudowanego szablonu — nie przesuwa obiektów wewnątrz zdjęcia. Do „inteligentnego kadrowania” fotografii właściwym narzędziem jest wyspecjalizowany CDN obrazów, np. [Cloudinary](https://cloudinary.com/documentation/resizing_and_cropping); do zaprojektowanej karty z tekstem — szablon, który się przelewa.

## FAQ

### Czy jeden projekt można automatycznie przeskalować pod każdą sieć społecznościową?

Tak. Wyślij sizes z potrzebnymi presetami — na przykład og, square, story i pinterest — a jedno zapytanie zwróci po jednym obrazku na rozmiar. Szablon układa się od nowa w każdym kształcie, więc tekst nie zostaje ucięty ani ściśnięty.

### To skalowanie czy przycinanie?

Ani jedno, ani drugie. Każdy rozmiar renderuje się od nowa z HTML-a w swojej szerokości i wysokości, więc układ się przelewa: szeroka karta może postawić zdjęcie obok tytułu, a relacja ułożyć je jedno pod drugim. Wbudowane szablony już to robią; twoje własne dostają klasy CSS dla każdego kształtu.

### Ile kosztuje zapytanie o kilka rozmiarów?

Każdy rozmiar to jeden render z miesięcznego limitu. Rozmiar wyrenderowany już z tymi samymi wartościami jest darmowy. Jeśli pozostały limit nie pokrywa wszystkich nowych rozmiarów, zapytanie zwraca 402 i nic się nie renderuje, więc nigdy nie dostaniesz połowy zestawu.

### Jakie rozmiary są dostępne?

Presety to og 1200×630, square 1080×1080, portrait 1080×1350, story 1080×1920, pinterest 1000×1500, youtube 1280×720. Pliki PNG, JPEG i WebP mają domyślnie dwukrotność tych wymiarów w pikselach.