In this post I would like to show step by step how to improve your emails by adding them stylesheets and images. The out-of-the-box devise email looks like this,
And one of the first things your client is gonna ask you, is to improve the look, because today everybody is used to receive beautiful emails. So one of the first things we will need to achieve this are these two gems
gem 'nokogiri' gem 'premailer-rails'
After that, what we want to do is to create our own Devise::Mailer class named (in this case) app/mailer/devise_custom_mailer.rb
class DeviseCustomMailer < Devise::Mailer
helper :application
default template_path: 'devise/mailer'
layout 'mailer'
add_template_helper EmailHelper
add_template_helper ApplicationHelper
def confirmation_instructions(record, token, opts={})
super
end
end
Then we’re gonna create two files for the layout definition: app/views/layout/mailer.html.erb and app/views/layout/mailer.text.erb. The first one is gonna have a HTML layout
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%= stylesheet_link_tag 'email.css' %>
</head>
<body>
<%= yield %>
</body>
</html>
And the second one it is only gonna have a <%= yield %> inside.
The next thing we’ll need to do is to uncomment the line in app/config/initializers/devise.rb that configures the Devise mailer class, and set it to our devise mailer class
config.mailer = 'DeviseCustomMailer'
Then, we’re going to create the email.css file in our assets folder (app/assets/stylesheets/email.css.scss)
$email-background: #EDEDED;
$email-header-bg: #D77373;
#email-wrapper {
background: $email-background;
padding-top: 1px;
padding-bottom: 1px;
#header {
background: $email-header-bg;
margin: 30px 30px 0px 30px;
padding: 5px 30px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
.logo {
width: 30px;
height: auto;
}
}
#body {
background: white;
margin: 0px 30px;
margin-bottom: 30px;
padding: 10px 30px;
padding-bottom: 15px;
border: 1px solid $email-header-bg;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
}
We also want to put some images into the email, so we’re going to create a Helper class that is going to define a method to help us in this task (app/helpers/email_helper.rb)
module EmailHelper
def email_image_tag(image, **options)
attachments[image] = File.read(Rails.root.join("public/#{image}"))
image_tag attachments[image].url, **options
end
end
Our email view (app/views/devise/mailer/confirmation_instructions.html.erb) will look like this,
<div id="email-wrapper"> <div id="header"> <table> <tbody> <tr> <td width="40px"><%= email_image_tag "img/logo.png", :class => "logo" %></td> <td> <h3>Welcome <%= @email %>!</h3> </td> </tr> </tbody> </table> </div> <div id="body"> You can confirm your account with this link: <%= link_to 'Confirmar mi cuenta', confirmation_url(@resource, confirmation_token: @token) %> </div> </div>
And the final result of this will be a css styled email,
I hope it can help somebody. Regards
