Implementace galerie fotografií

[tjerabek]

Na hlavní stránce bychom pomocí pár fotografií dokreslili informace o fungování a hodnotách Česko.Digital. To na aktuálním webu chybí a nový web by to měl obsahovat.

Základní info

Technologie: React, TypeScript, Gatsby, Storybook

Požadavky na výsledné řešení:

• Komponenty by neměly obsahovat žádný stav
• Obrázky budou vkládány jako URL (i ilustrace, zabarvení bude řešeno v rámci obrázku)
• Obrázky budou lazy loaded (lze vytvořit něco jako univerzální komponentu pro obrázek, která bude využívat lazy loading by default)
• Rozhraní by mělo být srozumitelné pokud jde o umístění (pojmenování místa, indexace, rozdělení na třetiny atd.)
• Komponentu rovnou využít na hlavní stránce (pages/index.ts)

Náhled komponenty

Aktuální verze

Aktuální verze se nachází ve Figmě

V případě nejasností se nebojte zeptat zde pod issue nebo na Slacku jednoho z techleadů. Jeden z nich vám bude k dispozici po celou dobu vývoje. 🙂

[poooow]

Já bych si to vzal, ale nejsem si jistej, jeslti jsem správně pochopil zadání.
Moje představa je, že by rozhraní mohlo pracovat s nested objekty tohoto typu:

{
   col: {
    row: {
      img: { 
        url: "http://...",
        alt: "..."
        },
      img: { ... }    
    },
    row: { ... }
   },
   col: { ... }, 
   col: { ... }
}

Komponenta by si to následně přechroustala do Flexboxu.

Co se týče lazy loading, tak bych osobně v spíš preferoval html atribut loading="lazy"
<img src="image.jpg" alt="..." loading="lazy">
Nevýhodou je, že atribut nepodporuje IE a Safari. Nicméně Safari ho má mezi experimental features, takže je pravděpodobné, že brzy bude.

[fidelman]

Já bych si to vzal, ale nejsem si jistej, jeslti jsem správně pochopil zadání.
Moje představa je, že by rozhraní mohlo pracovat s nested objekty tohoto typu:

{
   col: {
    row: {
      img: { 
        url: "http://...",
        alt: "..."
        },
      img: { ... }    
    },
    row: { ... }
   },
   col: { ... }, 
   col: { ... }
}

Komponenta by si to následně přechroustala do Flexboxu.

Co se týče lazy loading, tak bych osobně v spíš preferoval html atribut

Nevýhodou je, že atribut nepodporuje IE a Safari. Nicméně Safari ho má mezi experimental features, takže je pravděpodobné, že brzy bude.loading="lazy"``<img src="image.jpg" alt="..." loading="lazy">

Nemyslím si, že vaše rozhraní bude pokrývat případ, kdy obrázek pořídí 2 řádky nebo 2 sloupce, a Flexbox také nebude pokrývat sání. Myslím, že CSS Grids budou lepší.

Je dobré, že myslíte na lazy loading. Myslím, že zde může fungovat dynamický import https://www.npmjs.com/package/react-lazyload + sledovač viewportu, například https://www.npmjs.com/package/react-in-viewport

[fidelman]

❓ jak komponenta vypadá na velkých obrazovkách, například 4000px.

[HormCodes]

AD lazy loading: Za mne nevidím důvod přidávat novou knihovnu, standardní atribut loading=lazy je fajn. Můj záměr je jen nepoužívat čistý img tag, ale nějakou komponentu, která bude tento atribut přidávat automaticky tak, aby se na to nezapomělo. To navíc v případě změn umožní úpravu mechanismu pomalého načítání pouze na jednom místě.

AD rozhraní: @poooow, tvůj návrh se mi velmi líbí a pojď me to zkusit.

AD velké obrazovky: @fidelman, super dotaz. Zjistím u Alberta, ale můj předpoklad je, že komponenta si bude držet relativní šířku vůči šířce ostatního obsahu.

[poooow]

Dobře, já si to teda beru. Díky za připomínky. Je možné, že v průběhu narazím na nějaký problém a ještě to rozhraní upravím.

[HormCodes]

@MartinaHytychova, slíbené poznámky z callu:

• Branch byla přidána do repa
• Otypovat všechna rozhraní komponent a dat
• Extrahovat logiku do separátních funkcí a zdokumentovat pomocí testů
• Ratio by mělo fungovat na klasický poměr (2:1, 3:2, 5:3 atd.)
• Upravit responsivitu a umístění (možnost jednoduchého řešení se zarovnáním na střed)
• Obrázky pomocí odkazů, ponechat alt vlastnost tak jak je

[MartinaPiekna]

@HormCodes Ahoj, když jsem řešila to ratio, tak mi to přijde zbytečně overkill s těmi výpočty, když jak navrhoval i Fidelman se dá udělat jednoduchý grid s pozicemi a přes jednoduchý config pak jen vždy říct např. (fotka 'abc' má pozici 1, ratio 2). Pak by na frontendu stačily jen konstanty pro danou pozici, které by fungovaly dynamicky s tím co by bylo v configu. Je to tak možné udělat?

[poooow]

@MartinaHytychova Ahoj, o tomto řešení jsme se s Hormem bavili, a je to možné udělat jak píšeš.

[MartinaPiekna]

@poooow aha, tak super, Díky :)