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 */}