diff --git a/frontend/src/Components/ComponentUtils/ImageGalleryCard.js b/frontend/src/Components/ComponentUtils/ImageGalleryCard.js index 3e71e68..8e5a83c 100644 --- a/frontend/src/Components/ComponentUtils/ImageGalleryCard.js +++ b/frontend/src/Components/ComponentUtils/ImageGalleryCard.js @@ -159,7 +159,7 @@ const ImageGalleryCard = ({ )} {/* Display-only mode: Show existing description */} - {!isEditMode && imageDescription && mode === 'preview' && ( + {!isEditMode && imageDescription && (mode === 'preview' || mode === 'single-image') && (
{imageDescription}
diff --git a/frontend/src/Components/Pages/PublicGroupImagesPage.js b/frontend/src/Components/Pages/PublicGroupImagesPage.js index a427620..e0a93fc 100644 --- a/frontend/src/Components/Pages/PublicGroupImagesPage.js +++ b/frontend/src/Components/Pages/PublicGroupImagesPage.js @@ -52,7 +52,7 @@ const PublicGroupImagesPage = () => { 0 ? group.images.map(img => ({ - ...img, // Pass all image fields including previewPath + ...img, // Pass all image fields including previewPath and imageDescription remoteUrl: `/download/${img.fileName}`, // Keep for backward compatibility originalName: img.originalName || img.fileName, id: img.id @@ -61,6 +61,13 @@ const PublicGroupImagesPage = () => { enableReordering={false} mode="single-image" emptyMessage="Keine Bilder in dieser Gruppe." + imageDescriptions={group.images && group.images.length > 0 ? + group.images.reduce((acc, img) => { + if (img.imageDescription) { + acc[img.id] = img.imageDescription; + } + return acc; + }, {}) : {}} /> diff --git a/frontend/src/Components/Pages/SlideshowPage.js b/frontend/src/Components/Pages/SlideshowPage.js index b7f4347..1c9c5d8 100644 --- a/frontend/src/Components/Pages/SlideshowPage.js +++ b/frontend/src/Components/Pages/SlideshowPage.js @@ -197,6 +197,28 @@ function SlideshowPage() { transition: `opacity ${TRANSITION_TIME}ms ease-in-out` }; + const imageDescriptionSx = { + position: 'fixed', + bottom: '140px', + left: '50%', + transform: 'translateX(-50%)', + backgroundColor: 'rgba(0,0,0,0.7)', + p: '15px 30px', + borderRadius: '8px', + maxWidth: '80%', + textAlign: 'center', + backdropFilter: 'blur(5px)', + zIndex: 10002 + }; + + const imageDescriptionTextSx = { + color: 'white', + fontSize: '18px', + margin: 0, + lineHeight: 1.4, + fontFamily: 'roboto' + }; + const descriptionContainerSx = { position: 'fixed', left: 40, @@ -231,6 +253,13 @@ function SlideshowPage() { {/* Hauptbild */} + {/* Bildbeschreibung (wenn vorhanden) */} + {currentImage.imageDescription && ( + + {currentImage.imageDescription} + + )} + {/* Beschreibung */} {/* Titel */}