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

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

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

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

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

### Шаг 1: Обновить код
```bash
cd /opt/smartsoltech_site
git pull origin master
```

### Шаг 2: Создать и применить миграции
```bash
# Создать миграцию для изменения 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`, выполните миграцию данных:

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

В shell выполните:
```python
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: Перезапустить контейнеры
```bash
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 автоматически при миграции

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

### Проблема: Миграция не создается
```bash
# Проверить статус миграций
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

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

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

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