Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

email_notifications: Fix emoji being giant in Outlook. 

Apparently, Outlook ignores height/width CSS rules, but does support
the attribute on the image element itself, so specify that instead.

I don't think there are likely to be image tag implementations that
don't support the attribute, given that's the only thing that works in
Outlook.
This commit is contained in:
Tim Abbott 2024-09-20 11:23:24 -07:00
parent 0c7d83f7da
commit 9b67164270
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
zerver/lib/email_notifications.py
View File

@ -111,7 +111,15 @@ def fix_emojis(fragment: lxml.html.HtmlElement, emojiset: str) -> None:
# which does not have historical content with old hashed
# filenames).
image_url = f"{settings.STATIC_URL}generated/emoji/images-{emojiset}-64/{emoji_code}.png"
img_elem = e.IMG(alt=alt_code, src=image_url, title=emoji_name, style="height: 20px;")
img_elem = e.IMG(
alt=alt_code,
src=image_url,
title=emoji_name,
# We specify dimensions with these attributes, rather than
# CSS, because Outlook doesn't support these CSS properties.
height="20",
width="20",
)
img_elem.tail = emoji_span_elem.tail
return img_elem
@ -120,9 +128,11 @@ def fix_emojis(fragment: lxml.html.HtmlElement, emojiset: str) -> None:
img_elem = make_emoji_img_elem(elem)
parent.replace(elem, img_elem)
for realm_emoji in fragment.cssselect(".emoji"):
for realm_emoji in fragment.cssselect("img.emoji"):
del realm_emoji.attrib["class"]
realm_emoji.set("style", "height: 20px;")
# See above note about Outlook.
realm_emoji.set("height", "20")
realm_emoji.set("width", "20")
def fix_spoilers_in_html(fragment: lxml.html.HtmlElement, language: str) -> None:

6
zerver/tests/test_message_notification_emails.py
View File

@ -1183,7 +1183,7 @@ class TestMessageNotificationEmails(ZulipTestCase):
f"http://zulip.testserver/user_avatars/{realm.id}/emoji/images/{realm_emoji_file_name}"
)
verify_body_include = [
f'<img alt=":green_tick:" src="{realm_emoji_url}" title="green tick" style="height: 20px;">'
f'<img alt=":green_tick:" src="{realm_emoji_url}" title="green tick" height="20" width="20">'
]
email_subject = "DMs with Othello, the Moor of Venice"
self._test_cases(
@ -1203,7 +1203,7 @@ class TestMessageNotificationEmails(ZulipTestCase):
"Extremely personal message with a hamburger :hamburger:!",
)
verify_body_include = [
'<img alt=":hamburger:" src="http://testserver/static/generated/emoji/images-twitter-64/1f354.png" title="hamburger" style="height: 20px;">'
'<img alt=":hamburger:" src="http://testserver/static/generated/emoji/images-twitter-64/1f354.png" title="hamburger" height="20" width="20">'
]
email_subject = "DMs with Othello, the Moor of Venice"
self._test_cases(
@ -1590,7 +1590,7 @@ class TestMessageNotificationEmails(ZulipTestCase):
expected_output = (
'<p>See <img alt=":cloud_with_lightning_and_rain:"'
' src="http://testserver/static/generated/emoji/images-google-64/26c8.png"'
' title="cloud with lightning and rain" style="height: 20px;">.</p>'
' title="cloud with lightning and rain" height="20" width="20">.</p>'
)
self.assertEqual(actual_output, expected_output)