WEBVTT

NOTE Created by CaptionSync from Automatic Sync Technologies www.automaticsync.com

00:00:01.056 --> 00:00:02.916 align:middle
Can we add an attachment to our email?

00:00:03.286 --> 00:00:03.996 align:middle
Of course!

00:00:04.236 --> 00:00:07.186 align:middle
Doing this manually is a
complex and delicate process.

00:00:07.706 --> 00:00:10.196 align:middle
Luckily, the Symfony Mailer makes it a cinch.

00:00:10.676 --> 00:00:14.596 align:middle
In the tutorial/ directory, you'll
see a terms-of-service.pdf file.

00:00:15.036 --> 00:00:17.636 align:middle
Move this into assets/, though
it could live anywhere.

00:00:18.446 --> 00:00:22.096 align:middle
In TripController::show(), we
need to get the path to this file.

00:00:22.616 --> 00:00:27.096 align:middle
Add a new string $termsPath argument
and with the #[Autowire] attribute

00:00:27.096 --> 00:00:34.276 align:middle
and %kernel.project_dir%/assets
/terms-of-service.pdf': Cool, right?

00:00:34.796 --> 00:00:40.456 align:middle
Down where we create the email, write
->attach and see what your IDE suggests.

00:00:40.836 --> 00:00:44.146 align:middle
There are two methods: attach()
and attachFromPath().

00:00:44.656 --> 00:00:48.826 align:middle
attach() is for adding the raw content
of a file (as a string or stream).

00:00:49.346 --> 00:00:53.616 align:middle
Since our attachment is a real file on
our filesystem, use attachFromPath()

00:00:53.936 --> 00:00:59.696 align:middle
and pass $termsPath then a friendly name like
Terms of Service.pdf: This will be the name

00:00:59.696 --> 00:01:00.986 align:middle
of the file when it's downloaded.

00:01:01.716 --> 00:01:05.266 align:middle
If the second argument isn't passed,
it defaults to the file's name.

00:01:05.896 --> 00:01:06.926 align:middle
Attachment done.

00:01:07.316 --> 00:01:08.026 align:middle
That was easy!

00:01:08.686 --> 00:01:11.566 align:middle
Next, let's add the trip image to
the booking confirmation email.

00:01:11.566 --> 00:01:13.926 align:middle
But we don't want it as an attachment.

00:01:14.016 --> 00:01:15.996 align:middle
We want it embedded in the HTML.

00:01:16.616 --> 00:01:20.156 align:middle
There are two ways to do this:
First, the standard web way:

00:01:20.406 --> 00:01:24.626 align:middle
use an <img> tag with an absolute
URL to the image hosted on your site.

00:01:25.226 --> 00:01:29.066 align:middle
But, we're going to be clever and embed
the image directly into the email.

00:01:29.656 --> 00:01:33.826 align:middle
This is like an attachment, but
isn't available for download Instead,

00:01:33.926 --> 00:01:36.436 align:middle
you reference it in the HTML of your email.

00:01:37.116 --> 00:01:42.256 align:middle
First, like we did with our external CSS files,
we need to make our images available in Twig.

00:01:42.786 --> 00:01:48.856 align:middle
public/imgs/ contains our trip images
and they're all named as <trip-slug.png>.

00:01:49.626 --> 00:02:00.176 align:middle
In config/packages/twig.yaml, add another paths
entry: %kernel.project_dir%/public/imgs: images:

00:02:00.716 --> 00:02:03.866 align:middle
Now we can access this directory
in Twig with @images/.

00:02:04.296 --> 00:02:05.066 align:middle
Close this file.

00:02:05.886 --> 00:02:10.146 align:middle
When you use Twig to render your emails, of
course you have access to the variables passed

00:02:10.146 --> 00:02:14.296 align:middle
to ->context() but there's also a
secret variable available called email.

00:02:14.906 --> 00:02:19.896 align:middle
This is an instance of WrappedTemplatedEmail
and it gives you access to email-related things

00:02:19.936 --> 00:02:22.946 align:middle
like the subject, return path, from, to,

00:02:23.096 --> 00:02:26.426 align:middle
etc. The thing we're interested
in is this image() method.

00:02:26.846 --> 00:02:28.746 align:middle
This is what handles embedding images!

00:02:29.196 --> 00:02:29.826 align:middle
Let's use it!

00:02:30.376 --> 00:02:38.006 align:middle
In booking_confirmation.html.twig, below this
<h1>, add an <img> tag with some classes:

00:02:38.196 --> 00:02:42.626 align:middle
trip-image from our custom CSS file
and float-center from Foundation.

00:02:43.356 --> 00:02:49.596 align:middle
For the src, write {{ email.image() }}, this is
the method on that WrappedTemplatedEmail object.

00:02:50.086 --> 00:02:58.196 align:middle
Inside, write
'@images/%s.png'|format(trip.slug).

00:02:59.456 --> 00:03:04.746 align:middle
Add an alt="{{ trip.name }}" and
close the tag: Image embedded!

00:03:05.256 --> 00:03:05.876 align:middle
Let's check it!

00:03:06.406 --> 00:03:08.036 align:middle
Back in the app, book a trip...

00:03:08.586 --> 00:03:09.586 align:middle
and check Mailtrap.

00:03:14.376 --> 00:03:15.556 align:middle
Here's our email and...

00:03:15.856 --> 00:03:16.716 align:middle
here's our image!

00:03:16.946 --> 00:03:20.996 align:middle
We rock! It fits perfectly and
even has some nice rounded corners.

00:03:21.726 --> 00:03:26.096 align:middle
Up here, in the top right, we see
"Attachment (1)" - just like we expect.

00:03:26.626 --> 00:03:30.046 align:middle
Click this and choose "Terms
of Service.pdf" to download it.

00:03:30.906 --> 00:03:31.866 align:middle
Open it up and...

00:03:32.296 --> 00:03:33.296 align:middle
there's our PDF!

00:03:33.626 --> 00:03:38.836 align:middle
Our space lawyers actually made this document
fun - and it only cost us 500 credits/hour!

00:03:39.316 --> 00:03:41.126 align:middle
Investor credits well spent!

00:03:41.896 --> 00:03:46.036 align:middle
Next, we're going to remove the need
to manually set a from to each email

00:03:46.156 --> 00:03:48.366 align:middle
by using events to add it globally.