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