Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fully support newsletter templates #6193

Closed
leofeyer opened this issue Jul 6, 2023 · 2 comments · Fixed by #6558
Closed

Fully support newsletter templates #6193

leofeyer opened this issue Jul 6, 2023 · 2 comments · Fixed by #6558
Assignees
@leofeyer
Labels
feature

Comments

@leofeyer
Copy link
Member

leofeyer commented Jul 6, 2023

Description

I want to make using more complex newsletter templates such as this, this or this more convenient. To accomplish that, we have to convert the CSS code to inline styles when rendering the template. Luckily, there is a library already:

https://github.com/tijsverkoyen/CssToInlineStyles

So ideally, the process would be something like this:

  1. You copy one of the templates above into a mail_custom.html5 template.
  2. You add the <?= $this->body ?> placeholder and the CSS definitions to format the content.
  3. When you send the newsletter, the template is parsed and fed through the CssToInlineStyles class.

The mail should then be compatible with most mail clients and can use modern layouts with e.g. two columns or alike.
@leofeyer leofeyer added feature up for discussion Issues and PRs which will be discussed in our monthly Mumble calls. labels Jul 6, 2023
@leofeyer leofeyer self-assigned this Jul 6, 2023
@leofeyer leofeyer removed the up for discussion Issues and PRs which will be discussed in our monthly Mumble calls. label Jul 6, 2023
@aschempp
Copy link
Member

why would that not already work if you adjust the mail_default etc. templates accordingly?

@leofeyer
Copy link
Member Author

Because the inline styles need to be applied to the mail body (aka the RTE output) as well.

@leofeyer leofeyer mentioned this issue Nov 24, 2023
Merged
@leofeyer leofeyer linked a pull request Nov 24, 2023 that will close this issue
Inline the CSS from a newsletter template before sending #6558
Merged
leofeyer added a commit that referenced this issue Jan 2, 2024
@leofeyer
Inline the CSS from a newsletter template before sending (see #6558)
14b060b 
Description
-----------

Implements #6193

I have added a `mail_responsive` template that is based on https://github.com/tijsverkoyen/CssToInlineStyles and can be used as a starting point for own templates. Here is how it looks:

### Back end

![](https://github.com/contao/contao/assets/1192057/a5ce06c8-db36-40a8-bf57-efc462a789d4)

### Inbox preview with preheader text

<img src="https://github.com/contao/contao/assets/1192057/a5f5c9f4-3fd6-42c8-8cec-daa676a235d0" width="375" height="72" alt="">

### Message in Apple Mail

![](https://github.com/contao/contao/assets/1192057/ef53e9d3-fbd1-4286-adcf-23ad1dbaa6fa)

Commits
-------

6da9a7a Inline the CSS from a newsletter template before sending
40ef527 Fix the max length of the `preheader` field
f2dacc0 Show the preheader in the newsletter preview
cb87bde Update the mail_responsive template
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 18, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@leofeyer leofeyer

Labels
feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Inline the CSS from a newsletter template before sending leofeyer/contao
2 participants
@aschempp @leofeyer