How to make good photos CMS interface?

[iBobik]

I asked the Studio for albums and images which resulted in this model:

export class Album {
	createdAt = c.dateTimeColumn().notNull().default('now')
	images = c.oneHasMany(AlbumImage, 'album')
	name = c.stringColumn().notNull()
}

export class AlbumImage {
	order = c.intColumn()
	album = c.manyHasOne(Album, 'images').cascadeOnDelete()
	image = c.manyHasOne(Image, 'albums').cascadeOnDelete()
}

export class Image {
	createdAt = c.dateTimeColumn().notNull().default('now')
	url = c.stringColumn().notNull()
	width = c.intColumn()
	height = c.intColumn()
	alt = c.stringColumn()
	meta = c.oneHasOne(ImageMetadata, 'image')
	albums = c.oneHasMany(AlbumImage, 'image')
}

export class ImageMetadata {
	createdAt = c.dateTimeColumn().notNull().default('now')
	image = c.oneHasOneInverse(Image, 'meta')
	fileName = c.stringColumn()
	lastModified = c.dateTimeColumn()
	fileSize = c.intColumn()
	fileType = c.stringColumn()
}

But generated interface was complete nonsence - just text fields for everything including url.

I changed it like this and it works:

export const ImageForm = Component(({ over } : ImageFormProps) => <FormLayout>
	<ImageField
		urlField="url"
		widthField="width"
		heightField="height"
		fileNameField="meta.fileName"
		fileSizeField="meta.fileSize"
		fileTypeField="meta.fileType"
		lastModifiedField="meta.lastModified"
		label="Image"
		required
	/>
	<SideDimensions dimension="locale" as="currentLocale" field="locales(locale.code=$currentLocale)">
		<InputField field="alt" label="Alt" required />
	</SideDimensions>
</FormLayout>)

But it is far from the usual UI in CMS world - Album form should have photos in the grid and uploading new photos should support multiple files at once.

How to do it in the Interface v2?

[jonasnobile]

Hi,

It sounds like you're looking for a more dynamic way to handle image uploads within your album form. Luckily, Contember Studio provides a gallery plugin, which should cover most of your requirements out-of-the-box. You can add plugin by asking Studio AI to do it from you (e.g. add plugin gallery to Article entity).

Additionally, in Interface v2, you can use the ImageRepeaterField, which simplifies the process of uploading multiple images at once. This field allows you to display images in a grid layout and makes bulk uploads easy.

Here's an example of how you can implement it:

<ImageRepeaterField
	field="imageList.items"
	baseField="image"
	label="Image file"
	description="A brief description of the image file."
/>

This should bring the UI closer to the CMS standards you're aiming for, with enhanced support for multiple file uploads.

[jonasnobile]

It looks like the issue is with the alt field missing in the structure, which is causing an incompatibility error when trying to connect the entity at Album(...).images.

The error message suggests that the alt field is required for compatibility. You can fix this by adding <Field field="alt"/> within the StaticRender section of <DataGridTextColumn field="url" header="URL">. Here’s how it should look:

...
<DataGridTextColumn field="url" header="URL">
	<Field field="url" />
	<StaticRender>
		<ImageField {...imageFields} />
		<Field field="alt"/>
	</StaticRender>
</DataGridTextColumn>
...

This addition should make both entity structures compatible. Once this resolves the error, we can look at cleaning up the code. It would be nicer to include alt field in imageFields.

Let me know if this resolves the issue or if you encounter anything else!

[iBobik]

Hi,
tried to add it to the both DataGridTiles and DataGridTable. It allowed to open modal without an error.

But when I clicked on the existing image it just opens file upload dialog, because it is inside UploaderDropzoneRoot. I thought I have mitigated it by e.stopPropagation, but obviously not:

<DialogTrigger asChild>
	<Button size="sm" variant="outline" onClick={e => e.stopPropagation()}>{dict.uploader.selectExistingImage}</Button>
</DialogTrigger>

Nothing else happened. (Just some visual glitches what I will solve alter.)

[jonasnobile]

Do you have dropzone like this?

<ImageField
	baseField="image"
	{...imageFields}
	label="Image file"
	description="Some description of the image file."
	dropzonePlaceholder={(
		<UploaderDropzoneAreaUI className="w-60">
			<UploadIcon className={'w-12 h-12 text-gray-400'} />
			<div className={'font-semibold text-sm'}>{dict.uploader.dropFiles}</div>
			<div className={'text-xs'}>{dict.uploader.or}</div>
			<div className={'flex gap-2 items-center text-xs'}>
				<Button size={'sm'} variant={'outline'}>{dict.uploader.browseFiles}</Button>
				<div onClick={e => e.stopPropagation()}>
					<SelectImage />
				</div>
			</div>
		</UploaderDropzoneAreaUI>
	)}
/>

[iBobik]

Yes, exactly this:

		<UploaderDropzoneRoot>
			<UploaderDropzoneWrapperUI>
				{showLoader
					? <UploaderInactiveDropzoneUI />
					: <UploaderDropzoneArea>{dropzonePlaceholder ?? <UploaderDropzoneAreaUI>
						<UploadIcon className={'w-12 h-12 text-gray-400'} />
						<div className={'font-semibold text-sm'}>{dict.uploader.dropFiles}</div>
						<div className={'text-xs'}>{dict.uploader.or}</div>
						<Button size={'sm'} variant={'outline'}>{dict.uploader.browseFiles}</Button>
						<div className={'text-xs'}>{dict.uploader.or}</div>
						<SelectImageRepeater />
					</UploaderDropzoneAreaUI>}</UploaderDropzoneArea>
				}
			</UploaderDropzoneWrapperUI>
		</UploaderDropzoneRoot>

[jonasnobile]

Let's try to wrap <SelectImageRepeater /> to div with stopPropagation. This should restrict to opening upload dialog.

...
<div className={'text-xs'}>{dict.uploader.or}</div>
<div onClick={e => e.stopPropagation()}>
	<SelectImageRepeater />
</div>
...