Email templating / styling framework implementation #1032
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
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
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
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
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
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.
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.
Translations are already in place within weblate. This PR is ready to be merged.
EDIT: Maybe fix the composer lock file overlap?
# Conflicts: # composer.lock
No due date set.
No dependencies set.
Deleting a branch is permanent. Although the deleted branch may exist for a short time before cleaning up, in most cases it CANNOT be undone. Continue?