Email templating / styling framework implementation #1032

Merged

ernest merged 3 commits from AnonymousLlama/kbin-core:feature/add-styled-email-functionality into develop

2023-09-13 16:19:17 +00:00

AnonymousLlama commented

2023-08-23 06:49:22 +00:00

Email templating / styling framework

This PR adjusts the way in which we are styling our emails.

Currently all of our emails come through as simple HTML as seen below

(our current emails)

While these are functional, they're also pretty ugly.

Email base template / styling

All of our emails are sent in a similar way, using $mailer->send to send a formatted email (where we load in a twig template). As part of this change all of the emails now use the same base template .

Each of the emails (account confirmation, delete account , reset password and contact) has been updated to use this new template.

As part of this change we also have a new entry in webpack called email. This lets us create a new entry and load in an email specific emails.scss file (which will eventually build out into build/email.css). The main reason we need this is that we can't just include our standard styles, we need specific styles just to style our emails.

We can now edit this single email.scss file and its styles will be automatically included in these email templates. Also note that since most email clients are picky, we can't use the same styles we use on the front-end e.g we cant use variables, rem or other fancy things. If you check out the emails.scss file I've had to copy some basic parts from other files and manually adjust them so it at least renders nicely in these clients. It's definitely not going to be perfect but this is a good start.

Automatic css-inlining with email templates

Basically for emails we can't just include them the same way as we do on our front-end. To get styles to work correctly we need to have them inline.

I've leveraged the inline_css twig extension that can take in a single string and automatically apply inline styles to all matching elements. To get this to work I've also had to create a new twig_function that looks for all the correct CSS files (since webpack could split them into multiple) and merges them all together into a single big string.

This has been heavily based on the preferred approach defined here: https://symfonycasts.com/screencast/mailer/encore-inline_css

Updated templates

Each of the templates has been updated and all have the same visual look, with a shared matching header and footer. Some of the templates have also been updated to format them better.

(confirm email address)

(contact us)

(user account deletion request)

(confirm password change request)

Additional steps going forward

With this framework in place, all new emails can extend this base template and new styles can be defined in the emails.scss file. We can adjust what we want in the header / footer, but for this initial work I propose we keep the template basic and expand on it.

# Email templating / styling framework This PR adjusts the way in which we are styling our emails. Currently all of our emails come through as simple HTML as seen below (our current emails) ![Screenshot from 2023-08-23 16-31-10.png](/attachments/197fd545-ea3f-48e2-9a9e-be29084e14e8) While these are functional, they're also pretty ugly. ## Email base template / styling All of our emails are sent in a similar way, using `$mailer->send` to send a formatted email (where we load in a twig template). As part of this change all of the emails now use the same **base template** . Each of the emails (**account confirmation**, **delete account** , **reset password** and **contact**) has been updated to use this new template. As part of this change we also have a new entry in **webpack** called `email`. This lets us create a new entry and load in an email specific `emails.scss` file (which will eventually build out into `build/email.css`). The main reason we need this is that we can't just include our standard styles, we need specific styles just to style our emails. We can now edit this single `email.scss` file and its styles will be automatically included in these email templates. Also note that since most email clients are picky, we can't use the same styles we use on the front-end e.g we cant use `variables`, `rem` or other fancy things. If you check out the `emails.scss` file I've had to copy some basic parts from other files and manually adjust them so it at least renders nicely in these clients. It's definitely not going to be perfect but this is a **good start.** ## Automatic css-inlining with email templates Basically for emails we can't just include them the same way as we do on our front-end. To get styles to work correctly we need to have them `inline`. I've leveraged the `inline_css` twig extension that can take in a single string and automatically apply inline styles to all matching elements. To get this to work I've also had to create a new `twig_function` that looks for all the correct CSS files (since webpack could split them into multiple) and merges them all together into a single big string. This has been heavily based on the preferred approach defined here: https://symfonycasts.com/screencast/mailer/encore-inline_css ## Updated templates Each of the templates has been updated and all have the same visual look, with a shared matching header and footer. Some of the templates have also been updated to format them better. (confirm email address) ![Screenshot from 2023-08-23 15-32-00.png](/attachments/db77043b-c86b-44bd-847e-6432a3afad08) (contact us) ![Screenshot from 2023-08-23 15-20-53.png](/attachments/54c3cc59-ec0c-4595-a22c-bbbbc8fa9a72) (user account deletion request) ![Screenshot from 2023-08-23 15-14-54.png](/attachments/b428b7f0-47f9-413c-bea6-e477abaf751d) (confirm password change request) ![Screenshot from 2023-08-23 14-20-07.png](/attachments/152c213b-48ee-4ba6-9697-e63fd0d60075) ## Additional steps going forward With this framework in place, all new emails can extend this base template and new styles can be defined in the `emails.scss` file. We can adjust what we want in the header / footer, but for this initial work I propose we keep the template basic and expand on it.

Screenshot from 2023-08-23 16-31-10.png

27 KiB

Screenshot from 2023-08-23 15-32-00.png

37 KiB

Screenshot from 2023-08-23 15-20-53.png

27 KiB

Screenshot from 2023-08-23 15-14-54.png

33 KiB

Screenshot from 2023-08-23 14-20-07.png

107 KiB

👍 1 ❤️ 1