How to use and customize an HTML email (not markdown) in Laravel 5.6?

Question

So I'm trying to send an html email in Laravel 5.6 and am running into some fun issues.

For one, the documentation is pretty terrible when it comes to customizing the HTML content, or even using the default HTML layout.

https://laravel.com/docs/5.6/mail#writing-mailables

There is a section for "Configuring the View" where it tells you to just do something like the following.

return $this->view('emails.orders.shipped');

Cool, I'm doing that. In my blade file I have just

Here is a test message.

And it sends just fine. But what doesn't make any sense is that the page also says you can run the following artisan command to generate the default email template.

php artisan vendor:publish --tag=laravel-mail

It says "The mail directory will contain a html and a markdown directory, each containing their respective representations of every available component. The components in the html directory are used to generate the HTML version of your email."

The documentation also goes into depth about how to customize and use these markdown templates. You just call @component('mail::message') at the top of the markdown blade file... but I do not want markdown. I just want the regular HTML email.

@component('mail::message') doesn't work when using ->view() only when using ->markdown(). I also can't just do the following.

@extends('vendor.mail.html.layout')
Test message

As it tells me slot is an undefined variable in the error log.

Not sure why, the layout.blade.php file in the /vendor/mail/html/ directory contains the following...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <style>
        @media only screen and (max-width: 600px) {
            .inner-body {
                width: 100% !important;
            }

            .footer {
                width: 100% !important;
            }
        }

        @media only screen and (max-width: 500px) {
            .button {
                width: 100% !important;
            }
        }
    </style>

    <table class="wrapper" width="100%" cellpadding="0" cellspacing="0">
        <tr>
            <td align="center">
                <table class="content" width="100%" cellpadding="0" cellspacing="0">
                    {{ $header ?? '' }}

                    <!-- Email Body -->
                    <tr>
                        <td class="body" width="100%" cellpadding="0" cellspacing="0">
                            <table class="inner-body" align="center" width="570" cellpadding="0" cellspacing="0">
                                <!-- Body content -->
                                <tr>
                                    <td class="content-cell">
                                        {{ Illuminate\Mail\Markdown::parse($slot) }}

                                        {{ $subcopy ?? '' }}
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                    {{ $footer ?? '' }}
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

Not sure why it's calling Markdown::parse($slot) in the html version of the email.

How do I go about extending this view in an html email? Was hoping to at least get the default html template without having to build my own...

$slot is only defined when you use @component so you might try @component('vendor.mail.html.layout') instead of @extends. The relevant documentation is in blade templates — apokryfos
You can always use your own layout and html instead of the one laravel gives you. Just use it as you would use a normal blade template view. — Ahmed Shefeer
@apokryfos so if I use component with vendor.mail.html.message it sends, but none of my component in @slot('header') @endslot shows up anywhere — Octoxan

Fjarlaegur Fjarlaegur · Accepted Answer · 2018-10-22T10:02:26

You are looking into markdown components when you want HTML. Dont get fooled by the html directory generated, because it is the HTML representation of your markdown email.

php artisan vendor:publish --tag=laravel-mail

This command is only for publishing the standard Markdown components to your application so you can customize how Mardown emails are renderen (in HTML and plaintext). You want HTML emails, not markdown, so running that is useless to you.

It is calling Markdown::parse($slot) in the html version of the email because that is the way to parse Mardown to HTML to send a HTML version of your markdown email. You are looking at Markdown components.

I use HTML emails and it is quite easy actually.

Just create a mailable like you should (php artisan make:mail OrderShipped). And just do return $this->view('your.email.layout'); in the build() method.

In your your.email.layout just do @extend('your.email.master.layout') like you would with a normal blade template. Do an @section('content') or whatever name you gave it and design your blade template.

If you are having any difficulties, let me know.

How to use and customize an HTML email (not markdown) in Laravel 5.6?

1 Answers