diff --git a/frontend/src/components/Constructor/ElementEditorPanel.tsx b/frontend/src/components/Constructor/ElementEditorPanel.tsx
index c7a18fc..ff0e3d2 100644
--- a/frontend/src/components/Constructor/ElementEditorPanel.tsx
+++ b/frontend/src/components/Constructor/ElementEditorPanel.tsx
@@ -495,6 +495,9 @@ export function ElementEditorPanel({
galleryHeaderImageUrl={
selectedElement.galleryHeaderImageUrl || ''
}
+ galleryHeaderText={
+ selectedElement.galleryHeaderText || ''
+ }
galleryTitle={selectedElement.galleryTitle || ''}
galleryInfoSpans={
selectedElement.galleryInfoSpans || []
diff --git a/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx b/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx
index b8a258f..258ade9 100644
--- a/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx
+++ b/frontend/src/components/ElementSettings/GallerySettingsSectionCompact.tsx
@@ -17,6 +17,7 @@ import { FONT_OPTIONS } from '../../lib/fonts';
interface GallerySettingsSectionCompactProps {
// Header settings
galleryHeaderImageUrl: string;
+ galleryHeaderText: string;
galleryTitle: string;
galleryInfoSpans: GalleryInfoSpan[];
galleryColumns: number;
@@ -29,6 +30,7 @@ interface GallerySettingsSectionCompactProps {
// Header handlers
onUpdateHeader: (patch: {
galleryHeaderImageUrl?: string;
+ galleryHeaderText?: string;
galleryTitle?: string;
galleryColumns?: number;
galleryTitleFontFamily?: string;
@@ -47,6 +49,7 @@ const GallerySettingsSectionCompact: React.FC<
GallerySettingsSectionCompactProps
> = ({
galleryHeaderImageUrl,
+ galleryHeaderText,
galleryTitle,
galleryInfoSpans,
galleryColumns,
@@ -87,6 +90,15 @@ const GallerySettingsSectionCompact: React.FC<
))}
+
+ onUpdateHeader({ galleryHeaderText: event.target.value })
+ }
+ />
+
= ({
const cards: GalleryCard[] = element.galleryCards || [];
const infoSpans: GalleryInfoSpan[] = element.galleryInfoSpans || [];
const headerImageUrl = element.galleryHeaderImageUrl;
+ const headerText = element.galleryHeaderText;
const title = element.galleryTitle;
const columns = element.galleryColumns || 3;
@@ -61,8 +62,8 @@ const GalleryElement: React.FC = ({
className='flex flex-col gap-2 p-3 rounded-xl min-w-[200px] backdrop-blur-sm'
style={{ backgroundColor: backgroundColor || 'rgba(0, 0, 0, 0.6)' }}
>
- {/* Header image */}
- {headerImageUrl && (
+ {/* Header: image takes priority, otherwise render text */}
+ {headerImageUrl ? (
// eslint-disable-next-line @next/next/no-img-element
= ({
className='w-full h-auto object-cover rounded-lg'
draggable={false}
/>
- )}
+ ) : headerText ? (
+
+ {headerText}
+
+ ) : null}
{/* Title */}
{title && (
diff --git a/frontend/src/types/constructor.ts b/frontend/src/types/constructor.ts
index 2a9686f..238815c 100644
--- a/frontend/src/types/constructor.ts
+++ b/frontend/src/types/constructor.ts
@@ -94,6 +94,7 @@ export interface CanvasElement extends BaseCanvasElement {
galleryCards?: GalleryCard[];
// Gallery header settings
galleryHeaderImageUrl?: string;
+ galleryHeaderText?: string;
galleryTitle?: string;
galleryInfoSpans?: GalleryInfoSpan[];
galleryColumns?: number;