Email: make responsive and show header image in MS Outlook (#2138)

This commit is contained in:
Richard Schreiber
2021-07-01 11:49:30 +02:00
committed by GitHub
parent 59e92245de
commit 0c6971ff5f
4 changed files with 236 additions and 21 deletions

View File

@@ -640,13 +640,14 @@ def convert_image_to_cid(image_src, cid_id, verify_ssl=True):
image_src = normalize_image_url(image_src)
path = urlparse(image_src).path
guess_subtype = os.path.splitext(path)[1][1:]
image_type = os.path.splitext(path)[1][1:]
response = requests.get(image_src, verify=verify_ssl)
mime_image = MIMEImage(
response.content, _subtype=guess_subtype)
response.content, _subtype=image_type)
mime_image.add_header('Content-ID', '<%s>' % cid_id)
mime_image.add_header('Content-Disposition', 'inline;\n filename="{}.{}"'.format(cid_id, image_type))
return mime_image
except:

View File

@@ -1,12 +1,18 @@
{% load eventurl %}
{% load i18n %}
{% load thumb %}
<!DOCTYPE html>
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=false">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{subject}}</title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
body {
background-color: #eee;
@@ -208,21 +214,17 @@
<table width="100%"><tr><td align="center">
<table width="600"><tr><td align="center"
<![endif]-->
<table class="layout" width="600" border="0" cellspacing="0">
<table class="layout" style="max-width:600px" border="0" cellspacing="0">
{% if event.settings.logo_image %}
<!--[if !mso]><!-- -->
<tr>
<td style="line-height: 0; {% if event.settings.logo_image_large %}padding: 0;{% endif %}" align="center" class="logo">
{% if event.settings.logo_image_large %}
<img src="{% if event.settings.logo_image|thumb:'1170x5000'|first == '/' %}{{ site_url }}{% endif %}{{ event.settings.logo_image|thumb:'1170x5000' }}" alt="{{ event.name }}"
style="height: auto; max-width: 100%;" />
<img src="{% if event.settings.logo_image|thumb:'600_x5000'|first == '/' %}{{ site_url }}{% endif %}{{ event.settings.logo_image|thumb:'600_x5000' }}" alt="{{ event.name }}" style="width:100%" />
{% else %}
<img src="{% if event.settings.logo_image|thumb:'5000x120'|first == '/' %}{{ site_url }}{% endif %}{{ event.settings.logo_image|thumb:'5000x120' }}" alt="{{ event.name }}"
style="height: auto; max-width: 100%;" />
<img src="{% if event.settings.logo_image|thumb:'600_x120'|first == '/' %}{{ site_url }}{% endif %}{{ event.settings.logo_image|thumb:'600_x120' }}" alt="{{ event.name }}" style="width:100%" />
{% endif %}
</td>
</tr>
<!--<![endif]-->
{% endif %}
<tr>
<td class="header" align="center">