Ako funguje galéria ponuky v Houzez

návodyPre pokročilých
HouzezWeb pre realitku

Základné informácie ku galérii ponuky v téme Houzez

Pod galériou máme na mysli fotografie k ponuke, sú oddelené od prvého prezentačného obrázka (featured image).

Kde je možné nájsť galériu?

  • galéria vo výpise, označovaná ako slideshow (máte náhľad a pomocou šípiek listujete už vo výpise medzi obrázkami).  Vždy ju defaultne vypíname, pretože má vplyv na načítanie stránky (ku každej ponuke vo výpise sa musia načítať všetky obrázky).
  • galéria v náhľade ponuky, označovaná ako lightbox – to je keď kliknete na náhľadový obrázok a vyskočí modal okno s fotkami, formulárom a základnými údajmi.  Snažíme sa to vypnúť, ľudia sú z toho zmätení, očakávajú listovanie fotkami
  • galéria v detaile ponuky – klasická galéria ponuky.  Houzez používa Photoswipe na listovanie obrázkami, ale musí sa zapnúť, inak naskočí ich vlastná galéria (podobne ako pri náhľadoch)
  • galéria ako sekcia v detaile ponuky – section block gallery

Ako je galéria vyriešená na pozadí?

  • každý jeden obrázok je samostatný meta údaj (záznam v databáze),  jeho hodnotou je ID prílohy (attachmentu).
  • na renderovanie je použitý Redux framework (rwmb)

Možný problém:

    • keď zmažete obrázok pri editovaní, v skutočnosti sa len odpojí od ponuky, ale zostáva aj v Multimédiach aj na serveri
    • keď zmažete ponuku z koša, obrázky ostávajú na serveri a zaberajú miesto.  Prílohy ostávajú ako nepripojené.
    • až vo verzii 4.x vyriešené obmedzenie/nastavenie generovania náhľadov priamo v Houzez

Ako sa získavajú údaje pre galériu na frontende?

  • tu je zásadný rozdiel medzi verziou 3 a 4 . Od verzie 4 už nie je možné použiť žiaden filter, galérie pracujú priamo s IDčkami príloh.
  • pre verziu 3.x sme používali redux filter a mohli sme upraviť zdroj obrázkov pre galériu – pri importe sa ukladali priamo na server, bez Media Library, generovania náhľadov atď. Nebolo nutné meniť šablóny cez child tému,  pretože sme našli spôsob ako cez mu pluginy zmeniť zdroj obrázkov centrálne.  Samozrejme, takúto galériu nebolo možné editovať v admine.
  • pre verziu 4.x je nutné prepísať templaty a widgety pre elementor, ak chceme vyriešiť galériu inak

Koľko galérii ponúka Houzez?

  • šesť (3.x) alebo sedem (4.x) , ale reálne sme použili dve/tri:
    • č. 3 – s podobným rozložením ako mali weby na Realsofte – jedna veľká fotka a slideshow malých fotiek pod ňou
    • č.5  – s podobným rozložením ako majú teraz nehnutelnosti.sk – jedna veľká fotka a dve menšie, zvyšok fotiek sa zobrazí až na kliknutie
    • č.7 – podobne ako 5, ale zobrazuje 4 menšie fotky

Najčastejšie problémy (požadované úpravy) s galériami:

  • Houzez nepočíta(l) s tým, že jedna ponuka môže mať rôzne rozmery fotiek a že sa môžu striedať fotky na ležato a na výšku (nejako mimo našich krajín počítajú s tým, že prezentácia nehnuteľnosti je to najdôležitejšie a že si dá na toto maklér pozor)
  • Houzez nepočíta s tým, že na fotke môžu byť dva vodoznaky resp. akýkoľvek vodoznak (v náhľade galérii sa fotky orezávajú, správne sa zobrazia až pri prezeraní galérie) –   dá sa to vyriešiť, ale keďže nehnutelnosti.sk to majú rovnako, prestáva orezanie vodoznaku v náhľade galérie vadiť
  • bug vo verzii 3.4.9 – photoswipe v náhľade rozťahuje fotku na celú šírku okna, css to nevyrieši, treba opraviť kód
  • malé náhľady v galérii 3 nie sú rovnaké (fotky na výšku treba prispôsobiť)
  • všetko je responzívne, takže sa malé náhľady v galériach  5 a 7 prispôsobujú prvej fotke, ak je na výšku, vie to vyzerať divne…

No a do toho prišiel Houzez s plnou podporou Elementora, vlastných widgetov pre detail ponuky a tieto widgety nie vždy používajú rovnaké riešenie ako v templatoch.

Ktoré súbory súvisia s galériami a kde ich nájsť?

Templaty:  klasicky v parent téme v podadresári property-details.  Pre desktop sú to súbory top-area-v1 až top-area-v7.  Galéria pre mobily je potom v samostatných súboroch /partials/gallery-vxx.

Elementor:  v plugine houzez-theme-functionality v podadresári elementor/widgets/single-property ,
súbory images-gallery-v1 až v5 a section-toparea-v1 až section-toparea-v7

K tomu súbory pre section block gallery…

Detailne tieto súbory prechádzame pri implementácii nášho nového pluginu HEI – Houzez External Images.

Komentár na záver

Najbizardnejšie požiadavky na galériu:

  • chcem aby to fungovalo ako na bazos.sk, tam obrázky neskáču (pod skákaním sa myslí preklikávanie medzi fotkou naležato a na výšku)
  • chceme, aby boli všetky fotky rovnaké, ale aby sa neorezali  (tak buď ich zdeformujete alebo niektoré budú mať po bokoch prázdny priestor)

Ďaľšie články

Vlastný realitný web alebo web ako služba?

Web pre realitku
JM Support - Webidea Vlastný realitný web alebo web ako služba?
Vlastný realitný web alebo web ako služba? Túto otázku riešila snáď každá realitná kancelária, dokonca ajzabehnuté značky, keď skončili weby postavené na správcovskom systéme Realsoft.  Bez ohľadu na to, že…

Obzretie sa za rokom 2025

Novinky
JM Support - Webidea Obzretie sa za rokom 2025
Dovolili sme si požičať obrázok z nehnutelnosti.sk, pretože plne vystihuje celý minulý rok. Nehnutelnosti.sk sa rozhodili ukončiť prevádzku správcovského systému Realsoft a prejsť na nový systém Admin Nehnuteľnosti, takže sa…