[ACCEPTED]-How do I create email with css and images from Rails?-actionmailer
Assuming you know how to send normal plain-text 24 emails from Rails using ActionMailer, to 23 get HTML
emails working you need to set a content 22 type for your email.
For example, your notifer 21 might look like this:
class MyMailer < ActionMailer::Base
def signup_notification(recipient)
recipients recipient.email_address_with_name
subject "New account information"
from "system@example.com"
body :user => recipient
content_type "text/html"
end
end
Note the content_type "text/html"
line. This 20 tells ActionMailer to send an email with 19 a content type of text/html
instead of the default 18 text/plain
.
Next you have to make your mailer views 17 output HTML
. For example, your view file app/views/my_mailer/signup_notification.html.erb
might 16 look like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css" media="screen">
h3 { color: #f00; }
ul { list-style: none; }
</style>
</head>
<body>
<h3>Your account signup details are below</h3>
<ul>
<li>Name: <%= @user.name %></li>
<li>Login: <%= @user.login %></li>
<li>E-mail: <%= @user.email_address %></li>
</ul>
</body>
</html>
As you can see the 15 HTML
view can include a <style>
tag to define basic 14 styles. Not all HTML
and CSS
is supported, especially 13 across all mail clients, but you should 12 definitely have sufficient formatting control 11 over text styles.
Embedding images is a bit 10 tricker if you plan to display attached 9 emails. If you are simply including emails 8 from external sites, you can use an <img />
tag 7 as you usually would in HTML
. However, many 6 mail clients will block these images from 5 being displayed until the user authorises 4 it. If you need to display attached images, the 3 Rails plug-in Inline Attachments might be worth a look.
For 2 more information on Rails mailing support, the 1 ActionMailer documentation is a great resource
For the images you can just use the normal 3 image_tag
helper after you have defined the ActionMailer::Base.asset_host = 'http://www.your-domain.com'
I use 2 Paperclip to store my images so in my case 1 I can add an image to an email using this.
image_tag result.photo.url(:small)
You just need to add inline CSS. You can 9 create partials so that you don't need to 8 repeat so much CSS. It's not beautiful, but 7 it works on Google and everywhere.
For example, let's 6 say you want to have a paragraph:
# app/views/mailer/_p.html.erb
<p style="color: red; font-size: 16px;">
<%= text %>
</p>
Then you 5 can call like:
# app/views/mailer/email.html.erb
<%= render "mailer/p", text: "Hello World!" %>
Now imagine all the components 4 you can create and reuse with your emails. You 3 can have let's say a Header and a Footer. For 2 example:
<!-- app/views/mailer/_header.html.erb -->
<header style="background: black; padding: 16px;">
<h1 style="color: white;">My App</h1>
</header>
And
<!-- app/views/mailer/_footer.html.erb -->
<footer style="background: blue; padding: 12px;">
<h3 style="color: yellow;">Some more content</h3>
</footer>
Then you can have a template:
# app/views/mailer/_template.html.erb
<div style="border: 1px solid black;">
<%= render "mailer/header" %>
<%= yield %>
<%= render "mailer/footer" %>
</div>
Then 1 you call like:
<%= render layout: "mailer/template" do %>
<%= render "mailer/p", text: "Hello World!" %>
<% end %>
More Related questions
We use cookies to improve the performance of the site. By staying on our site, you agree to the terms of use of cookies.