Add bgcolor and textcolor fields to DonateBanner model

network-api/networkapi/donate_banner/migrations/0003_rename_background_image_donatebanner_foreground_image_and_more.py

@@ -0,0 +1,41 @@
+# Generated by Django 4.2.15 on 2024-10-29 15:08
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailimages", "0025_alter_image_file_alter_rendition_file"),
+        ("donate_banner", "0002_remove_cta_text_and_update_max_lengths"),
+    ]
+    # @see https://code.djangoproject.com/ticket/23577
+    # Index should be dropped and recreated in order to add a field with the name of a previous indexed field
+    operations = [
+        migrations.AlterField(
+            model_name="donatebanner",
+            name="background_image",
+            field=models.ForeignKey(
+                db_index=False,
+                on_delete=models.PROTECT,
+                related_name="+",
+                to="wagtailimages.image",
+            ),
+        ),
+        migrations.RenameField(
+            model_name="donatebanner",
+            old_name="background_image",
+            new_name="foreground_image",
+        ),
+        migrations.AlterField(
+            model_name="donatebanner",
+            name="foreground_image",
+            field=models.ForeignKey(
+                db_index=True,
+                on_delete=models.PROTECT,
+                related_name="+",
+                to="wagtailimages.image",
+            ),
+        ),
+    ]

network-api/networkapi/donate_banner/migrations/0004_add_background_and_colors.py

@@ -0,0 +1,53 @@
+# Generated by Django 4.2.15 on 2024-10-29 15:08
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailimages", "0025_alter_image_file_alter_rendition_file"),
+        ("donate_banner", "0003_rename_background_image_donatebanner_foreground_image_and_more"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="donatebanner",
+            name="background_color",
+            field=models.CharField(
+                choices=[
+                    ("tw-bg-red-40", "Red"),
+                    ("tw-bg-blue-40", "Blue"),
+                    ("tw-bg-white", "White"),
+                    ("tw-bg-black", "Black"),
+                ],
+                default="tw-bg-blue-40",
+                help_text="Background color for the banner",
+                max_length=20,
+                null=True,
+                blank=True,
+            ),
+        ),
+        migrations.AddField(
+            model_name="donatebanner",
+            name="background_image",
+            field=models.ForeignKey(
+                blank=True,
+                null=True,
+                on_delete=django.db.models.deletion.PROTECT,
+                related_name="+",
+                to="wagtailimages.image",
+            ),
+        ),
+        migrations.AddField(
+            model_name="donatebanner",
+            name="text_color",
+            field=models.CharField(
+                choices=[("tw-text-white", "White"), ("tw-text-black", "Black")],
+                default="tw-text-white",
+                help_text="Text color for the banner",
+                max_length=20,
+            ),
+        ),
+    ]

network-api/networkapi/donate_banner/models.py

@@ -1,7 +1,8 @@
 from django.contrib import admin
+from django.core.exceptions import ValidationError
 from django.core.validators import RegexValidator
 from django.db import models
-from wagtail.admin.panels import FieldPanel, HelpPanel
+from wagtail.admin.panels import FieldPanel, HelpPanel, MultiFieldPanel
 from wagtail.contrib.settings.models import BaseSiteSetting, register_setting
 from wagtail.models import PreviewableMixin, TranslatableMixin
 from wagtail.search import index
@@ -51,10 +52,42 @@ class DonateBanner(TranslatableMixin, PreviewableMixin, models.Model):
             "or a valid query string starting with ? (Ex: ?form=donate)."
         ),
     )
+    foreground_image = models.ForeignKey(
+        "wagtailimages.Image",
+        models.PROTECT,
+        related_name="+",
+    )
     background_image = models.ForeignKey(
         "wagtailimages.Image",
         models.PROTECT,
         related_name="+",
+        null=True,
+        blank=True,
+    )
+
+    TAILWIND_COLORS = [
+        ("tw-bg-red-40", "Red"),
+        ("tw-bg-blue-40", "Blue"),
+        ("tw-bg-white", "White"),
+        ("tw-bg-black", "Black"),
+    ]
+
+    background_color = models.CharField(
+        max_length=20,
+        choices=TAILWIND_COLORS,
+        default="tw-bg-blue-40",
+        help_text="Background color for the banner",
+        null=True,
+        blank=True,
+    )
+
+    TEXT_COLORS = [
+        ("tw-text-white", "White"),
+        ("tw-text-black", "Black"),
+    ]
+
+    text_color = models.CharField(
+        max_length=20, choices=TEXT_COLORS, default="tw-text-white", help_text="Text color for the banner"
     )
 
     panels = [
@@ -64,14 +97,24 @@ class DonateBanner(TranslatableMixin, PreviewableMixin, models.Model):
         FieldPanel("subtitle"),
         FieldPanel("cta_button_text"),
         FieldPanel("cta_link"),
-        FieldPanel("background_image"),
+        FieldPanel("foreground_image"),
+        MultiFieldPanel(
+            [
+                HelpPanel(content="Select either an image or a color to serve as the background for the banner."),
+                FieldPanel("background_image"),
+                FieldPanel("background_color"),
+            ],
+            heading="Background",
+        ),
+        FieldPanel("text_color"),
     ]
 
     translatable_fields = [
         TranslatableField("title"),
         TranslatableField("subtitle"),
         TranslatableField("cta_button_text"),
         SynchronizedField("cta_link"),
+        SynchronizedField("foreground_image"),
         SynchronizedField("background_image"),
     ]
 
@@ -95,6 +138,28 @@ def is_active(self):
             return True
         return False
 
+    def clean(self):
+        super().clean()
+
+        both_selected_error = "Please select either a background image or a background color for the banner."
+        none_selected_error = "Please select a background image or a background color for the banner."
+
+        # Validate that either background_image or background_color is set, not both.
+        if self.background_image and self.background_color:
+            raise ValidationError(
+                {
+                    "background_image": ValidationError(both_selected_error),
+                    "background_color": ValidationError(both_selected_error),
+                }
+            )
+        if not self.background_image and not self.background_color:
+            raise ValidationError(
+                {
+                    "background_image": ValidationError(none_selected_error),
+                    "background_color": ValidationError(none_selected_error),
+                }
+            )
+
 
 @register_setting(icon="heart")
 class SiteDonateBanner(BaseSiteSetting):

network-api/networkapi/templates/fragments/donate_banner.html

@@ -1,8 +1,14 @@
 {% load settings_value i18n static wagtailimages_tags %}
-{% image banner.background_image fill-1305x720 as background_image %}
+{% image banner.foreground_image fill-1305x720 as foreground_image %}
+{% if banner.background_image %}
+    {% image banner.background_image fill-1920x1080 as background_image %}
+{% endif %}
 
 {% with btn_class="tw-btn-pop tw-py-7 tw-px-16 tw-text-white tw-border-black tw-bg-blue-40 tw-shadow-black tw-shadow-[4px_4px] tw-w-full small:tw-w-auto hover:tw-bg-blue-80" %}
-    <div class="donate-banner tw-bg-red-40 tw-py-8 tw-pb-12 medium:tw-py-16 medium:tw-pb-20 tw-relative tw-z-20 tw-w-full tw-hidden print:tw-hidden">
+    <div class="donate-banner {{ banner.background_color }} tw-py-8 tw-pb-12 medium:tw-py-16 medium:tw-pb-20 tw-relative tw-z-20 tw-w-full tw-hidden print:tw-hidden"
+         {% if banner.background_image %}
+             style="background-image: url('{{ background_image.url }}'); background-size: cover; background-position: center;"
+         {% endif %}>
 
         <a href="#" class="tw-p-8 tw-box-content banner-close tw-cursor-pointer tw-absolute tw-right-0 tw-top-0 tw-group" aria-label="{% trans " Close Banner" %}">
             <img src="{% static "_images/x.svg" %}" width="24" height="23" alt="{% trans " Close Banner" %}" class="tw-w-8 tw-h-8 tw-transition-transform tw-duration-100 tw-ease-in-out tw-transform group-hover:tw-scale-110 tw-filter">
@@ -13,16 +19,17 @@
 
                 {% block left_banner_column %}
                     <div class="tw-w-[32%] tw-m-auto xlarge:tw-mr-auto medium:tw-mr-0 medium:tw-order-2 tw-mb-4 medium:tw-mb-auto">
-                        <img src="{{ background_image.url }}" alt="" width="{{ background_image.width }}" height="{{ background_image.height }}">
+                        <img src="{{ foreground_image.url }}" alt="" width="{{ foreground_image.width }}" height="{{ foreground_image.height }}">
                     </div>
                 {% endblock left_banner_column %}
 
                 {% block right_banner_column %}
                     <div class="xlarge:tw-w-7/12 large:tw-w-[64%] medium:tw-w-[62%] medium:tw-order-1">
-                        <p class="tw-h1-heading large:tw-text-4xl tw-text-[20px] small:tw-text-[24px] medium:tw-text-[28px] xlarge:tw-text-[40px] tw-mb-0 tw-text-white tw-font-semibold">
+                        <p class="tw-h1-heading large:tw-text-4xl tw-text-[20px] small:tw-text-[24px] medium:tw-text-[28px] xlarge:tw-text-[40px] tw-mb-0 {{ banner.text_color }} tw-font-semibold">
                             {{ banner.title }}
                         </p>
-                        <p class="tw-body-large tw-text-[12px] small:tw-text-[16px] medium:tw-text-[18px] tw-mt-4 tw-mb-8 small:tw-my-6 tw-text-white tw-leading-normal">
+                        <p class="tw-body-large tw-text-[12px] small:tw-text-[16px] medium:tw-text-[18px] tw-mt-4 tw-mb-8 small:tw-my-6 {{ banner.text_color }} tw-leading-normal">
+
                             {{ banner.subtitle }}
                         </p>
                         <div class="tw-w-full">