How do you create and send emails from Rails application, that contain images and proper formatting? like the ones you get from facebook and like.
-
does my response answer your question?Bo Jeanes– Bo Jeanes2009-01-24 11:41:06 +00:00Commented Jan 24, 2009 at 11:41
-
@bjeanes - I haven't really got the time to try this as i got busy with something else, but seems like your solution is on the right lines. thanks. Will try and update.Akshay– Akshay2009-01-25 12:19:32 +00:00Commented Jan 25, 2009 at 12:19
Add a comment
|
3 Answers
Assuming you know how to send normal plain-text emails from Rails using ActionMailer, to get HTML emails working you need to set a content type for your email.
For example, your notifer might look like this:
class MyMailer < ActionMailer::Base
def signup_notification(recipient)
recipients recipient.email_address_with_name
subject "New account information"
from "[email protected]"
body :user => recipient
content_type "text/html"
end
end
Note the content_type "text/html" line. This tells ActionMailer to send an email with a content type of text/html instead of the default text/plain.
Next you have to make your mailer views output HTML. For example, your view file app/views/my_mailer/signup_notification.html.erb might 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 HTML view can include a <style> tag to define basic styles. Not all HTML and CSS is supported, especially across all mail clients, but you should definitely have sufficient formatting control over text styles.
Embedding images is a bit tricker if you plan to display attached emails. If you are simply including emails from external sites, you can use an <img /> tag as you usually would in HTML. However, many mail clients will block these images from being displayed until the user authorises it. If you need to display attached images, the Rails plug-in Inline Attachments might be worth a look.
For more information on Rails mailing support, the ActionMailer documentation is a great resource
3 Comments
sscirrus
Just a note: Gmail will not support external CSS. If you want CSS to display properly in Gmail you must use inline styles like
<div style="color:red">text</div>.
Dave James Miller
You can automatically inline the styles using Roadie: github.com/Mange/roadie
scottwb
The Premailer gem is also very nice for inlining the styles. There is also a gem called inline_css that uses Premailer to make it super easy to use in your email templates/layouts.
For the images you can just use the normal image_tag helper after you have defined the ActionMailer::Base.asset_host = 'http://www.your-domain.com'
I use Paperclip to store my images so in my case I can add an image to an email using this.
image_tag result.photo.url(:small)
1 Comment
elsurudo
This is
config.action_mailer.asset_host nowYou just need to add inline CSS. You can create partials so that you don't need to repeat so much CSS. It's not beautiful, but it works on Google and everywhere.
For example, let's say you want to have a paragraph:
# app/views/mailer/_p.html.erb
<p style="color: red; font-size: 16px;">
<%= text %>
</p>
Then you can call like:
# app/views/mailer/email.html.erb
<%= render "mailer/p", text: "Hello World!" %>
Now imagine all the components you can create and reuse with your emails. You can have let's say a Header and a Footer. For 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 you call like:
<%= render layout: "mailer/template" do %>
<%= render "mailer/p", text: "Hello World!" %>
<% end %>
