Skip to content
This repository has been archived by the owner on Mar 15, 2021. It is now read-only.

Includes

Maizzle edited this page Mar 26, 2019 · 2 revisions

Since we're using Laravel Blade, we can use its directives to pull in reusable blocks of code. More, we can even create our own @ directives for components and dynamic content.


Partials

You can use the @include() Blade directive to pull reusable sections into your emails.

For example, Maizzle PHP does this in the master layout with the email.blade.php partial, to pull in the compiled CSS together with an Outlook-specific block of code.

Example

First, create a file at source/_partials/sidebar.blade.php, with the following content:

<table>
  <tr>
    <td>
      <p>Sidebar content...</p>
    </td>
  </tr>
</table>

Then, use @include() to pull it in a layout or a page:

@include('_partials.sidebar')

Note: Since it's a Laravel Blade file, it can contain both HTML and Blade syntax, and even plain PHP.

Components

Blade Components & Slots are also supported.

You can use them as in the Blade docs or, because we're using Jigsaw, you can even register component aliases.

Note: Blade Components must be referenced relative to the source directory.

Registering Component Aliases

You can register a Blade component alias inside blade.php, as described here.

Maizzle PHP currently comes with one component alias: an Outlook VML background image component. The component file is a Blade file in the source/_components directory:

source/_components/vmlbg.blade.php

<!--[if mso]>
<v:image src="{{ $src }}" xmlns:v="urn:schemas-microsoft-com:vml" style="width:{{ $width }}px;height:{{ $height }}px;" />
<v:rect fill="false" stroke="false" style="position:absolute;width:{{ $width }}px;height:{{ $height }}px;">
<div><![endif]-->
{{ $slot }}
<!--[if mso]></div></v:rect><![endif]-->

Then, we simply register it in blade.php:

// blade.php

$bladeCompiler->component('_components.vmlbg');

We can now use it in a layout or page:

@vmlbg(['src' => 'https://url.to/image.jpg', 'width' => 600, 'height' => 400])
    // your HTML to be overlayed on top of the image
@endvmlbg