[ACCEPTED]-How do I create email with css and images from Rails?-actionmailer

Accepted answer
Score: 34

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"

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"

<html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css" media="screen">
      h3 { color: #f00; }
      ul { list-style: none; }
  <h3>Your account signup details are below</h3>
    <li>Name: <%= @user.name %></li>
    <li>Login: <%= @user.login %></li>
    <li>E-mail: <%= @user.email_address %></li>

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

Score: 1

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)
Score: 0

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 %>

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>


<!-- app/views/mailer/_footer.html.erb -->

<footer style="background: blue; padding: 12px;">
  <h3 style="color: yellow;">Some more content</h3>

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" %>

Then 1 you call like:

<%= render layout: "mailer/template" do %>
  <%= render "mailer/p", text: "Hello World!" %>
<% end %>

More Related questions