generuj-avatar.py w przeglądarce

Oprawa zdjęcia

Przycięcie do koła, obrys w kolorze marki i opcjonalna plakietka są wypalone w pliku PNG, bo klienty pocztowe nie renderują border-radius ani gradientów — w CSS-ie to po prostu nie zadziała w Outlooku.

Zdjęcia

Upuść zdjęcia albo kliknij, żeby wybraćjpg, png, webp — cała partia naraz; zdjęcia nie wychodzą z przeglądarki

Minimum 400 × 400 px, twarz mniej więcej wyśrodkowana, spokojne tło. Kadr jest kwadratowy i przycięty do koła — zdjęcie poziome z osobą z boku wyjdzie źle.

Pliki nie wychodzą z przeglądarki. Oprawa powstaje na Canvasie u Was na komputerze, nic nie jedzie na serwer.

Kształt

Koło pochodzi z pierwotnej paczki Adsolutions. Kwadrat dołożony pod brewcode’a — w brutalistycznym boxie nie ma ani jednego zaokrąglenia, więc okrągła oprawa wyglądała tam jak z innej stopki. Kształt wchodzi do nazwy pliku, bo klient poczty musi znać proporcje z kodu: avatar-<osoba>@2x.png. Domyślnie koło dla Adsolutions, kwadrat dla brewcode’a.

Obrys

Domyślnie pełny firmowy błękit, grubość 5 px — dokładnie jak kapsuła akcentu w stopce. Do motywu brewcode pasuje #000000 albo #F6B900; błękit Adsolutions zgrzytałby w boxie brutalistycznym.

Wgrywanie do katalogu

Na serwer trafia wyłącznie gotowa oprawa — zdjęcie źródłowe zostaje w przeglądarce. Plik od razu wchodzi pod adres /files/<nazwa> i jest widoczny w podglądzie generatora.

Nazwy nie są nadpisywane: katalog leci z nagłówkiem immutable na rok, więc podmiana treści pod istniejącą nazwą pokazałaby część odbiorców starą wersję, a część nową. Przy kolizji aplikacja proponuje wolną nazwę.

Rozmiary

WariantPlikW stopce
koło bez plakietki240 × 224120 × 112
koło z plakietką240 × 264120 × 132
kwadrat240 × 240120 × 120

Plakietka podnosi wysokość obrazka — w kodzie stopki trzeba wtedy zmienić height ze 112 na 132 px. Powyżej 45 KB zmniejszcie zdjęcie źródłowe albo zapiszcie je jako JPG.

Podgląd

Wskażcie zdjęcia po lewej. Każde dostanie własny wiersz z suwakiem kadru, polem nazwy i przyciskiem pobrania.