Исправить отображение сетки на странице проекта (галерея)
Пред-история: переделываем в данный момент старый сайт 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-сетку, где:
нет обрезанных элементов;
нет наложений;
шторки и видео работают корректно;
mobile выглядит адекватно.
🔧 Технологии проекта:
Laravel 11 (PHP 8.2)
Vue 3 (для админки)
Element Plus (UI)
Flysystem, VueFinder
Спасибо за внимание.
Жду с нетерпением Ваших предложений по стоимости и срокам реализации данной задачи.
В случае вопросов - обращайтесь, буду стараться быстро ответить
-
13 дней36 245 UAH
223 13 дней36 245 UAHПривет!
Я верстальщица с 2-летним опытом. Видела ваш проект — знакомые боли с masonry, lazy load и прыгающими пропорциями. Хочу помочь.
Что сделаю:
Разберусь, почему ломается расчет высот.
Перепишу сетку на CSS Grid + JS для сложных случаев (видео, шторки).
Уберу дергания при загрузке.
… Проверю на реальных устройствах.
Срок: 3-5 дней.
Почему я:
Делал адаптивные masonry-галереи без jQuery.
Знаю, как заставить iframe и video вести себя в сетке.
Mobile-first подход.
-
15 дней48 327 UAH
13013 67 0 15 дней48 327 UAHПривет! Выполню ваше задание быстро и качественно.
Мое портфолио: https://freelancehunt.com/ua/freelancer/romas6ka.html#portfolio
Пишите, начну сегодня работать. Буду рад сотрудничеству с Вами!
-
1 день3625 UAH
717 21 2 1 1 день3625 UAHПриветствую. Я вижу ошибку в неправильном указании высоты и ширины в html-коде для видео блоков и для блока с панорамой - в видео просто они поменяны местами, похоже, они задаются вручную через админку и просто вбили неправильные данные, отсюда и проблема. Вообще тут тот же скрипт расчитывает размеры, что и в первоначальной версии, так что нет необходимости ещё и флекс-проценты считать на php. Но в остальном готов помочь устранить баги, хотя я никаких проблем, кроме элементов с неправильными значениями исходных размеров не увидел.
-
10 дней36 245 UAH
134 10 дней36 245 UAH𝗛𝗲𝘆 Дмитрий 🧱
Я реализовывал адаптивные masonry-сетки в Laravel/Blade-шаблонах, включая динамический мультимедийный контент (видео, шторки, 3D-тур, изображения) — и сталкивался с теми же проблемами, что и у вас: некорректный расчёт размеров, баги в мобильной версии, конфликты JS с lazyload и анимациями.
📌 Пример аналогичного проекта — https://octus.com/: кастомный front с анимациями, динамической подгрузкой блоков и оптимизацией видео/изображений.
Что я предлагаю:
🔹 Перепишу 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/
Могу приступить уже сегодня.
Готов выполнить часть сетки как демонстрацию подхода — после чего обсудим финальную цену и сроки.
𝗖𝗵𝗲𝗲𝗿𝘀, 𝗔𝗻𝘁𝗼𝗻 ✌️
-
7 дней54 368 UAH
421 7 дней54 368 UAHЗдравствуйте, Дмитрий,
Я проанализировал проблемы с сеткой на вашем временном сайте и могу реализовать надежное решение в течение 5-7 дней.
-
У вас для каждого элемента width и height в админке зпдпются? На app.tero.design/project/80 для видео они в коде страницы перепутаны местами.
Похоже, на другой странице та же фигня, поскольку там неправильные пропорции только в строке с 3D панорамой.
-
Актуальные фриланс-проекты в категории HTML и CSS верстка
Адаптивная вёрстка сайта с анимациейНужно сверстать сайт по готовому дизайну из Figma. Админка сайта - Laravel - viar-art.pl Сайт должен быть современным, адаптивным, быстрым и удобным для пользователя. Вёрстка должна точно соответствовать макету, корректно отображаться на мобильных устройствах, планшетах и… HTML и CSS верстка, Создание сайта под ключ ∙ 10 часов 20 минут назад ∙ 52 ставки |
Обновить кастомный фронтенд на Prestashop
10 000 UAH
Необходимо доработать и обновить кастомную тему интернет-магазина на PrestaShop. Дизайн уже существует, но были внесены правки (выравнивание элементов, UI-адаптации), которые нужно аккуратно интегрировать и довести до стабильного вида. Задачи: Обновление и оптимизация кастомной… HTML и CSS верстка ∙ 15 часов 41 минута назад ∙ 28 ставок |
Вебфлоу разработчик для заполнения страниц портфолио на сайтеСайт разработан кастомно на Webflow для строительной компании, нужно быстро заполнить страницы проектов по одному шаблону (заменить картинки и тексты) Для 2 языков Количество - 6 штук Готовы начинать как можно скорее, спасибо! HTML и CSS верстка, Веб-программирование ∙ 2 дня 10 часов назад ∙ 50 ставок |
Верстка та посадка на WordPress сайту будівельної компанії (Premium-сегмент) з акцентом на SEOОписание проекта: Ищем опытного WordPress-разработчика для верстки и посадки готового дизайн-макета из Figma на CMS WordPress. Важный контекст проекта: Это не разработка сайта с нуля. Компания имеет действующий сайт, мы обновляем структуру и дизайн. Нам необходимо реализовать… HTML и CSS верстка, Веб-программирование ∙ 2 дня 14 часов назад ∙ 78 ставок |
Перенос сайта с OpenCart на платформу ХорошопДобрый день. Есть сайт на OpenCart, интернет-магазин. Нужно перенести структуру сайта на платформу Хорошоп, подобрать дизайн для нового сайта и сделать его полноценно работающим. HTML и CSS верстка, Веб-программирование ∙ 3 дня 11 часов назад ∙ 43 ставки |
Krakow