smartsoltech_site/PORTFOLIO_GALLERY_UPDATE.md

Обновление галереи портфолио и множественные категории

Что реализовано

1. Множественные категории для портфолио

• ✅ Изменено поле category (ForeignKey) на categories (ManyToManyField)
• ✅ Теперь каждая работа может принадлежать нескольким категориям
• ✅ Обновлена админка с горизонтальным фильтром категорий
• ✅ Отображение всех категорий в карточках портфолио и на детальной странице

2. Продвинутая галерея изображений

• ✅ Thumbnails слева - вертикальная сетка миниатюр с скроллом
• ✅ Большое фото справа - главное изображение с навигацией
• ✅ Навигация стрелками - кнопки Prev/Next для пролистывания
• ✅ Клавиатурная навигация - Arrow Left/Right для пролистывания
• ✅ Увеличение по клику - Lightbox для полноэкранного просмотра
• ✅ Свайпы для мобильных - touch events для планшетов и смартфонов
• ✅ Скролл колесом мыши - дополнительный способ навигации
• ✅ Счетчик изображений - показывает текущее фото и общее количество
• ✅ Подписи к фото - отображение caption под изображением
• ✅ Адаптивный дизайн - на мобильных thumbnails переходят наверх горизонтально

Инструкция по деплою на сервер

Шаг 1: Обновить код

cd /opt/smartsoltech_site
git pull origin master

Шаг 2: Создать и применить миграции

# Создать миграцию для изменения category → categories
docker exec django_app python smartsoltech/manage.py makemigrations web

# Применить миграции
docker exec django_app python smartsoltech/manage.py migrate

ВАЖНО: Django автоматически создаст промежуточную таблицу web_portfolioitem_categories для ManyToMany связи.

Шаг 3: Перенести данные из старого поля (если нужно)

Если у вас уже есть данные в старом поле category, выполните миграцию данных:

docker exec -it django_app python smartsoltech/manage.py shell

В shell выполните:

from web.models import PortfolioItem

# Перенести категории из старого поля в новое
for item in PortfolioItem.objects.all():
    if hasattr(item, 'category') and item.category:
        item.categories.add(item.category)
        print(f"Migrated category for: {item.title}")

exit()

Шаг 4: Перезапустить контейнеры

docker compose restart django_app

Шаг 5: Проверить работу на сайте

1. Откройте админку: https://smartsoltech.kr/admin/web/portfolioitem/
2. Откройте любой проект
3. В поле "Категории" теперь можно выбрать несколько категорий через горизонтальный фильтр
4. Добавьте несколько изображений в "Галерея изображений"
5. Сохраните и откройте страницу проекта

Шаг 6: Тестирование галереи

На десктопе:

• ✓ Миниатюры слева отображаются вертикально
• ✓ Клик по миниатюре переключает главное фото
• ✓ Стрелки Prev/Next работают
• ✓ Клавиши ← → переключают фото
• ✓ Скролл колесом мыши переключает фото
• ✓ Клик по большому фото открывает Lightbox
• ✓ Счетчик показывает "X из Y"
• ✓ Caption отображается внизу

На мобильных/планшетах:

• ✓ Миниатюры сверху в горизонтальной полосе
• ✓ Свайп влево → следующее фото
• ✓ Свайп вправо → предыдущее фото
• ✓ Кнопки навигации работают
• ✓ Клик на фото открывает Lightbox

Структура изменений

Файлы изменены:

1. smartsoltech/web/models.py - изменено поле category → categories (ManyToManyField)
2. smartsoltech/web/admin.py - добавлен filter_horizontal, categories_display колонка
3. smartsoltech/web/views.py - обновлены фильтры category_id → categories__id, добавлен prefetch
4. smartsoltech/web/templates/web/portfolio_detail.html - полностью новая галерея с навигацией
5. smartsoltech/web/templates/web/portfolio_list.html - отображение множественных категорий

База данных:

• Создана таблица: web_portfolioitem_categories (ManyToMany связь)
• Старое поле category_id будет удалено Django автоматически при миграции

Возможные проблемы и решения

Проблема: Миграция не создается

# Проверить статус миграций
docker exec django_app python smartsoltech/manage.py showmigrations web

# Принудительно создать миграцию
docker exec django_app python smartsoltech/manage.py makemigrations web --empty

Проблема: Старые данные не перенеслись

Выполните скрипт миграции данных из Шага 3.

Проблема: Галерея не работает на мобильных

1. Проверьте консоль браузера на ошибки JavaScript
2. Убедитесь что файл portfolio_detail.html обновился на сервере
3. Очистите кэш браузера (Ctrl+Shift+R)

Проблема: Lightbox не открывается

1. Проверьте что CDN Lightbox доступен:
   • CSS: https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css
   • JS: https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js
2. Проверьте консоль на ошибки загрузки скриптов

Настройка в админке

Добавление проекта с галереей:

1. Перейти в "Портфолио" → "Добавить"
2. Заполнить основные поля (название, описание, клиент, дата)
3. В поле "Категории" выбрать несколько категорий (переносить стрелками →)
4. Загрузить "Главное изображение" - это будет первое фото в галерее
5. В секции "Галерея изображений" добавить 3-10 дополнительных фото:
   • Загрузить изображение
   • Добавить подпись (caption) - необязательно
   • Установить порядок (order) - 0, 10, 20 и т.д. для сортировки
6. Сохранить

Редактирование категорий:

• Поле "Категории" теперь с горизонтальным фильтром
• Слева "Доступные категории", справа "Выбранные категории"
• Двойной клик или стрелки для перемещения между списками
• Можно выбрать сколько угодно категорий

Преимущества новой реализации

Для пользователей:

• 🎯 Более удобная навигация по фотографиям проекта
• 👆 Интуитивные свайпы на мобильных устройствах
• 🖼️ Thumbnails позволяют быстро перейти к нужному фото
• 🔍 Увеличение фото в Lightbox для детального просмотра
• 📱 Адаптивный дизайн работает на всех устройствах

Для администраторов:

• 🏷️ Гибкая категоризация - один проект в нескольких категориях
• 📊 Удобный горизонтальный фильтр для выбора категорий
• 👁️ Колонка "Категории" в списке показывает все категории проекта
• 🎨 Визуальный редактор галереи прямо в админке

Технические детали

CSS классы:

• .gallery-container - контейнер галереи (flex)
• .gallery-thumbnails - колонка миниатюр
• .gallery-main - главный блок изображения
• .thumbnail-item - миниатюра (80x80px)
• .thumbnail-item.active - активная миниатюра (синяя рамка)
• .gallery-nav - кнопки навигации
• .gallery-counter - счетчик изображений

JavaScript функции:

• updateGallery(index) - обновление отображения галереи
• handleSwipe() - обработка свайпов на touch устройствах
• Event listeners: click, keydown, touchstart/touchend, wheel

Оптимизации:

• prefetch_related('categories', 'gallery_images') - предзагрузка связей
• Passive event listeners для touchstart/touchend
• CSS transitions для плавной анимации
• Scrollbar кастомизирован для thumbnails

Обратная совместимость

Если в проекте портфолио:

• Нет галереи - отображается только главное изображение
• Нет категорий - секция категорий скрыта
• Одно фото - галерея не отображается, показывается одно фото

Все старые проекты продолжат работать без изменений!