Виправити відображення сітки на сторінці проекту (галерея)
Передісторія: наразі перепрацьовуємо старий сайт https://tero.design — фактично створюється копія сайту з невеликими доопрацюваннями. Виконавець зробив більшу частину роботи, але застряг на одному моменті і йому потрібна допомога для завершення роботи. Я попросив викласти суть проблеми і описати завдання, і нижче ви можете ознайомитися з цим.
Проміжна версія сайту знаходиться на під-домені — https://app.tero.design
🧩 Суть задачі:
Потрібно повністю перепроектувати логіку відображення контенту на сторінці окремого проекту — щоб галерея (grid) з зображеннями і відео відображалася коректно у вигляді адаптивної цегляної кладки (masonry layout). Зараз сітка ламається, ширини і висоти обчислюються некоректно, є обрізання, накладання і візуальні баги.
Приклад того, яким має бути: https://tero.design/project/80 і https://tero.design/project/61
Поточна версія: https://app.tero.design/project/80 і https://app.tero.design/project/61
📌 Що вже реалізовано:
Laravel 11 (PHP 8.2) + Blade-шаблон.
Контент (відео, зображення, 3D-тур, шторки) передається у multimedia_grid (рядками і комірками).
В кожному рядку: розрахунок кінцевої висоти за пропорціями контенту (ratio), далі розподіл за flex-відсотками.
Є кастомний JS для анімації, появи і обробки шторки.
Сітка рендериться через HTML + CSS + JS, без сторонніх бібліотек (Masonry, Packery і т.п. не використовується).
❌ Проблема:
Некоректний розрахунок flex-відсотків. Деякі зображення/відео обрізаються або розтягуються не за пропорціями.
Неконсистентна висота рядка. Іноді контент у рядку обрізаний, іноді — заповнює не всю ширину.
Відео вузькі і високі — займають занадто багато ширини, порушуючи сітку.
На мобільній версії баги з 100% шириною і auto-висотою.
JS конфліктує з lazyload і canvas curtain. Не завжди коректно ініціалізується.
Причина невідома: конфлікт стилів, логіки або помилки розрахунку в PHP/JS.
Поведіночка елементів неконсистентна: в одних рядках все нормально, в інших — повний розвал.
Є кастомна логіка покадрової появи елементів (showItemsSequentially), яка може впливати на позиціонування.
✅ Що потрібно зробити:
Переписати сітку проекту під реальний адаптивний masonry layout, з урахуванням усіх типів контенту:
img — звичайні зображення.
video — відеофайли (з loop, autoplay, muted).
vr — iframe 3D-тур.
curtain — шторки (дві картинки з canvas-роздільником).
Виправити розрахунок ширини/висоти на стороні PHP (або відмовитися від нього на користь JS, якщо потрібно).
Зробити коректну адаптивну поведінку на всіх пристроях (десктоп, планшет, смартфон).
Забезпечити стабільне появлення всіх блоків, без дергань, просідань, багів lazyload.
За бажанням — можна використовувати бібліотеку для masonry: наприклад, Masonry.js, Packery або CSS Grid/Flex з JavaScript розрахунком.
Виносити JS у окремий файл, не інлайново.
💡 Що може допомогти:
Проекти підвантажуються з бази через Laravel.
У проекті вже використовуються Vue + ElementPlus (в адмінці), але на фронті Blade.
Вся мультимедія у /public/multimedia/....
Можна зберігати пропорції контенту через getimagesize(), але якщо це не допомагає — можна використовувати onload у JS для розрахунку.
🔐 Важливо:
Має бути кросбраузерно.
Підтримка мобільних пристроїв обов’язкова.
Адаптивність (висота рядків, ширина колонок) має бути гнучкою, але при цьому візуально збалансованою.
Код має бути чистим, з коментарями.
🧾 Що надати:
Рефакторинг Blade-шаблону сторінки проекту.
Виносені стилі і скрипти (бажано — app.css, project.js).
Робочу masonry-сітку, де:
немає обрізаних елементів;
немає накладань;
шторки і відео працюють коректно;
мобільна версія виглядає адекватно.
🔧 Технології проекту:
Laravel 11 (PHP 8.2)
Vue 3 (для адмінки)
Element Plus (UI)
Flysystem, VueFinder
Дякую за увагу.
Чекаю з нетерпінням ваших пропозицій щодо вартості та термінів реалізації цього завдання.
За питаннями — звертайтеся, намагатимусь швидко відповісти
-
13 днів35 626 UAH
223 13 днів35 626 UAHПривіт!
Я верстальниця з 2-річним досвідом. Бачила ваш проект — знайомі болі з masonry, lazy load і стрибаючими пропорціями. Хочу допомогти.
Що зроблю:
Розберуся, чому ламається розрахунок висот.
Перепишу сітку на CSS Grid + JS для складних випадків (відео, шторки).
Приберу дергання при завантаженні.
… Перевірю на реальних пристроях.
Термін: 3-5 днів.
Чому я:
Робила адаптивні masonry-галереї без jQuery.
Знаю, як змусити iframe і video поводитися в сітці.
Mobile-first підхід.
-
15 днів47 501 UAH
12912 67 0 15 днів47 501 UAHВітаю! Виконаю ваше завдання швидко і якісно.
Моє портфоліо: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Пишіть, почну сьогодні працювати. Буду радий співпраці з Вами!
-
1 день3563 UAH
717 21 2 1 1 день3563 UAHВітаю. Я бачу помилку у неправильному вказанні висоти та ширини у html-коді для відео блоків і для блоку з панорамою - у відео просто вони поміняні місцями, схоже, вони задаються вручну через адмінку і просто ввели неправильні дані, звідси і проблема. Загалом тут той самий скрипт розраховує розміри, що і в початковій версії, тож немає потреби ще й флекс-проценти рахувати на php. Але в іншому готовий допомогти усунути баги, хоча я жодних проблем, крім елементів з неправильними значеннями вихідних розмірів, не побачив.
-
10 днів35 626 UAH
134 10 днів35 626 UAHПривіт Дмитро 🧱
Я реалізовував адаптивні masonry-мережі в Laravel/Blade-шаблонах, включаючи динамічний мультимедійний контент (відео, шторки, 3D-тур, зображення) — і стикався з тими ж проблемами, що і у вас: некоректний розрахунок розмірів, баги в мобільній версії, конфлікти JS з lazyload і анімаціями.
📌 Приклад аналогічного проекту — https://octus.com/: кастомний фронт з анімаціями, динамічною підгрузкою блоків і оптимізацією відео/зображень.
Що я пропоную:
🔹 Перепишу masonry-мережу з повноцінною адаптивністю (CSS Grid або з використанням Masonry.js за бажанням)
🔹 Коректний розрахунок розмірів: або на стороні JS (onload + naturalHeight/Width), або PHP з fallback
… 🔹 Усуну баги з накладанням, обрізанням, нестабільними пропорціями
🔹 Забезпечу підтримку всіх типів контенту: зображення, відео, iframe, curtain з canvas
🔹 Виношу JS у окремий модуль project.js, без інлайна, з коментарями та акуратною ініціалізацією
🔹 Орієнтуюсь на чистоту коду, кросбраузерність і адаптивність
🔧 Laravel 11, PHP 8.2, Blade, JS – досвід 10+ років
🔧 Готовий взаємодіяти безпосередньо з поточним виконавцем, щоб не ламати логіку, а доопрацювати акуратно
GitHub – https://github.com/berestovskiy
Clutch – https://clutch.co/profile/sbase#highlights
Website – https://sbase.team/
Можу приступити вже сьогодні.
Готовий виконати частину мережі як демонстрацію підходу — після чого обговоримо фінальну ціну і терміни.
Cheers, Антон ✌️
-
7 днів53 439 UAH
421 7 днів53 439 UAHПривіт Дмитре,
Я проаналізував проблеми з сіткою на вашому проміжному сайті і можу впровадити надійне рішення протягом 5-7 днів.
-
У вас для каждого элемента width и height в админке зпдпются? На app.tero.design/project/80 для видео они в коде страницы перепутаны местами.
Похоже, на другой странице та же фигня, поскольку там неправильные пропорции только в строке с 3D панорамой.
-
Актуальні фриланс-проєкти в категорії HTML та CSS верстання
Веб-дизайн та розробкаПривіт! Для поточного проекту шукаю двох окремих спеціалістів: веб-дизайнера (Figma) веб-розробника (Frontend / WordPress) Проект включає завдання типу: лендинги, інтернет-магазин, адмін-панелі, сайт на WordPress, а також за необхідності невеликі завдання на React / Next.js та… HTML та CSS верстання, Дизайн сайтів ∙ 3 дні тому ∙ 114 ставок |
Потрібний розробник Друпал Dupal для правок на кількох сайтах.Потрібний розробник Друпал Dupal для правок на кількох сайтах. Сайт розбух і заповнив весь хостинг .. HTML та CSS верстання, Веб-програмування ∙ 3 дні 7 годин тому ∙ 39 ставок |
Оптимізація швидкості сайту WordPress
5092 UAH
повні деталі надішлемо в особисті повідомлення Мета Максимально прискорити завантаження сайту, особливо на мобільних пристроях. KPI (обов'язково) Після завершення робіт необхідно досягти наступних показників. Mobile Performance 90+ LCP менше 2.2 сек INP менше 200 мс CLS менше… HTML та CSS верстання, Javascript та Typescript ∙ 3 дні 22 години тому ∙ 67 ставок |
Сверстати сайт і підв'язати його до Shopifyзверстати сайт і підв'язати його до shopify на макеті основна сторінка сторінки товарів не буде, буде модальне вікно з вибором обсягу баночки крему та його кількості після вікно доставки та оплати замовлення повинно йти в shopify з повною інформацією про замовлення… HTML та CSS верстання, Веб-програмування ∙ 4 дні 1 година тому ∙ 79 ставок |
Оптимізація сайту
Оптимізація сайту jdgreta.co.uk на Shopify. Сео аудит додано до проекту. Основні завдання - - Виправити всі мета дані - Виконати ТЗ для програміста (оскільки в цьому проекті поєднані завдання для програміста та СЕО, якщо ви не компанія - можете скористатися допомогою) -… HTML та CSS верстання, PHP ∙ 5 днів 1 година тому ∙ 33 ставки |
Krakow