How do I create email with css and images from Rails?
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 "system@example.com"
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
CSS Images in Email With Rails 3
In response to my other answer, @Kevin wrote:
Thanks for the answer, I did think of doing something like that but I
don't think it's possible with the way I have it setup. The mailer
call is happening in a after_create call in a model rather than in a
controller so I don't think I have access to the request object as you
mentioned (or am I mistaken). I do have this in my mailer initializer:
ActionMailer::Base.default_url_options[:host] = "localhost:3000" Can I
somehow use that hos parameter in my mailer to make it work?
The answer is yes. All rails url-construction helpers should use these defualt_url_options. In addition to setting the :host
, you should also force it to use absolute urls by settings this option:
ActionMailer::Base.default_url_options[:only_path] = false
Also, set the asset host like this:
config.action_mailer.asset_host = 'http://localhost:3000'
Then just use the image_path
helper instead of hand-writing the url, like this:
<style type="text/css">
body {
background: url(<%= image_path('mainbg_repeat.jpg') %>) top repeat-x #cfcfcf;
}
</style>
NOTE: Setting default_url_options directly like that is deprecated. Here's the new way to do it:
config.action_mailer.default_url_options = {
:host => 'localhost:3000',
:only_path => false
}
rails email not displaying images from css
CSS for HTML emails must be inline, and many email clients cannot display all CSS entities.
MailChimp has a tool to help bring your CSS inline - http://beaker.mailchimp.com/inline-css
And Campaign Monitor has this great list of CSS elements and where they are supported - http://www.campaignmonitor.com/css/
Image/CSS in Mailer in Rails is not applied only in Gmail
I think you need to define your image as an attachment in your mailer. E.g. I have a mailer in app/mailers/customer_mailer.rb
that has a method verification_confirmation
. In this method I have the following line:
attachments.inline['logo.png'] = File.read(Rails.root.join("app/assets/images/logo.png"))
Now, in the view for this email (i.e. app/views/customer_mailer/verification_confirmation.html.erb
I can now embed the image like this:
<%= image_tag attachments['logo.png'].url, style: "width: 15vw; min-width: 200px;" %>
How to send email with image background without attach this image as a file for download?
Skip asset pipeline for static images to work in your emailer, you should put them in:
Rails.root + 'public/images'
Then in our emailer you should use css with full url to the image:
background-image:url('http://yoursite.com/public/images/background.jpg');
I would recommend use style tag in your mailer and just add the class like this:
<style>
.my-fancy-background {
background-image: url('http://yoursite.com/public/images/bg-email.jpg');
background-position: top center;
background-repeat: no-repeat;
background-color: transparent;
}
</style>
<div class="my-fancy-background">
Here is my email div with some fancy background
</div>
But if you still want helper method, you might also need to set this in application.rb
config.action_mailer.asset_host = 'http://example.com/public/'
# use public url of your app where your static images can be served from.
UPDATEAs per comment by gwally, this may not be supported in Outlook so if you care that this will be supported for Outlook, you might wanna have a look here
How to send HTML email with styles in rails
It's not a best pratice to add file with your CSS in an email. You need define your CSS inline in your email.
About Asset, it's better to host it in your website. You can link it in your email. Your email is lighter with this technique.
Related Topics
How to Mark a Cucumber Scenario as Pending
Error Installing SQLite3 Gem via Bundler
Authlogic and Multiple Sessions for the Same User
Ruby.Metaprogramming. Class_Eval
Couldn't Find User with Id=Sign_Out
How to Use Reference Images in SASS When Using Rails 3.1
How to Create a Rails 4 Concern That Takes an Argument
Ruby/Pgsql Error on Rails Start:Cannot Load Such File -- Pg_Ext (Loaderror)
How to Run Code After Each Line in Ruby
How to Strip Leading and Trailing Quote from String, in Ruby
How to Specify the Location of the Chromedriver Binary
How to Receive a JSON Object with Rack
Does Ruby Have Any Number Formatting Classes
Accepts_Nested_Attributes_For Ignore Blank Values
Best Way to Handle Dynamic CSS in a Rails App