Styling email and adding images

Questions and Answers
1

Hey, I’ve created a new email template “add_project” that works well for sending text information.

But I wanted to add some styling to it.

This is the options.message field of “add_project”

<style>
    .wrapper {
        background-color: blue;
        font-size: 20px;
    }
</style>
<div class="wrapper">
    <p>You're added to project.</p>
    <img src="<%= URL %>sample.png" />
    <p><%= URL %> Bye</p>
</div>

The URL is converted into the required value ( URL : new URL(strapi.config.url)) in the p tag but not for the img tag, also the stylings are not applied.

Inline styling works, but that is too hard, as the actual content to be sent has much more styling.
Also tried adding link tag replacing the style tag above (by linking to a css file), but that doesn’t work either.

Added image ‘sample.png’ in public folder but the src attribute value is https://ci3.googleusercontent.com/proxy/9NgE4vxW … 0-d-e1-ft#http://localhost:1337/axiom-logo2.png

Not sure if it’s the correct way to do it, but any help is appreciated.

  1. Have internal or external css to be added (not inline as it works, but is complex to manage)
  2. To load custom fonts into it
  3. to add images from public folder or any other folder (used to add a logo in email)
2

@alexandrebodin I remember we had a similar issue on these lines but can’t seem to find it. IIRC we should be parsing the "<%= URL %>... and injecting the URL but I did test and got a similar result in v3.2.4

3

Hey @DMehaffy, @alexandrebodin, any update on the issue for

  1. Using custom font (.ttf file, available in any folder)
  2. Using an image as a logo (available in any folder or public directory)
4

@DMehaffy @alexandrebodin
I already tried using

  • the link tag
  • @font-face
  • @import

but none of them seems to work.
Can you please let me know how to load custom fonts from a local folder?

5

On that one I’m not sure :thinking: however a community member just released an awesome email styling plugin (added to our GitHub - strapi/awesome-strapi: A curated list of awesome things related to Strapi ).

You might want to try that and see if it helps out with your need: