Images in emails are not responsive in Gmail

[abraham]

Describe the bug

Images in comment notification emails can be large and not display in a scaled manor.

To Reproduce
Steps to reproduce the behavior:

1. Comment on a post.
2. Have someone else reply to your comment with an embedded image.
3. Look at the comment notification email in Gmail on the web.

Expected behavior

I would expect that the image would be no wider than the width of the displayed email.

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 18.10
• Browser: Chrome
• Version: 71.0.3578.98 (Official Build) beta (64-bit)

Additional context

The particular comment I was notified about: https://dev.to/rhymes/comment/7kna

Potential solutions: https://stackoverflow.com/questions/10711638/how-to-dynamically-resize-an-image-inside-an-email-client

[pkfrank]

Thanks for the detailed issue!

[Link2Twenty]

From what I can tell the email is just the comment in its raw form.

https://github.com/thepracticaldev/dev.to/blob/master/app/views/mailers/notify_mailer/new_reply_email.html.erb

Which on the website is styled the CSS but it's not inline so doesn't make it to the email.

[stale]

Thanks for contributing to this issue. As it has been 90 days since the last activity, we are automatically closing the issue in 7 days. This is often because the request was already solved in some way and it just wasn't updated or it's no longer applicable. If this issue still requires attention, please respond with a comment. Happy Coding!

[abraham]

I think this is still an issue.

[Shorpee]

i will like to work on this

[jessleenyc]

@Shorpee go for it!

[luchiago]

Hi, is this issue still need help?

[rhymes]

@luchiago if you want we can test it together: you need to leave a comment and I can reply to it with an image. You have to have email notifications enabled first of course. Let me know if you're willing to do this experiment. We can use one of my articles or yours so not to disturb others

[luchiago]

@rhymes I would like to do this test. Sorry for taking so long to answer.
I left a comment on your article. Also, a good example in the article.

[rhymes]

Replied with this https://dev.to/rhymes/comment/khga

[luchiago]

We do still have a problem. I'll work on that @rhymes

[rhymes]

Thank you!

[luchiago]

@rhymes How can I test this locally?

[rhymes]

@luchiago not easily as development is not configured to deliver emails. We do use the following configuration in production:

https://github.com/thepracticaldev/dev.to/blob/d090ebf026bdedb0b052636d74f399cbc35a6c61/config/environments/production.rb#L110-L121

I think that if you want to test actual emails you'd have to subscribe to the free tier on Sendgrid - https://sendgrid.com/pricing/ - and copy such configuration in config/development.rb for your tests

[maestromac]

Actually @luchiago , you can preview emails. Check out the doc at https://docs.dev.to/backend/previewing-emails/. What you have to do is respond to a comment on your local setup and make sure your background job is running (your Redis instance) then head to the email preview link and you should see it.

[luchiago]

@maestromac Thanks for the tip. But I think shouldn't work when I reply to my own post. I've already made the changes but I can't test.

[maestromac]

@luchiago Try making a comment to any post. The preview page will show the latest comment that was emailed out.

[luchiago]

@luchiago Try making a comment to any post. The preview page will show the latest comment that was emailed out.

@maestromac But the mail notification, in this case, is when somebody replies my post with an image and I receive the notification in my mail box

[maestromac]

@luchiago Oh I see now. try this.

1. create a comment one post other than your with an image on it.
2. Open up NotifyMailerPreview and make the following change on line 4, NotifyMailer.new_reply_email(Comment.find(1)) to NotifyMailer.new_reply_email(Comment.last)
3. Navigate to http://localhost:3000/rails/mailers/notify_mailer/new_reply_email and you should see it now

[luchiago]

@maestromac @rhymes I'm not able to upload an image in the reply comment. All the tools are up (elastic, sidekiq, redis) and I have ImageMagick installed. Any ideas?

[maestromac]

@luchiago Hmm i'm not too sure. Have you tried using an image from elsewhere? Does that work for you?

[luchiago]

@luchiago Hmm i'm not too sure. Have you tried using an image from elsewhere? Does that work for you?

Without uploading?

[maestromac]

@luchiago yup, because this bug can happen with any large images, or so I assume.