php - How to use templated emails with Bootstrap on Symfony Mailer?
Get the solution ↓↓↓I have been following some Symfony Casts tutorial to send emails using Symfony Mailer bundle. I am also using Bootstrap 4 installed with NPM and Webpack Encore. I can't figure out how to provide styles to these templated emails:
Some controller
use Symfony\Bridge\Twig\Mime\TemplatedEmail;
use Symfony\Component\Mailer\MailerInterface;
use Symfony\Component\Mime\Address;
class SomeController extends AbstractController
{
public function send(MailerInterface $mailer)
{
$email = (new TemplatedEmail())
->from(new Address('[email protected]', 'My app'))
->to(new Address($contact_form->getEmail(), $contact_form->getName()))
->subject('Hemos recibido tu mensaje')
->htmlTemplate('email/contact_form.html.twig');
$mailer->send($email);
}
}
The templateemail/contact_form.html.twig
is extendingemail/layout.html.twig
:
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{{ absolute_url(asset('build/app.css')) }}">
</head>
<body>
{% block body %}{% endblock %}
<script src="{{ absolute_url(asset('build/app.js')) }}"></script>
</body>
</html>
Style and scripts have the right link reference when I see the email HTML source but they don't have any styles or scripts applied anyway.
Usually, in "normal" layout template I use{{ encore_entry_link_tags('app') }}
and{{ encore_entry_script_tags('app') }}
but that would generate a relative path to the URLs, I have tried wrapping them inabsolute_url()
function, but it does not work.
I have tried this Github issue by creating a filemacros.html.twig
, then importing them in the template and adding{{ encore_absolute_link_tags('app') }}
and{{ encore_absolute_script_tags('app') }}
in the layout. But I still don't have any applied styles to the email.
What is the right way to import Webpack/Encore styles / scripts to templated emails?
Answer
Solution:
Most email clients will not download external CSS files and apply styles and apply them to the email HTML. You really shouldn't count on that (and linking to an external javascript file is even less likely to succeed, as it appears you are doing in your example).
Not only that, but email clients will most of the time ignore any<style>
tags, even if the resources are not external.
What you should do is use the advise in the documentation and inline your CSS styles.
{% apply inline_css(source('@css/email.css')) %}
<h1>Welcome {{ username }}!</h1>
{# ... #}
{% endapply %}
But inlining styles generated by webpack encore is is not as straigh-forward and requires you jump a few more hoops.
This guide explains how to do it for Foundation styles, but it's easily adjusted for Bootstrap.
Share solution ↓
Additional Information:
Link To Answer People are also looking for solutions of the problem: call to a member function getclientoriginalname() on null
Didn't find the answer?
Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.
Similar questions
Find the answer in similar questions on our website.
Write quick answer
Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.