From d63f67a2afba1b92610382aa1012428ccacb86bd Mon Sep 17 00:00:00 2001 From: Paul Nothaft Date: Sat, 7 Feb 2026 00:29:25 +0100 Subject: [PATCH] feat: improve hero image UX and live preview (#163, #158) - Update hero photo help text to mention category override capability - Add hint in category manager about default hero photo fallback - Add placeholder text in gallery preview for hero section - Ensure live preview updates correctly for header/divider style changes --- .../src/components/admin/EventCategoryManager.tsx | 5 +++++ frontend/src/components/admin/GalleryPreview.tsx | 13 ++++++++++--- frontend/src/i18n/locales/de.json | 6 ++++-- frontend/src/i18n/locales/en.json | 6 ++++-- 4 files changed, 23 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/admin/EventCategoryManager.tsx b/frontend/src/components/admin/EventCategoryManager.tsx index ef838315..87e62615 100644 --- a/frontend/src/components/admin/EventCategoryManager.tsx +++ b/frontend/src/components/admin/EventCategoryManager.tsx @@ -123,6 +123,11 @@ export const EventCategoryManager: React.FC = ({ even )} + {/* Hint about hero photo fallback */} +

+ {t('categories.categoryHeroHint')} +

+ {/* Add new category form */} {isAdding && (
diff --git a/frontend/src/components/admin/GalleryPreview.tsx b/frontend/src/components/admin/GalleryPreview.tsx index ae9948b3..463c026a 100644 --- a/frontend/src/components/admin/GalleryPreview.tsx +++ b/frontend/src/components/admin/GalleryPreview.tsx @@ -2,6 +2,7 @@ import React, { useMemo } from 'react'; import { Camera, Calendar } from 'lucide-react'; import { ThemeConfig, GalleryLayoutType, HeroDividerStyle } from '../../types/theme.types'; import { buildResourceUrl } from '../../utils/url'; +import { useTranslation } from 'react-i18next'; interface GalleryPreviewBranding { company_name?: string; @@ -64,12 +65,13 @@ const PreviewPhoto: React.FC<{
); -export const GalleryPreview: React.FC = ({ - theme, +export const GalleryPreview: React.FC = ({ + theme, branding, layoutType, - className = '' + className = '' }) => { + const { t } = useTranslation(); const mockPhotos = useMemo(() => generateMockPhotos(12), []); // Use the provided layoutType or fallback to theme's gallery layout @@ -252,6 +254,11 @@ export const GalleryPreview: React.FC = ({ January 15, 2026 + {/* Hero photo placeholder hint */} +
+ + {t('branding.heroPlaceholderText')} +
diff --git a/frontend/src/i18n/locales/de.json b/frontend/src/i18n/locales/de.json index d41952f5..faefbabd 100644 --- a/frontend/src/i18n/locales/de.json +++ b/frontend/src/i18n/locales/de.json @@ -719,7 +719,8 @@ "removeCoverPhoto": "Titelbild entfernen", "coverPhotoSet": "Titelbild erfolgreich festgelegt", "coverPhotoRemoved": "Titelbild entfernt", - "failedToSetCoverPhoto": "Titelbild konnte nicht festgelegt werden" + "failedToSetCoverPhoto": "Titelbild konnte nicht festgelegt werden", + "categoryHeroHint": "Wenn kein Titelbild für eine Kategorie festgelegt ist, wird das Standard-Hero-Foto verwendet." }, "events": { "noStatisticsAvailableYet": "Noch keine Statistiken verfügbar", @@ -882,7 +883,7 @@ "heroLogoPositionLabel": "Position", "heroLogoHidden": "Logo ausgeblendet", "heroPhoto": "Hero-Foto", - "heroPhotoHelp": "Wählen Sie ein hervorgehobenes Foto für das Hero-Galerie-Layout", + "heroPhotoHelp": "Wählen Sie ein Standard-Hero-Foto für die Galerie. Sie können dies pro Kategorie überschreiben.", "selectHeroPhoto": "Hero-Foto auswählen", "noHeroPhotoSelected": "Kein Hero-Foto ausgewählt", "heroPhotoSelected": "Hero-Foto ausgewählt", @@ -1432,6 +1433,7 @@ "saveTheme": "Design speichern", "previewLayout": "Vorschau-Layout", "livePreview": "Live-Vorschau", + "heroPlaceholderText": "Das Hero-Foto Ihrer Veranstaltung wird hier angezeigt", "whiteLabel": "White Label", "hidePoweredBy": "\"Powered by PicPeak\" Branding ausblenden", "hidePoweredByHelp": "Entfernen Sie die PicPeak-Kennzeichnung aus Galerie-Fußzeilen für ein vollständig personalisiertes Erscheinungsbild", diff --git a/frontend/src/i18n/locales/en.json b/frontend/src/i18n/locales/en.json index 522fcdb2..2b8f7c34 100644 --- a/frontend/src/i18n/locales/en.json +++ b/frontend/src/i18n/locales/en.json @@ -332,7 +332,8 @@ "removeCoverPhoto": "Remove Cover Photo", "coverPhotoSet": "Cover photo set successfully", "coverPhotoRemoved": "Cover photo removed", - "failedToSetCoverPhoto": "Failed to set cover photo" + "failedToSetCoverPhoto": "Failed to set cover photo", + "categoryHeroHint": "If no cover photo is set for a category, the default hero photo will be used." }, "events": { "title": "Events", @@ -508,7 +509,7 @@ "heroLogoPositionLabel": "Position", "heroLogoHidden": "Logo hidden", "heroPhoto": "Hero Photo", - "heroPhotoHelp": "Select a featured photo for the hero gallery layout", + "heroPhotoHelp": "Select a default hero photo for the gallery. You can override this per category.", "selectHeroPhoto": "Select Hero Photo", "noHeroPhotoSelected": "No hero photo selected", "heroPhotoSelected": "Hero photo selected", @@ -1147,6 +1148,7 @@ "saveTheme": "Save Theme", "previewLayout": "Preview Layout", "livePreview": "Live Preview", + "heroPlaceholderText": "Your event's hero photo will appear here", "whiteLabel": "White Label", "hidePoweredBy": "Hide \"Powered by PicPeak\" branding", "hidePoweredByHelp": "Remove the PicPeak attribution from gallery footers for a fully white-labeled experience",