CODEWITHSUNDEEP
htmlcssruby-on-railsactionmailer
kofhearts
kofhearts

Reputation: 3794

how to resize image based on device type or screen size when using actionmailer?

I have a simple action mailer 

class UserMailer < ApplicationMailer

  def welcome_email(m)
    attachments.inline["banner.png"] = File.read("#{Rails.root}/app/assets/images/banner.png")
    mail(to: m, subject: 'Welcome to My Awesome Site')
  end


end

The email template that the mailer sends looks as follows

<%= image_tag(attachments['banner.png'].url, style: 'width: 50%;') %>

<p> Thanks for purchasing with us! </p>

<hr>

Now the problem i am trying to solve is that in computer screen the displayed image looks good in 50% width. But in mobile screen that is too small. I would like the width to be 100% in mobile display and 50% in large screen or laptop and computer screens. When i check the email via mobile browser by going to gmail site then in mobile screen the 50% width looks too small. So how can i achieve this with action mailer mail templates. I appreciate any help! Thanks!

Upvotes: 0

Views: 375

Answers (1)

Abid Iqbal
Abid Iqbal

Reputation: 773

In order to make your email template fluid, you need to design your template this way and then add media queries as per your device requirement.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <style type="text/css">
      @media only screen and (max-width: 480px){
        .emailImage{
            height:auto !important;
            max-width:600px !important;
            width: 100% !important;
            }
       }
     </style>
    </head>
<body>
    <%= image_tag(attachments['banner.png'].url,class:"emailImage", style: '') %>

    <p> Thanks for purchasing with us! </p>

    <hr>
</body>

Hope this will help.

Abid

Upvotes: 1

Related Questions