HTML email hide broken image icon - html

In most of my emails, the image included may not be present. In such cases the broken image icon is displayed along with my alt text.
Problem Explanation:
While sending an HTML email along with an <img> tag, at cases this image may not be there (404). As the image URL is dynamic, I cannot verify the existence of the image before sending the email. So it displays a broken image icon. I want to get rid of this icon.
JSFiddle
Code Snippet:
<img alt="NA" src="http://www.somerandomdomain.com/error.png" width="120" >
I am need of a solution compatible with all major email clients.
Have tried onerror handler, but it does not work in email clients.
Also have tried text-indent: -9999px;, it works in Outlook but not
in Gmail.
When the negative indent is changed to positive Outlook
scrolls to the right which is a mess.
The solutions mentioned in possible duplicate, are for the web. But my question is clearly about the HTML emails, where JS and objects does not work like the solutions provided.

When generating email, check if that image exists (Example in PHP):
$url = 'http://www.somerandomdomain.com/error.png';
$headers = #get_headers($url);
if (strpos($headers[0],'200') !== false) {
echo "<img alt='NA' src='{$url}' width='120'/>";
}

Related

Formatting issues while forwarding html generated email in Outlook

In python, I have a piece of code, something similar to this.
def send_email_report():
message = {Some HTML Syntax with inline styles for building a form}
my_email = MIMEText(message, "html")
my_email["From"] = "XXXX#domain.com"
my_email["To"] = "YYYY#domain.com"
my_email["Subject"] = "Topic : Report Generation"
sender = "xxxx#domain.com"
receivers = ["yyyy#domain.com"]
with SMTP("localhost") as smtp:
smtp.login(sender, "Email-Password")
smtp.sendmail(sender, receivers, my_email.as_string())
I am able to receive the smtp-email in outlook. The formatting looks great, as all the < img > tags are generated perfectly and spacing is awesome.
But when I try to forward the email to another person, the alignments get messed up. Since html tag is built inside the message, only inline CSS is applied.
A few properties such as font color are retained, while majority of the properties like float:right, width of the whole container are not considered. At first, I thought it was because I have mentioned attributes such as width in px so I changed from px to % and rem, and added ! important as well, but of no use.
I also have an idea of converting the entire html assigned in message variable to a image and email that(since forwarding an html form as an image will not affect the styling), but I am not sure if it is feasible.
And also I don't want it as an attachment, I can have an html form or the image of the html form in email body. That's fine.
Any suggestions on how to maintain the style property while forwarding the generated email?
Any Help is appreciated, Thanks in advance.

Can we auto-expand an HTML 'details' when a hyperlink points to it?

I am creating a page with language information. Since it is extremely long, I collapse each language with details/summary tags and have them in alphabetic sections with each initial letter also a collapsed details. Currently, each language is coded like
<details>
<summary id="am"><b>am — Amharic</b></summary>
<p><img src="/wp-content/uploads/2018/05/GBV-Amharic-150.jpg"/>About 22 million native speakers, … [more info]</p><br clear="all"/>
</details>
If I put a link elsewhere like http://domain.TLD/path/#am, I'd like to take the user to that page, scroll to that section, and expand the details. If that's possible, do I have the wrong syntax for one or both sides? It is not working now—nothing expands and it goes to the top of the page as if the # were not there. But the address field shows the full URI of the link, #id included.
"path/" is interpreted by Wordpress and/or a Wordpress-generated .htaccess, so perhaps that somehow prevents it working correctly.
You have the correct syntax for directing a user to an element with the id "am."
You can check the URL the browser used to display the page with jQuery. For your example if a link sent a user to http://domain.TLD/path/#am the following code would trigger if the browser contained "path/#am" as part of the URL.
jQuery(document).ready(function($) {
if(window.location.href.indexOf("path/#am")){
/* do something to the element in jQuery -- likely apply a class.
*/
}
There are many animation and scrolling libraries related to jQuery as well.

CSS & HTML: My image is not appearing

I've just been teaching my self HTML & CSS and I'm running into my first annoying bug.
Here is my code:
http://pastebin.com/Rk6TjqKZ
It's the only image I have on it so far, and it used to appear, but ever since adding a class to the
I also need help positioning my buttons.
You have the source of the image as
imgur.com/xNiamwg
but this is a web page - you need the source to be the actual image itself:
http://i.imgur.com/xNiamwg.png
(note the PNG extension - not all images have an extension, as it isn't strictly necessary, but they usually do.)
Additionally, you have a semicolon after your source attribute - attributes should only be separated by whitespace.
An example of working code:
<img src="http://i.imgur.com/xNiamwg.png" title="Hosted by imgur.com" />

HTML email image tag missing src attribute

I have a problem that I cant find the answer by Googling. I hope I can get one here.
My problem is: My system can send email to user. On local, an image tag on email is like this:
<img src="http://myimageurl" width="300" style="display:block;margin:auto" alt="">
When working on real server:
<img width="300" style="display:block;margin:auto" alt="">
As you can see, my src attribute is disspeared. I just dont know why!
My email tempalte(Im using cakePhp):
<?php
echo $this->Html->image(
Router::url('/', true). 'img/eventflair-logo.png',
array(
'width' => '300',
'style' => 'display:block; margin: auto'
));
?>
Best Regards.
Gmail by default doesn't show images in email. To see the original email source select "show original" from email dropdown menu.
It seems gmail recently become more strict on urls allowed in emails. I had an img url that was formatted like "//cdn.someurl.com" which would render find on gmail until around a month ago, and is now having problems like you described.
It looks like gmail is auto appending the http:// to the url, so taking out the 2 leading /s worked for me. Maybe taking out the http:// from your url will work.

How to disable an email link?

I am using Ruby on Rails 3 and I would like to disable an email address link in a HTML email.
For example, if in an email I send some raw HTML like
Hi, you email is: <br/>
test#email.com
Gmail autodetects that this is an email address and changes it to
Hi, you email is: <br/>
<a target="_blank" href="mailto:test#email.com">test#email.com</a>
I would like to have this output
# Text without the 'mailto:' link
Hi, you email is:
test#email.com
How can I do that?
I have a more natural suggestion: wrap the email/url in an anchor hyperlink.
<a name="myname">test#email.com</a>
Since the text is already wrapped in a hyperlink, Gmail gives up and leave it alone. :)
(Note: also worked for Apple mail client.)
By 2021, the best for me would be:
<a href='#' style='text-decoration: none; color:#000000' name='myname'>x#somemail.com</a>
Explanation
After trying different services like Gmail, Outlook 365, Mailinator, and MyTrashMail, the results are:
• <a> - wrapping the email into anchor is essential, as raugfer pointed
• href='#' is necessary for Outlook. Linking to a fake anchor disables following the link.
• text-decoration: none, color:#000000 removes underline and changes color from blue link color to natural text color. For those who want not only to disable the link but make its appearance as usual text.
• name='myname' wouldn't harm, however, I haven't noticed its necessity.
Any javascript should be avoided, it won't pass Gmail. E.g. onClick="return false;", <script>...</script>.
If you want to change the cursor to default, cursor: default or cursor: auto won't help. For Gmail only, do without href='#'
Using <span> or <myspan> works for Gmail as Prince Mishra stated, but it doesn't help in all the services (in Outlook, for instance).
Even I had the same problem. Gmail would detect and convert mail addresses and ip addresses to links. I used string.replace to enclose dots (.) and # in blocks. And that works fine for me. sample python code looks like.
text = myname#gmail.com
chars = ['.','#']
encloseIn = 'span'
for char in chars:
text = string.replace(text, char, '<'+encloseIn+'>'+char+'</'+encloseIn+'>')
This is what worked for me in Laravel.
<a style="pointer-events: none; color: inherit">
{{$user->email}}
</a>
You can try
Hi, you email is:<br />
test#email.com
Reading all answers, I tried this in a Joomla article and it worked:
<p><strong>This is the email address: </strong><a name="whatever">youremail&#64domain.com</a></p>
Result:
This is the email address: youremail&#64domain.com
Worked on Chrome and Firefox.
Late reply but i think I have found a way to get over this auto linking issue.
The easiest and fastest way is to add a zero width non joiner between each alphabets. Now that sounded hard so I developed a small script that made things easy for me. Run the code below, add email address (paste or type) and it adds the required code around the email address. Paste the result in your email.
$('#userInput').keyup(function() {
var s = $(this).val().trim();
var text = "";
for ( var i = 0; i < s.length; i++ )
{
text += s[i]+'‌' ;
}
$('p').text( text );
});
#userInput{max-width:400px;width:100%;padding:10px 5px;}
*{outline:none;}
p,#userInput{font-family: 'Roboto', sans-serif;}
p{word-break:break-all;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<input type="text" id="userInput" />
<p></p>
You just need to add the "zero width space" character, his code in HTML is:
​
This code adds a space in the string where you need.
For a respectable solution you need to complement this method with a <nobr> tag, because with this tag you can prevent from breaking to the next line.
The only way to get around this is to convert the email address into an image and include that in the email. Of course this means the user might choose to not download the image, which would mean they won't get the email address either.
What it really comes down to is that you can't control what Gmail or any other email client does once it receives an email, so there isn't another way around this. It's Gmail's, or any other email client's, choice to do what they want with emails, and that includes hyper-linking email addresses.
If you are very adamant about not converting emails into hyperlinks you can try to do other things to conceal the fact that it's an email, like writing it out instead:
Hi, your email is:
test at email dot com
Of course this is probably more confusing. If I were you, I would simply settle for the fact that Gmail will hyper-link your emails.