Інтеграція конвертації HEIC, прев'ю та кропера на фронтенд (Сайт оголошень

Бюджет: 30 USD Термін: 3 дні

Чиста фронтенд-завдання: heic2any для конвертації, Cropper.js для обрізки, прев'ю-галерея та лоадер на час обробки. Все впроваджується в .tpl/.php шаблон форми без втручання в бекенд — на виході бекенд отримує готовий JPG через існуючий upload-скрипт.

Зроблю за 2–3 дні, 30 USD.

Шаблон форми завантаження на jQuery чи Vanilla JS?

Бюджет: 200 USD Термін: 7 днів

Привіт! Буду радий співпраці з вами. Мій досвід розробки веб-додатків JavaScript Vanilla JS / jQuery понад 15 років. Портфоліо: Freelancehunt

Бюджет: 175 USD Термін: 10 днів

Привіт! Я уважно прочитав бриф, і обсяг роботи чітко визначений. Це чисто фронтенд завдання — без змін на бекенді, без роботи з базою даних, без знань про движок Tamaranga. Просто чистий JavaScript, вставлений у правильний шаблонний файл. Дозвольте мені пояснити, як я це реалізую.
Технічний підхід
Крок 1 — Знайти шаблон завантаження
Спочатку я визначу правильний .tpl або .php шаблонний файл, який обробляє форму подачі/редагування оголошення — зокрема, елемент введення файлу для завантаження фото. Це єдиний інтеграційний пункт для всієї функціональності нижче.
Крок 2 — Конвертація HEIC у JPG
Використовуючи бібліотеку heic2any, завантажену через CDN — без інструментів збірки, без залежностей, просто вставляється в будь-який шаблон. Коли користувач вибирає файли .heic або .heif, конвертація запускається автоматично під час події зміни, перш ніж відбудеться щось інше. Вся конвертація відбувається на стороні клієнта — сервер ніколи не бачить HEIC файл.
Крок 3 — Індикатор завантаження
Чистий візуальний індикатор з'являється в момент початку конвертації і зникає, коли вона завершена. Простий CSS спінер або накладка прогресу — оформлений у стилі вашої існуючої теми. Для кількох файлів кожен файл показує свій власний статус конвертації, щоб користувач точно знав, що обробляється.
Крок 4 — Галерея попереднього перегляду
Після конвертації (або для стандартних JPG/PNG файлів) мініатюри відображаються в сітці попереднього перегляду під елементом введення файлу. Кожна мініатюра показує:
Попередній перегляд зображення
Ім'я файлу та розмір
Кнопка видалення для скасування вибору перед завантаженням
Кнопка обрізки для відкриття обрізувача для цього конкретного зображення
Крок 5 — Інтеграція Cropper.js
Натискання на обрізку на будь-якій мініатюрі попереднього перегляду відкриває модальне вікно з ініціалізованим Cropper.js на цьому зображенні. Користувач може:
Перетягувати для зміни позиції
Змінювати розмір області обрізки
Підтвердити обрізку → обрізана версія замінює оригінал у попередньому перегляді
Результат
Один добре прокоментований JavaScript файл (і мінімальний CSS для індикатора завантаження та модального вікна), який ви вставляєте у свою тему. Інструкції з реалізації включені, щоб ваша команда знала, до якого рядка шаблону додати посилання на скрипт. Код буде написаний на Vanilla JS — без залежностей від фреймворків, сумісний з шаблонами на основі jQuery без конфліктів.
Одне питання перед початком:
Чи використовує ваша тема Tamaranga jQuery чи чистий Vanilla JS? Це визначає, чи використовую я $.ajax від jQuery для подачі форми або рідний Fetch API — обидва працюють, просто хочу відповідати тому, що вже є в шаблоні, щоб уникнути конфліктів бібліотек. Розгорнути