Latte obrazky proporcionalne

scientific
Člen | 93
+
0
-

Ahoj všem,

prosím o radu. Stránka má načítat obrázek ze serveru. Obrázek je mnohdy větší, než jak se zobrazuje.

Nechci generovat milion náhledů, ani obrázek zmenšovat před/při nahrání na server.

Věřím, že by to šlo řešit už přímo v Latte šabloně.

Je to tak? Pokud ano, tušíte někdo prosím jak na to?

Shrnutí: Potřebuji v latte pošéfovat automatické přizpůsobení obrázku do prostoru při zachování poměru stran.

Děkuji moc za rady.

Felix
Nette Core | 1189
+
0
-

Ahoj, drive jsem si obrazky upravoval na serveru do ruznych miniatur a velikosti dle me potreby. Aktualne nechavam originaly a na miniatury pouzivam CDN, ktera to umi.

Napriklad se mi celkem osvedcila sluzba https://imagekit.io/. Jak to funguje? V ImageKit si udelas ucet a nastavis si tam originalni URL na tvuj webik.

Takovych sluzeb jako je ImageKit je mnoho, zalezi ktera ti bude vyhovovat.

joe
Člen | 313
+
0
-

To, co hledáš, je otázka CSS, podívej se na vlastnost object-fit – https://developer.mozilla.org/…S/object-fit

(ale taky nedává smysl stahovat třeba 15 MB obrázek, když je potřeba zobrazit ho na ploše 150×150 pixelů :-))

Editoval joe (24. 8. 2020 13:10)

d@rkWolf
Člen | 163
+
0
-

Já to pochopil tak, že by chtěl automaticky dostat obrázek velikosti, jaká zrovna pasuje do zobrazovaného html elementu na základě bůhví čeho, CSS stylů, velikosti okna nebo co, aspoň tak to chápu. Což asi úplně možné nebude, protože PHP server nemůže vědět, jak velký obrázek se zrovna v nějakém elementu zobrazuje, jediná možnost je některé z rozšíření, které umí ze zdrojového obrázku vytvářet sama cachované varianty podle toho, o jakou velikost si v kódu požádá, viz. něco z tohoto na componette:

brabijan / images
WebChemistry / images
dotblue / nette-webimages
contributte / image-storage

joe
Člen | 313
+
0
-

@darkWolf Pak by řešení mohlo být lazy loading obrázků s tím, že se vytvoří buď přesná varianta podle elementu, kam ho chce a nebo nějaká nejbližší, která by tomu odpovídala (aby se nevytvářelo N variant rozměrů)

skromny
Člen | 5
+
0
-

ak som spravne pochopil co presne treba, tak mne osobne sadlo a vyhovuje toto:

Nette Palette