emails: fix missing images, empty cta button and styling issues

meinberlin/apps/contrib/emails.py

@@ -1,7 +1,4 @@
-from email.mime.image import MIMEImage
-
 from django.conf import settings
-from django.contrib.staticfiles import finders
 
 from adhocracy4 import emails as a4_emails
 
@@ -11,28 +8,5 @@ class Email(a4_emails.Email):
 
     fallback_language = "en"
 
-    def get_attachments(self):
-        attachments = super().get_attachments()
-        additional_files = [
-            ("logo_berlin", "images/logo_berlin.svg"),
-            ("logo_berlin_negative", "images/logo_berlin_negative.svg"),
-            ("button_graphic", "images/email_button.png"),
-        ]
-        files = []
-        for identifier, file in additional_files:
-            filename = finders.find(file)
-            if filename:
-                if filename.endswith(".png"):
-                    imagetype = "png"
-                else:
-                    imagetype = "svg+xml"
-
-                with open(filename, "rb") as f:
-                    image = MIMEImage(f.read(), imagetype)
-
-                image.add_header("Content-ID", "<{}>".format(identifier))
-                files.append(image)
-        return attachments + files
-
     def get_languages(self, receiver):
         return [settings.DEFAULT_LANGUAGE, self.fallback_language]

meinberlin/apps/newsletters/templates/meinberlin_newsletters/emails/newsletter_email.de.email

@@ -5,6 +5,7 @@
 {% block subject %}{{ newsletter.subject }}{% endblock %}
 
 {% block greeting %}{% endblock %}
+{% block cta %}{% endblock %}
 
 {% block content_html %}{{ newsletter.body_with_absolute_urls|safe }}{% endblock content_html %}
 {% block content_text %}{{ newsletter.body_with_absolute_urls|safe }}{% endblock content_text %}

meinberlin/apps/notifications/templates/meinberlin_notifications/emails/notify_initiators_project_created.de.email

@@ -7,7 +7,7 @@
 {% block greeting %}Hallo {{ receiver.username }},{% endblock %}
 
 {% block content_html %}
-{{ creator.username }} hat ein neues Projekt <strong>{{ project.name }}</strong> für {{ project.organisation.name }} angelegt.
+<p>{{ creator.username }} hat ein neues Projekt <strong>{{ project.name }}</strong> für {{ project.organisation.name }} angelegt.</p>
 {% endblock %}
 
 {% block content_text %}

meinberlin/apps/notifications/templates/meinberlin_notifications/emails/notify_initiators_project_created.en.email

@@ -7,7 +7,7 @@
 {% block greeting %}Hello {{ receiver.username }},{% endblock %}
 
 {% block content_html %}
-{{ creator.username }} created a new project <strong>{{ project.name }}</strong> for {{ project.organisation.name }}.
+<p>{{ creator.username }} created a new project <strong>{{ project.name }}</strong> for {{ project.organisation.name }}.</p>
 {% endblock %}
 
 {% block content_text %}

meinberlin/config/settings/base.py

@@ -294,7 +294,9 @@
 LOGIN_URL = "account_login"
 LOGIN_REDIRECT_URL = "/"
 
-EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
+# EMAIL_BACKEND = "django.core.mail.backends.console.EmailBackend"
+EMAIL_BACKEND = "django.core.mail.backends.filebased.EmailBackend"
+EMAIL_FILE_PATH = os.path.join(BASE_DIR, "emails")
 
 BLEACH_LIST = {
     "default": {
@@ -407,6 +409,12 @@
 # adhocracy4
 
 A4_ORGANISATIONS_MODEL = "meinberlin_organisations.Organisation"
+A4_EMAIL_ATTACHMENTS = [
+    ("logo_berlin", "images/logo_berlin.png"),
+    ("logo_berlin_negative", "images/logo_berlin_negative.png"),
+    ("button_graphic", "images/email_button.png"),
+    ("logo", "images/email_logo.png"),
+]
 
 A4_RATEABLES = (
     ("a4comments", "comment"),

meinberlin/templates/email_base.html

@@ -50,8 +50,8 @@ <h3 style="font-size:17px;line-height:23px;margin-bottom:7px;margin-top:0px">
                             <tr>
                               <td align="center" style="border: #000 solid 2px; cursor:auto; vertical-align: middle; padding:0; margin:0;" valign="middle">
                                 <a href="{% block cta_url %}{% endblock cta_url %}" style="color:#000000;margin:0;text-decoration:none;text-transform:none; vertical-align: middle;font-size:0;" target="_blank">
-                                  <span style="vertical-align: middle; line-height: 40px;padding: 0 20px;display:inline-block;font-size:16px;">{% block cta_label %}{% endblock cta_label %}</span>
-                                  <img src="cid:button_graphic" alt="" style="height:40px;width:40px;display:inline-block; border-left: 2px solid black;vertical-align:top;" height="40" width="40">
+                                  <span style="vertical-align: middle; line-height: 40px;padding: 0 20px;display:block;float:left;font-size:16px;">{% block cta_label %}{% endblock cta_label %}</span>
+                                  <img src="cid:button_graphic" alt="" style="height:40px;width:40px;display:block;float:left;border-left: 2px solid black;vertical-align:top;font-family:Arial, sans-serif; font-size:14px;line-height:16px;color:#ffffff;font-weight:bold;" height="40" width="40">
                                 </a>
                               </td>
                             </tr>
@@ -61,7 +61,7 @@ <h3 style="font-size:17px;line-height:23px;margin-bottom:7px;margin-top:0px">
                     </div>
                   </div>
                 </td>
-                <td aria-hidden="true" style="vertical-align:top"> </td>
+                <td aria-hidden="true" style="vertical-align:top;clear:both;"> </td>
               </tr>
               <tr>
                 <td colspan="3" style="text-align:center;padding:20px;background-color:rgb(245,245,245);vertical-align:top">