Niekwadratowy awatar ma dodawane białe paski

Awatar dodawany przez użytkownika jest modyfikowany przez silnik forum.
Prawdopodobnie po to żeby awatar był kwadratowy doklejane jest białe tło które źle wygląda z ciemną skórką.
Awatar nie powinien być modyfikowany tylko style powinny być dostosowane do wyświetlania innych awatarów niż kwadratowe.
Jeżeli modyfikowanie jest konieczne, należy użyć przezroczystych pikseli zamiast białych po to żeby awatar wyglądał tak samo na obu wersjach kolorystycznych.

Plik awatara który dodaję:

Wynik na ciemnej skórce

Plik pobrany ze strony profilu po zapisaniu (widać białe pionowe paski)

Żeby piksele były przezroczyste to musiałby być zapisany w innym formacie niż aktualny jpg, np. png, który zajmuje więcej miejsca

Można po prostu nie ingerować w plik awatara (oprócz zmiany rozmiaru przy zachowaniu proporcji) jeżeli zapisanie jako PNG jest problematyczne.

Żeby nie było że nie sprawdzałem. Dodanie awatara w PNG kończy się tym samym rezultatem

To co mogę zaproponować, to to żeby Coyote przycinał nadmiarowy wymiar do kwadratu. Wtedy nie miałbyś białych pasków, tylko górę i dół trochę krótszą. Chciałem to już zrobić jakiś czas temu.

Byłoby to tożsame z Twoim rozwiązaniem dodania styli które wyświetlają niekwadratowe avatary - bo te style tak czy tak by ucięły górę i dół, żeby wyświetlić avatar jako kwadrat.

Dlaczego chcesz stylami CSS lub po stronie serwera ucinać obrazek do kwadratu? Wystarczy wyrenderować zeskalowany prostokątny obrazek na środku kwadratowego kontenera.

Napisałem w oryginalnym poście że style miałyby umożliwić wyświetlanie poprawne niekwadratowych awatarów, a nie dopasowywać je do kwadratu.

Miło by było, gdyby prostokątne miniaturki były wyświetlane po prostu zeskalowane, bez wymuszania ich ”poprawnego” kształtu poprzez dodanie pustej przestrzeni. Wiadomo, że style powinny określać np. maksymalną szerokość miniaturki, ale mimo wszystko końcowa miniaturka powinna mieć źródłowe proporcje.

Przy czym jeśli już korzystać z tej pustej przestrzeni, to koniecznie musi ona być przezroczysta, a nie biała. Trzeba pamiętać, że biały dodatek pasuje jedynie do jasnego motywu, natomiast w ciemnym motywie, takie miniaturki wyglądają brzydko:

Wygląda to tak jakby użytkownik nie potrafił sobie wykadrować obrazka.

Dlaczego chcesz stylami CSS lub po stronie serwera ucinać obrazek do kwadratu? Wystarczy wyrenderować zeskalowany prostokątny obrazek na środku kwadratowego kontenera.

...co będzie wyglądało dokładnie tak samo jakby go przyciąć.

Chyba że mówiąć "zeskalowany" masz na myśli rozciągnięty, żeby się dopasować do kwadratu. To też możemy zrobić, tylko wydawało mi się że to by gorzej wyglądało.

Nie, zeskalowany.
Mam obrazek 300x200, w kontenerze potrzebny jest 100x100 wiec skalujesz go sobie do 100x66 i umieszczasz w środku kontenera.

opiszon napisał(a):

Mam obrazek 300x200, w kontenerze potrzebny jest 100x100 wiec skalujesz go sobie do 100x66 i umieszczasz w środku kontenera.

W takim przypadku wolałbym, aby kontener dopasował swój rozmiar do tego 100x66, zamiast być kwadratem z wycentrowanym obrazkiem miniaturki. Zresztą jeśli dobrze pamiętam, kiedyś tak było.

@opiszon No to przecież dokładnie to się teraz dzieje - Twój avatar jest tak zeskalowany bez zmian proporcji.

W takim przypadku wolałbym, aby kontener dopasował swój rozmiar do tego 100x66, zamiast być kwadratem z wycentrowanym obrazkiem miniaturki. Zresztą jeśli dobrze pamiętam, kiedyś tak było.

To jest zmiana która jest teraz zbyt kosztowna żeby ją wprowadzić. Avatarki na ten moment muszą się pokazywać jako kwadrat. Od chyba 2005 roku coyote dodaje biały padding do avatarów, więc jeśli komuś się udało wrzucić nie-kwadratowy avatar, to przed tym rokiem.

Tak, tylko że źle.
Bo jest to robione poprzez modyfikację obrazka, zamiast stylem CSS.
Może być nawet robione przez modyfikację obrazka, tylko nie dodając białego tła a przezroczyste.

Wszystko jest wytłumaczone w 1 poście.

@Riddle co w tej zmianie jest kosztownego bo nie rozumiem?
Jak ktoś ma awatar z białym paskiem kwadratowy to dalej taki będzie miał. Jak wgra nowy po poprawce to będzie miał prostokątny.
A że kwadrat jest specyficznym przypadkiem prostokąta to CSS który potrafi wyświetlić prostokąt w kwadracie będzie umiał także wyświetlić kwadrat w kwadracie.

Jeżeli zaś trzeba zmienić tysiące miejsc w CSS żeby poprawić wyświetlanie awatarów, to można też po prostu zamiast białego tła ustawić przezroczyste (i zmienić format pliku).

Ale dlaczego wymuszać kwadratowy avatar, gdy można zrobić to, co zostało tu wspomniane, czyli wyświetlić kwadratowy kontener HTML, a w nim obrazek, który sam się dopasuje do rodzica - nawet gdyby ktoś wrzucił plik 100x20px albo 20x100px.
Wymóg wrzucania kwadratu czy wręcz ingerencja i jego przycinanie to wg mnie bardzo słaby pomysł. Niektóre strony rzeczywiście tak robią i zawsze wtedy ronię łzę widząc przyciętego Spike.

Mój obecny avatar ma 90x67px i wydaje się wyglądać ok - nawet nie w kwadracie. Czy jest z tym problem by tak działało to dla innych avatarów?

Marooned napisał(a):

Ale dlaczego wymuszać kwadratowy avatar, gdy można zrobić to, co zostało tu wspomniane, czyli wyświetlić kwadratowy kontener HTML, a w nim obrazek, który sam się dopasuje do rodzica - nawet gdyby ktoś wrzucił plik 100x20px albo 20x100px.

Można to zrobić, ale avatary są użyte w wielu miejscach w serwisie i byłoby to bardzo dużo pracy, dla (względnie) nikłego pożytku. Już prościej byłoby zrobić żeby coyote doklejał przezroczyste paski zamiast białych, a efekt ten sam.

Ok, ale skoro ja mam niekwadratowy avatar i on działa, to gdzie tu potrzebna jakaś praca?
Chyba, że gdzieś nie działa, a tego nie widzę? Wskazałbyś takie miejsce?

Marooned napisał(a):

Ok, ale skoro ja mam niekwadratowy avatar i on działa, to gdzie tu potrzebna jakaś praca?
Chyba, że gdzieś nie działa, a tego nie widzę? Wskazałbyś takie miejsce?

Twój avatar jest wyjątkiem, bo dodałeś go zanim coyote zaczął wymuszać kwadratowe avatary. Przypadek @opiszon jest inny, on już ma doklejone te białe paski, i jak rozumiem nie chce ich. Gdybyś teraz próbował wrzucić ten sam avatar, to miałbyś też białe paski tylko że u góry i dołu.

No właśnie, @Marooned ma niekwadratowy, nie ma doklejonego białego tła i wszystko z renderowaniem awatara gra.

Co stoi na przeszkodzie wiec żeby wywalić dodawanie białego tła?
Cargo cult?

Ok, czyli rozumiem, że potrzebna praca oznacza usunięcie kodu, który dokleja obecnie białe paski?
Dzięki za wyjaśnienie.

Dzięki @Marooned za pojawienie się. Można przynajmniej było dojść po miesiącu od zgłoszenia że to bug który manifestuje się od czasu wdrożenia czarnej skórki.

Marooned napisał(a):

Ok, czyli rozumiem, że potrzebna praca oznacza usunięcie kodu, który dokleja obecnie białe paski?
Dzięki za wyjaśnienie.

Plus poprawienie wszystkich stylów gdzie avatary są użyte w serwisie, co będzie jakieś 40 miejsc, zarówno te SSR jak i SPA. Byłoby fajnie gdyby były uspójnione, tak że wystarczyłoby je poprawić w jednym miejscu, ale niestety tak nie jest. Jak chcesz spróbować swoich sił, to zachęcam do wystawienia PRa I to też nie jest tak, że dla wszystkich tych miejsc to jest ten sam fix (np. jeden rule CSS'owy). One są z róznych można powiedzieć "epok" coyote'a, więc są tworzone różnymi sposobami.

Zaproponowałem Wam najprosztsze rozwiązanie, czyli zrobić tak żeby zamiast doklejania białych pasków, coyote dokleił przezroczyste. Co jest nie tak z takim rozwiązaniem?

Skoro mój niekwadratowy avatar wyświetla się obecnie dobrze, to chyba nie trzeba poprawiać wspomnianych 40 miejsc.
Ale - jak wspomniałem - jak masz miejsce, gdzie mój avatar obecnie źle się wyświetla, to chętnie zaspokoję ciekawość - ja nie widziałem takiego miejsca póki co.

Marooned napisał(a):

Skoro mój niekwadratowy avatar wyświetla się obecnie dobrze, to chyba nie trzeba poprawiać wspomnianych 40 miejsc.
Ale - jak wspomniałem - jak masz miejsce, gdzie mój avatar obecnie źle się wyświetla, to chętnie zaspokoję ciekawość - ja nie widziałem takiego miejsca póki co.

Pierwsze z brzegu:

Jest takich miejsc jeszcze kilka/kilkanaście.

@Riddle przede wszystkim to doklejanie pasków przezroczystych zaproponowałem ja, miesiąc temu w pierwszym poście gdyby efektu nie udało się osiągnąć w inny sposób.

Ale jeżeli da się tego nie robić (co udowadnia przypadek @Marooned ) to lepiej tego nie robić.
Po co ingerować w plik wgrywany przez użytkownika.

@Riddle? I widzisz w tym rzeczywisty problem jak prezentuje się Avatar @Marooned w różnych miejscach?

Już nie mówię o tym że poprawienie tego w CSS nawet jeżeli to kilkanaście/kilkadziesiąt miejsc to zaaplikowanie jednego dobrze napisanego stylu tak żeby w przyszłości nie trzeba było tego znów w kilkunastu miejscach poprawiać.

Ile z tych kilkunastu miejsc o których piszesz ma ruch na tyle duży że trzeba będzie to poprawić w pierwszej kolejności? Forum, mikroblog, strona w profilu. Myk myk i masz zaaplikowany jeden komponent w tych miejscach z tym samym stylem i dług technologiczny zmniejszony.

Prostokątna miniaturka @Marooned z dopasowaną ramką zdecydowanie lepiej wygląda niż prostokątna miniaturka wycentrowana w kwadratowej ramce.

opiszon napisał(a):

Nie, zeskalowany.
Mam obrazek 300x200, w kontenerze potrzebny jest 100x100 wiec skalujesz go sobie do 100x66 i umieszczasz w środku kontenera.

A nie prościej wziąć po prostu co 6 piksel i złożyć odpowiedni kształt?