Add deployment guide for portfolio gallery and multiple categories

PORTFOLIO_GALLERY_UPDATE.md

@@ -0,0 +1,194 @@
+# Обновление галереи портфолио и множественные категории
+
+## Что реализовано
+
+### 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
+
+## Обратная совместимость
+
+Если в проекте портфолио:
+- **Нет галереи** - отображается только главное изображение
+- **Нет категорий** - секция категорий скрыта
+- **Одно фото** - галерея не отображается, показывается одно фото
+
+Все старые проекты продолжат работать без изменений!