The original welcome email template contained placeholder text e.g. <homepage-image-goes-here> where each group's webmaster should add screenshots of their site (walks programme, social events page, login prompts, etc).
However, this was just a generic placeholder that required the Webmaster to know what to do in order to replace it within the Brevo editor. This was not discoverable, and also required images to be exported to Brevo, requiring extra effort and the need to save image data outside of the realm of the group's website.
Additionally, this approach could easily cause customisation to be overridden when NGX Ramblers releases affected email template content, causing data to be undesirably overwritten.
To resolve all of the above issues, these placeholders are now managed through the admin UI using the CMS Image Cropper And Resizer — webmasters upload/crop images through the standard CMS interface, no HTML knowledge needed.
Backend auto-wraps stored image URLs in responsive img tags at send time.
These images are preserved when the central base template is updated — your group's customisations will never be overwritten by a template push.
The Template Image Overrides panel when first opened — each slot shows not configured. Every override slot shown here is discovered automatically from {{override.*}} markers in the template HTML.
Override definitions are NOT hardcoded in code. Instead, the
system scans template HTML for {{override.KEY}} markers at
runtime and dynamically generates override slots in the admin UI.
This is essential for rollout to 500+ groups — each group's admin
UI automatically reflects whatever markers exist in the current
template, with no code changes or deployments needed.
extractOverrideKeys() scans any template HTML for
{{override.*}} patterns and returns unique keysoverrideKeyToLabel() auto-generates human-readable labels
from keys (e.g. WALKS_PROGRAMME_IMAGE → "Walks Programme Image")TemplateDiffResponse.overrideKeys){{override.XXX}} marker to a template and pushing
it centrally is all that's needed — every group's admin UI
immediately shows the new image upload slot
Removed the hardcoded TEMPLATE_METADATA registry,
TemplateCategory enum, and TemplateOverrideDefinition interface
which were not scalable for multi-tenant rollout.responsive-email-styles.ts) defines the
styles once. The readLocalTemplate() function in
local-template-reader.ts auto-injects viewport meta, charset,
and media query styles into any template that lacks them. Templates
that already have responsive CSS (e.g. fully-automated-text-body)
are left untouched. Template HTML files on disk remain clean.NotificationConfig and EmailRequest gain an optional
templateOverrides: Record<string, string> field{{override.WALKS_PROGRAMME_IMAGE}}, etc — 6 unique keys,
7 occurrences)applyTemplateOverrides() in messages.ts scans the template
HTML for override markers and resolves them: site override image
if configured, otherwise a styled default placeholderperformTemplateSubstitution()createEmailRequest() in mail-messaging.service.ts passes
templateOverrides from the notification config through to
the backendtemplateDiff endpoint{{override.*}} markers via extractOverrideKeys()TemplateDiffResponse.overrideKeysoverrideKeyToLabel() for display labelsNotificationConfig.templateOverrides (MongoDB)applyTemplateOverrides() replaces markers with
img tags or default placeholdersmail.model.ts — extractOverrideKeys(), overrideKeyToLabel(),
overrideKeys on TemplateDiffResponse, templateOverrides on
NotificationConfig and EmailRequest interfaces. Removed
TEMPLATE_METADATA, TemplateCategory, TemplateOverrideDefinitionmail-notification-template-editor.ts — override slots driven
by server-discovered keys via discoveredOverrideKeys array,
labelForKey() for display labels, image upload via CMS
ImageCropperAndResizerComponentmail-messaging.service.ts — pass templateOverrides in requestwelcome-to-the-group.html — GDPR link fix, override markersmessages.ts — data-driven applyTemplateOverrides() scans HTML
for markers instead of using hardcoded registrytemplate-diff.ts — returns overrideKeys discovered from
template HTMLlocal-template-reader.ts — responsive CSS injectionresponsive-email-styles.ts — shared responsive CSS module (new)notification-config.ts — templateOverrides in MongoDB schema
Reported by Charlie Bigley (via Bolton Ramblers) — 2 Apr 2026https://editor-app.brevo.com?configuration=...site-content/... paths, existing-image preload editing, and live unsaved preview updateshref="..." or src="...") are no longer wrapped in Brevo editor pill spans during template push, fixing a bug where broken <a href="<span>...</span>"> markup was leaking into the Brevo rich text editor. Merge fields in visible text content are still wrapped as editable pills as intended.