From ac66b23aa94224a27773b02cfbf92d7ba06d3444 Mon Sep 17 00:00:00 2001 From: "Andrew K. Choi" Date: Mon, 24 Nov 2025 14:34:55 +0900 Subject: [PATCH] Add deployment guide for portfolio gallery and multiple categories --- PORTFOLIO_GALLERY_UPDATE.md | 194 ++++++++++++++++++++++++++++++++++++ 1 file changed, 194 insertions(+) create mode 100644 PORTFOLIO_GALLERY_UPDATE.md diff --git a/PORTFOLIO_GALLERY_UPDATE.md b/PORTFOLIO_GALLERY_UPDATE.md new file mode 100644 index 0000000..4dde007 --- /dev/null +++ b/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 + +## Обратная совместимость + +Если в проекте портфолио: +- **Нет галереи** - отображается только главное изображение +- **Нет категорий** - секция категорий скрыта +- **Одно фото** - галерея не отображается, показывается одно фото + +Все старые проекты продолжат работать без изменений!