Badge Editor

Badge Name Badge name is required URL Slug Auto-generated from badge name Description Description is required

Badge Graphics (1024x1024)

File URL
@if (!useImageUrl() && !hasMediaServers()) {
warning You need to configure a media server to upload image files
} @if (!useImageUrl()) {
@if (previewImage()) { File selected }
} @else { Image URL link } Badge image is required

Badge Thumbnail (Optional)

File URL
@if (!useThumbnailUrl() && !hasMediaServers()) {
warning You need to configure a media server to upload thumbnail files
} @if (!useThumbnailUrl()) {
@if (previewThumbnail()) { File selected }
} @else { Thumbnail URL link }

Tags (Optional)

Add a tag
@for (tag of tags(); track tag) { {{tag}} cancel }
@if (isUploading()) {

Uploading and publishing badge...

}

Preview

@if (previewImage()) {
Badge Preview
} @else {
image

Upload an image

}

{{badgeForm.get('name')?.value || 'Badge Name'}}

{{badgeForm.get('description')?.value || 'Badge description will appear here'}}