diff --git a/adserver/forms.py b/adserver/forms.py
index badbc81f..a3da8ffb 100644
--- a/adserver/forms.py
+++ b/adserver/forms.py
@@ -991,6 +991,10 @@ def __init__(self, *args, **kwargs):
adtype_queryset = adtype_queryset.exclude(deprecated=True)
self.fields["ad_types"].queryset = adtype_queryset
+ # Get the lowest maximum text length across all eligible ad types
+ ad_type_max_lengths = [at.max_text_length for at in adtype_queryset] or [0]
+ maximum_text_length = min(ad_type_max_lengths)
+
self.fields["image"].help_text = _(
"Sized according to the ad type. Need help with manipulating or resizing images? We can help."
) % (reverse("support") + "?subject=Image+help")
@@ -1033,12 +1037,12 @@ def __init__(self, *args, **kwargs):
_("Advertisement text"),
Div(
HTML(
- " total characters"
+ f" / characters"
),
# Only display on "new style" ads with the headline, content, and CTA
# Simply hide it on the old style ads.
- data_bind="visible: totalLength() > 0",
- css_class="small text-muted mb-2",
+ data_bind="visible: totalLength() > 0, css: totalLength() > maxLength() ? 'text-danger' : 'text-muted'",
+ css_class="small mb-2",
),
*ad_display_fields,
),
diff --git a/assets/src/views/advertisement-form.js b/assets/src/views/advertisement-form.js
index 082c85c9..a5fb91b3 100644
--- a/assets/src/views/advertisement-form.js
+++ b/assets/src/views/advertisement-form.js
@@ -4,6 +4,7 @@ const ko = require('knockout');
function AdvertisementFormViewModel(method) {
const MAX_PREVIEW_LENGTH = 100;
+ const SENSIBLE_MAXIMUM_LENGTH = 1000;
this.headline = ko.observable($("#id_headline").val());
this.content = ko.observable($("#id_content").val());
@@ -28,6 +29,19 @@ function AdvertisementFormViewModel(method) {
return length;
};
+
+
+ this.maxLength = function () {
+ // The actual max length passed from the backend form
+ let max_length = parseInt($("#id_maximum_text_length").attr("data-maximum-length"));
+
+ // Use a sensible default if nothing present
+ if(isNaN(max_length) || max_length <= 0 || max_length > SENSIBLE_MAXIMUM_LENGTH) {
+ max_length = MAX_PREVIEW_LENGTH;
+ }
+
+ return max_length;
+ };
}
if ($('form#advertisement-update').length > 0) {