Naprawić wyświetlanie siatki na stronie projektu (galeria)
Przed-historia: obecnie przebudowujemy starą stronę https://tero.design - faktycznie tworzona jest kopia strony z drobnymi poprawkami. Wykonawca wykonał większość pracy, ale utknął na jednym etapie i potrzebuje pomocy, aby dokończyć zadanie. Poprosiłem o opisanie istoty problemu i zadania, a poniżej możesz zapoznać się z tym.
Strona tymczasowa znajduje się na subdomenie - https://app.tero.design
🧩 Sedno zadania:
Trzeba całkowicie przebudować logikę wyświetlania treści na stronie pojedynczego projektu — tak aby galeria (grid) z obrazami i wideo wyświetlała się poprawnie w formie responsywnego układu cegiełkowego (masonry layout). Obecnie siatka się psuje, szerokości i wysokości są obliczane niepoprawnie, występują przycięcia, nakładki i błędy wizualne.
Przykład jak powinno wyglądać: https://tero.design/project/80 oraz https://tero.design/project/61
Obecna wersja: https://app.tero.design/project/80 oraz https://app.tero.design/project/61
📌 Co jest obecnie zrealizowane:
Laravel 11 (PHP 8.2) + Blade-template.
Treść (wideo, obrazy, 3D-tur, zasłony) jest przekazywana do multimedia_grid (wierszami i komórkami).
W każdym wierszu: obliczanie końcowej wysokości na podstawie proporcji treści (ratio), następnie rozkład według flex-procentów.
Posiada własny JS do animacji, pojawiania się i obsługi zasłony.
Siatka jest renderowana za pomocą HTML + CSS + JS, bez użycia bibliotek zewnętrznych (np. Masonry, Packery).
❌ Problem:
Niepoprawne obliczanie flex-procentów. Niektóre obrazy/wideo są przycinane lub rozciągane niezgodnie z proporcjami.
Niejednolita wysokość wiersza. Czasami treść jest przycinana, innym razem — nie wypełnia całej szerokości.
Wąskie i wysokie wideo — zajmują za dużo szerokości, zakłócając siatkę.
Błędy na wersji mobilnej z szerokością 100% i auto-wysokością.
JS koliduje z lazyload i canvas curtain. Nie zawsze poprawnie się inicjuje.
Przyczyna nieznana: konflikt stylów, logiki lub błędy w obliczeniach PHP/JS.
Zachowanie elementów jest niekonsekwentne: w niektórych wierszach wszystko działa poprawnie, w innych — totalny chaos.
Posiada własną logikę pojawiania się elementów krok po kroku (showItemsSequentially), która może wpływać na pozycjonowanie.
✅ Co trzeba zrobić:
Przebudować siatkę projektu na prawdziwy responsywny masonry layout, uwzględniając wszystkie typy treści:
img — zwykłe obrazy.
video — pliki wideo (z loop, autoplay, muted).
vr — iframe 3D-tur.
curtain — zasłony (dwa obrazki z separatorami canvas).
Naprawić obliczanie szerokości/wysokości po stronie PHP (lub zrezygnować z tego na rzecz JS, jeśli konieczne).
Zapewnić poprawne zachowanie responsywne na wszystkich urządzeniach (desktop, tablet, smartfon).
Zabezpieczyć stabilne pojawianie się wszystkich bloków, bez szarpania, opóźnień i błędów lazyload.
Opcjonalnie — można użyć biblioteki do masonry: np. Masonry.js, Packery lub CSS Grid/Flex z obliczeniami w JavaScript.
Wydzielić JS do osobnego pliku, nie w inlinie.
💡 Co może pomóc:
Projekty są ładowane z bazy przez Laravel.
W projekcie już używane Vue + ElementPlus (w panelu admina), ale na froncie Blade.
Wszystkie multimedia znajdują się w /public/multimedia/....
Można zapisywać proporcje treści za pomocą getimagesize(), ale jeśli to nie pomaga — można użyć onload w JS do obliczeń.
🔐 Ważne:
Powinno działać w różnych przeglądarkach.
Obsługa urządzeń mobilnych obowiązkowa.
Responsywność (wysokość wierszy, szerokość kolumn) powinna być elastyczna, ale wizualnie zrównoważona.
Kod musi być czysty, z komentarzami.
🧾 Co dostarczyć:
Zrefaktoryzowany Blade-template strony projektu.
Wydzielone style i skrypty (najlepiej — app.css, project.js).
Działającą siatkę masonry, gdzie:
brak przyciętych elementów;
brak nakładek;
zasłony i wideo działają poprawnie;
wersja mobilna wygląda odpowiednio.
🔧 Technologie projektu:
Laravel 11 (PHP 8.2)
Vue 3 (dla panelu admina)
Element Plus (UI)
Flysystem, VueFinder
Dziękuję za uwagę. Czekam na Państwa propozycje dotyczące kosztów i terminów realizacji tego zadania. Jeśli będą pytania — proszę się kontaktować, postaram się szybko odpowiedzieć
-
13 dni3000 PLN
223 13 dni3000 PLNCześć!
Jestem front-end developerem z 2-letnim doświadczeniem. Widziałam Twój projekt — znajome problemy z masonry, lazy load i skaczącymi proporcjami. Chcę pomóc.
Co zrobię:
Zrozumiem, dlaczego obliczenia wysokości się psują.
Przepiszę siatkę na CSS Grid + JS dla trudnych przypadków (wideo, zasłony).
Usunę szarpanie podczas ładowania.
… Sprawdzę na rzeczywistych urządzeniach.
Termin: 3-5 dni.
Dlaczego ja:
Robiłam responsywne galerie masonry bez jQuery.
Wiem, jak sprawić, by iframe i wideo zachowywały się w siatce.
Podejście mobile-first.
-
15 dni4000 PLN
12912 67 0 15 dni4000 PLNWitam! Wykonam Twoje zadanie szybko i jakościowo.
Moje portfolio: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Pisz, zacznę dziś pracować. Będę się cieszyć na współpracę z Tobą!
-
1 dzień300 PLN
717 21 2 1 1 dzień300 PLNWitam. Widzę błąd w nieprawidłowym określeniu wysokości i szerokości w kodzie html dla bloków wideo oraz dla bloku z panoramą - w wideo po prostu są one zamienione miejscami, wygląda na to, że są ustawiane ręcznie przez panel administracyjny i po prostu wpisano nieprawidłowe dane, stąd problem. Ogólnie ten sam skrypt oblicza rozmiary, co w wersji początkowej, więc nie ma potrzeby jeszcze liczyć flex-procentów na php. Ale chętnie pomogę usunąć błędy, choć nie zauważyłem żadnych problemów oprócz elementów z nieprawidłowymi wartościami początkowych rozmiarów.
-
10 dni3000 PLN
134 10 dni3000 PLNHej Дмитрий 🧱
Realizowałem responsywne siatki masonry w Laravel/Blade, w tym dynamiczną multimedialną zawartość (wideo, zasłony, wycieczki 3D, obrazy) — i napotykałem te same problemy co wy: nieprawidłowe obliczanie rozmiarów, błędy w wersji mobilnej, konflikty JS z lazyload i animacjami.
📌 Przykład podobnego projektu — https://octus.com/: niestandardowy front z animacjami, dynamicznym ładowaniem bloków i optymalizacją wideo/obrazów.
Co proponuję:
🔹 Przepiszę siatkę masonry z pełną responsywnością (CSS Grid lub z użyciem Masonry.js na życzenie)
🔹 Prawidłowe obliczanie rozmiarów: albo po stronie JS (onload + naturalHeight/Width), albo PHP z fallbackiem
… 🔹 Usunę błędy z nakładaniem, przycinaniem, niestabilnymi proporcjami
🔹 Zapewnię obsługę wszystkich typów zawartości: obrazy, wideo, iframe, curtain z canvas
🔹 Wydzielę JS do osobnego modułu project.js, bez inline, z komentarzami i staranną inicjalizacją
🔹 Skupienie na czystości kodu, kompatybilności między przeglądarkami i responsywności
🔧 Laravel 11, PHP 8.2, Blade, JS – ponad 10 lat doświadczenia
🔧 Gotów do bezpośredniej współpracy z obecnym wykonawcą, aby nie łamać logiki, a dopracować wszystko starannie
GitHub – https://github.com/berestovskiy
Clutch – https://clutch.co/profile/sbase#highlights
Strona internetowa – https://sbase.team/
Mogę zacząć już dziś.
Chętnie wykonam część siatki jako demonstrację podejścia — potem omówimy końcową cenę i terminy.
Pozdrawiam, Anton ✌️
-
7 dni4500 PLN
421 7 dni4500 PLNWitaj Dmitry,
Przeanalizowałem problemy z siatką na Twojej tymczasowej stronie i mogę wdrożyć solidne rozwiązanie w ciągu 5-7 dni.
-
У вас для каждого элемента width и height в админке зпдпются? На app.tero.design/project/80 для видео они в коде страницы перепутаны местами.
Похоже, на другой странице та же фигня, поскольку там неправильные пропорции только в строке с 3D панорамой.
-
Aktualne zlecenia dla freelancerów w kategorii Javascript & Typescript
Szukam doświadczonego programisty Full Stack do stworzenia usługi SaaS dla sklepów internetowych.Pomysł usługi: Klient przesyła link do swojego pliku produktowego (XML lub CSV). Usługa automatycznie pobiera produkty, pobiera ich zdjęcia i tworzy nowe reklamy na podstawie gotowych szablonów: cena, zniżka, logo, banery promocyjne itp. Usługa powinna również zawierać prosty… Javascript & Typescript, Programowanie stron internetowych ∙ 2 dni 9 godzin temu ∙ 86 ofert |
Rozwój sceny WebGL/Three.js z generowaniem i eksportem 3D (snapshot) z animowanego shaderaOpis obiektu: Projekt przedstawia designerski stół, wykonany w formie realistycznego, głębokiego wiru (centralna wirówka, która płynnie przechodzi z szerokiego poziomego blatu w cienką, elegancką nogę). Istota zadania: Wymagany jest programista WebGL / Creative Coding do… Javascript & Typescript, Programowanie stron internetowych ∙ 3 dni 6 godzin temu ∙ 30 ofert |
Wsparcie i rozwój strony internetowej firmy sprzątającej
75 PLN
Szukam programisty / webmastera do długoterminowego wsparcia i rozwoju strony internetowej firmy sprzątającej. Strona: https://donely.ca O projekcie DoneLy Home Services — firma świadcząca usługi sprzątania w Kanadzie, która aktywnie się rozwija i rozszerza zasięg działalności.… Javascript & Typescript, Programowanie stron internetowych ∙ 5 dni 8 godzin temu ∙ 64 oferty |
Opracowanie strony internetowej według specyfikacji na FramerTrzeba zrobić stronę według tych parametrów, które są w specyfikacji https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Podajcie rzeczywistą stawkę na podstawie tego projektu Układ HTML i CSS, Javascript & Typescript ∙ 6 dni 9 godzin temu ∙ 30 ofert |
Opracowanie interaktywnej mapy Palworld dla strony internetowejPotrzebna jest interaktywna mapa Palworld na wzór: https://palworld.gg/map Potrzebujemy nie tylko statycznego obrazka, ale pełnoprawnej interaktywnej mapy, na której użytkownik może przeglądać lokalizacje, włączać/wyłączać kategorie obiektów, wyszukiwać potrzebne punkty i… Układ HTML i CSS, Javascript & Typescript ∙ 8 dni temu ∙ 36 ofert |
Kraków