Page MenuHomeSealhub

Wsparcie dla obliczania automatycznie rozmiarów obrazka odpowiednich dla object-fit: cover oraz contain
Closed, ResolvedPublic1 Points

Description

Gdy mamy obrazki o różnych proporcjach szerokości do wysokości, ale wciskamy je do grida, który jest np. zawsze kwadratowy, to nie jesteśmy w stanie dać jednej optymalnej szerokości obrazka, który trzeba wysłać do klienta.

Np. jeżeli mamy kontenery na obrazki w rozmiarze 100x100 to możemy pokusić się o danie sizes_attr na 100px i tyle. Ale jeżeli ustawimy object-fit na cover, a obrazek który przyjdzie jako źródło ma 2000x1000 pikseli (proporcje 2:1, jest bardzo poziomy), to do przeglądarki zostanie wysłany plik o rozmiarze 100px na 50px, i żeby pokryć 100% wysokości, plik zostanie powiększony do 200px na 100px i będzie rozmazany.

Logika została już +/- zaimplementowana w https://hub.sealcode.org/rAUS7089c686728babe9b6a12bda3ecd19fd72f4ef1a, trzeba ją tylko przenieść do koa-responsive-image-router

Trzeba podchodzić do tego sprytniej. Musimy dać możliwość powiedzenia imagerouterowi:

  • jakie są zakładane wymiary kontenera i
  • jaka jest wybrana wartość object-fit ("cover"? "contain"?)

i na ich podstawie obliczać odpowiednie rozmiary obrazka, które będą serwowane.

Details

Tested by
kuba-orlik
Coded by
luryxyt
Reviewed by
kuba-orlik
Action required from
luryxyt
PHID of the last column the processing script has seen this task in
PHID-PCOL-rt4p72bfiw2fnfkxc5fl
Timestamp of the time this task got moved into the current column
1693048574107

Revisions and Commits

Event Timeline

jenkins-user set Timestamp of the time this task got moved into the current column to 1689290095453.Jul 14 2023, 01:14
jenkins-user set PHID of the last column the processing script has seen this task in to PHID-PCOL-2ksh7xlolko4ggqo7rez.
jenkins-user changed Timestamp of the time this task got moved into the current column from 1689290095453 to 1693048574107.Aug 26 2023, 13:16
jenkins-user changed PHID of the last column the processing script has seen this task in from PHID-PCOL-2ksh7xlolko4ggqo7rez to PHID-PCOL-rt4p72bfiw2fnfkxc5fl.
jenkins-user added a project: Unknown Object (Project).Aug 30 2023, 10:44
kuba-orlik triaged this task as Above Normal priority.Sep 4 2023, 17:13
luryxyt moved this task from To do to Doing on the Kanban board.
jenkins-user updated Action required from, added: luryxyt.
luryxyt added a revision: Restricted Differential Revision.Sep 5 2023, 13:31
jenkins-user moved this task from Doing to Review on the Kanban board.
jenkins-user updated Action required from, added: KamilBaczkowski, prostyfranek, Wirusik, wrzesinski-hubert, FilipI, brtkuu; removed: luryxyt.
jenkins-user moved this task from Review to Doing on the Kanban board.
jenkins-user updated Reviewed by, added: kuba-orlik.
jenkins-user updated Action required from, added: luryxyt; removed: KamilBaczkowski, prostyfranek, Wirusik, wrzesinski-hubert, FilipI, brtkuu.
jenkins-user moved this task from Doing to Review on the Kanban board.
jenkins-user updated Action required from, added: kuba-orlik; removed: luryxyt.
jenkins-user moved this task from Review to Doing on the Kanban board.
jenkins-user updated Action required from, added: luryxyt; removed: kuba-orlik.
jenkins-user moved this task from Doing to Review on the Kanban board.
jenkins-user updated Action required from, added: kuba-orlik; removed: luryxyt.
jenkins-user moved this task from Review to Doing on the Kanban board.
jenkins-user updated Action required from, added: luryxyt; removed: kuba-orlik.
jenkins-user moved this task from Doing to Review on the Kanban board.
jenkins-user updated Action required from, added: kuba-orlik; removed: luryxyt.
jenkins-user moved this task from Review to Ready for testing on the Kanban board.
jenkins-user updated Action required from, added: AmeliaB, Koossa, karolwojtowicz87, brtkuu, prostyfranek, zbartosz, radoptak; removed: kuba-orlik.
jenkins-user moved this task from Ready for testing to Doing on the Kanban board.
jenkins-user updated Tested by, added: kuba-orlik.
jenkins-user updated Action required from, added: luryxyt; removed: AmeliaB, Koossa, karolwojtowicz87, brtkuu, prostyfranek, zbartosz, radoptak.
jenkins-user moved this task from Doing to Review on the Kanban board.
jenkins-user updated Action required from, added: kuba-orlik; removed: luryxyt.
jenkins-user moved this task from Review to Doing on the Kanban board.
jenkins-user updated Action required from, added: luryxyt; removed: kuba-orlik.
jenkins-user moved this task from Doing to Review on the Kanban board.
jenkins-user updated Action required from, added: kuba-orlik; removed: luryxyt.
jenkins-user moved this task from Review to Doing on the Kanban board.
jenkins-user updated Action required from, added: luryxyt; removed: kuba-orlik.
jenkins-user moved this task from Doing to Review on the Kanban board.
jenkins-user updated Action required from, added: kuba-orlik; removed: luryxyt.
jenkins-user moved this task from Review to Doing on the Kanban board.
jenkins-user updated Action required from, added: luryxyt; removed: kuba-orlik.
jenkins-user moved this task from Doing to Review on the Kanban board.
jenkins-user updated Action required from, added: kuba-orlik; removed: luryxyt.
jenkins-user moved this task from Ready for testing to Ready to land on the Kanban board.
jenkins-user updated Action required from, added: luryxyt; removed: kuba-orlik.
kuba-orlik shifted this object from the Restricted Space space to the S5 Publiczna space.Oct 30 2023, 13:22
kuba-orlik changed the visibility from "All Users" to "Public (No Login Required)".