I'm trying to insert an e-mail address with the ckeditor. After I saved my content element (text&media), the source code showing the ckeditor looks fine
some#mailaddress.com
But when I visit the webpage only the following is visible:
some(at)mailaddress.com
I found out, that the problem is the spam protection. If I enable
config.spamProtectEmailAddresses = 1
The mail not rendered anymore. It's working without protection, but I want to use it.
Thank you for help.
I have performed the following test (TYPO3 8.7.7) and CKEditor with full configuration:
1) config.spamProtectEmailAddresses = 1 and config.spamProtectEmailAddresses_atSubst = [at]
2) Create a CE text with image
3) write test email into the text editor and then use the "link" button to add an email address
3.1) write test#email.it into the text editor and then use the "link" button to add an email address
3.2) write test#email.it into the text editor without adding the link
Results
3.1) the href attribute of the link is encrypted (javascript:linkTo_UnCryptMailto('...');)
3.2) the href attribute of the link is encrypted (javascript:linkTo_UnCryptMailto('...');) while the visible text does not become test[at]email.it
3.3) no link is added to the text; the visible text does not become test[at]email.it
Could you tell us if you installed some CKEditor plugins or some write some detail of your configuration?
I found it out!
The problem was at my fluid template. I wrapped the {CONTENT} variable with
<f:format.html parseFuncTSPath="lib.parseFunc">{CONTENT}</f:format.html>
It's working now after I changed this to
<f:format.raw>{CONTENT}</f:format.raw>
but if you use <f:format.raw>, the email address is not spam protected anymore. Thats not, what you wanted, isn't it?
I have the problem, the <pre>-tag is html encoded and only works in <f:format.raw>, but then, the email addresses are plain.
Martin
I'm sending an e-mail newsletter in HTML.
Inside the HTML I have something like
<img height='70' width='70' style='display:block' src='myDomain.com/imageName.png'>
When I open the newsletter with Thunderbird or Outlook, the image is being displayed. However, when I open it with Gmail, no image is shown.
I'm not sure if it's about the proxy that Gmail uses for security reasons or if it's something else. Either way, I'd like to know if anyone ever came across this and if so, how it was solved.
Late to the party but here goes... I have experienced this problem as well and it was solved with the following:
Including the scheme in the src url (using "//" does not work - use full scheme EG: "https://")
Including width and height attributes
Including style="display:block" attribute
Including both alt and title attributes
EG:
<img src="https://static.mydomain.com/images/logo.png" alt="Logo" title="Logo" style="display:block" width="200" height="87" />
For me, the problem was using svg images. I switched them to png and it worked.
Google only allows images which are coming from trusted source .
So I solved this issue by hosting my images in google drive and using its url as source for my images.
Example:
with:
http://drive.google.com/uc?export=view&id=FILEID'>
to form URL please refer here.
Please also check your encoding: Google encodes spaces as + instead of %20. This may result in an invalid image link.
You might have them turned off in your gmail settings, heres the link to change them https://support.google.com/mail/answer/145919?hl=en
Also gmail may be blocking the images thinking they are suspicious.
from the link above.
How Gmail makes images safe
Some senders try to use externally linked images in harmful ways, but
Gmail takes action to ensure that images are loaded safely. Gmail
serves all images through Google’s image proxy servers and transcodes
them before delivery to protect you in the following ways:
Senders can’t use image loading to get information like your IP
address or location. Senders can’t set or read cookies in your
browser. Gmail checks your images for known viruses or malware. In
some cases, senders may be able to know whether an individual has
opened a message with unique image links. As always, Gmail scans every
message for suspicious content and if Gmail considers a sender or
message potentially suspicious, images won’t be displayed and you’ll
be asked whether you want to see the images.
Try to add title and alt properties to your image.... Gmail and some others blocks images without some attributes.. and it is also a logic to include your email to be read as spam.
I noticed that Google was stripping the src attribute from my img tags. I tried every answer on this page - with no luck.
What finally worked for me was replacing img tags with divs that have background images. For example, instead of:
<img style="height: 24px; width: 24px; display: block;" src="IMAGE SOURCE"/>
I replaced it with:
<div style="height: 24px; width: 24px; display: block; background: url(IMAGE SOURCE); background-size: contain;"></div>
Hope this helps others who spent way too long pulling their hair out over this.
In addition to what was said by Howard
You have to keep in mind that Google encodes spaces as +
To avoid this, the ulr must be encoded in RFC 3986, which means spaces encoded at %20, for example:
https://example.com/My Folder/image 1.jpg
to
https://example.com/My%20Folder/image%201.jpg
I had the same issue and for me it was because I was using an SVG image, once I changed to a JPG or PNG, it worked. Maybe this can assist someone who will come across the same issue. It seems Gmail doesn't support SVG images.
HTTP or HTTPS should be full address
background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg)
var mailOptions = {
from: 'fulladdress#gmail.com',
to: emails,
subject: 'i super another ma node mailer cool test',
text: 'That was easy!',
html: '<div style="background-image: url(http://fulladdress.com/ca/1/product_assets/T/C/X/M/K/NMTCXMK_mu.jpg);width:500px;height:500px">ascfas</div>'
};
I know Gmail already fix all the problem above, the alt and stuff now.
And this is unrelated to the question but probably someone experiences the same as me.
So my web designer use "image" tag instead of "img", but the symptom was the same. It works on outlook but not Gmail.
It takes me an hour to realize. Sigh, such a waste of time.
So make sure the tag is "img" not "image" as well.
My issue was similar.
This is what my experience has been on testing the IMG tag on gmail
(assuming most of the organization's would have a dev qa and prod server.)
I had to send emails to customers on their personal email id's and we could see that gmail would add something of its own like following to src attribute of img tag. Now when we were sending these images from our dev environment they would never render on gmail and we were always curious why?
https://ci7.googleusercontent.com/proxy/AEF54znasdUhUYhuHuHuhHkHfT7u2w5zsOnWJ7k1MwrKe8pP69hY9W9eo8_n6-tW0KdSIaG4qaBEbcXue74nbVBysdfqweAsNNmmmJyTB-JQzcgn1j=s0-d-e2-ft#https://www.prodserver.com/Folder1/Images/OurImage.PNG
so an image sent to my gmail id as following never worked for me
<img src="https://ci7.googleuser....Blah.Blah..https://devserver.com/Folder1/Images/OurImage.PNG">
and our dev server we can't render this image by hitting following URL on Chrome(or any browser).
https://www.devserver.com/folder1/folder2/myactualimage.jpg
now as long as the src has www on it worked all the time and we didnt had to add any other attributes.
<img src="https://www.**prodserver**.com/folder1/folder2/myactualimage.jpg">
I was using Cloudflare. As soon as I disabled the proxy for my host's website IP address images in Gmail appeared immediately.
I have now added a new firewall rule to allow requests where the URI contains 'googleimageproxy' and everything is working fine.
I am even later to this party, but after spending about 2 hours trying everything imaginable and not having any luck, I finally realized it will work if I upload the pics to GOOGLE PHOTOS instead of GOOGLE DRIVE. Then I can right-click on the pic, copy the address, paste it in, and it works beautifully.
In backend i created endpoint for showing images. Laravel code looks like:
public function getImage($name)
{
return response()->file(base_path() . '/resources/img/' . $name . '.png');
}
Then in my html email template i created div with background-image.
<div style='background: url("https://mysite1.com/api/v1/get_image/logo")'></div>
And it's works for me.
I tried another image from internet which url starts https://
it worked on gmail and outlook.
get your images from domain which has SSL.
For me, the problem was using images name as equity investments.png . I switched them to equity_investments.png and it worked.
Not working :-
<img src="https://xxxxxxx.com/webinar_images/equity investments.png" alt="" />
Working :-
<img src="https://xxxxxx.com/webinar_images/equity_investments.png" alt="" />
I tried all the suggestions this thread (setting width, height, title, full url, etc). The final fix for me was switching from SVG to PNG did the trick for me.
I then tried removing all the other extra decorators (title, display block), and it still worked as long as I left the image type as PNG. So, PNG seems to be the only required change.
I am developing a system that sends emails out to recipients who may read the email from a public access point, or a "closed" access point (that can't see the internet). My emails, which are sent in HTML format, might have images embedded. The images are pre-defined and live in known locations. Naturally, email read from the (public) internet can't load images hosted in the (private) closed network; email read from the closed network can't load images from the internet.
For now, during email generation we are determining from the recipient's email address whether we should set the img src to be the public or private path. I'd love to find a native HTML technique that could tell the email client "try this public path to the image, and if it doesn't load failover to this private path". My understanding is that email clients are almost always expected to strip-out JavaScript, so ECMA won't be a part of this solution. Sadly.
Attempt 1
I tried setting the src to be the public path to the image, and set the background-image style attribute to be the private path to the image:
<img src="path/to/public/my_image.jpg" style="background-image:url('path/to/private/my_image.jpg');" ..etc.. />
That works great in a browser (especially if height/width attributes are set), but Outlook (2007) does not support background-image. So, no joy.
Attempt 2
I tried creating a table with a background image:
<table background="path/to/private/my_image.jpg">
<tr>
<td>
<img src="path/to/public/my_image.jpg" />
</td>
</tr>
</table>
Outlook didn't go for that either.
Attempt 3
In the spirit of "it just might be crazy enough to work", I tried supplying two src attributes to an image:
<img src="path/to/public/my_image.jpg" src="path/to/private/my_image.jpg" ..etc.. />
That didn't work anywhere; only the first src would get used to try to load the image.
If your logic is made on the server, I think you'd be better off linking to a script that generates / serves the correct image, instead of an image directly?
Something like:
<img src="http://www.example.com/path/to/script/image.php?email=info#example.com&name=example-image-1" />
image.php would then base some logic on the parameters given. These could be the email of the recipient (which could detail their access rights) and perhaps a name for the image (so that you know which image to serve in this position).
You would then need to serve image.php as the correct mime type of an image, so that the email client can render it correctly.
This would be far more advantageous over trying to use hacks in the email itself.
Hope this helps?
Mikey.
PS - Remember to serve absolute URL's in HTML emails. Relative images won't work.
Why not embed the images as attachments? You can specify the src attribute of the img tags as "cid:xyz" where "xyz" if the "Content-id" MIME attribute of the image attachment.
I am creating a block and using the FCKEditor rich text input box. I switch to Source mode and enter in the following HTML:
<img src="http://test.com/image.png" alt="an image" />
I check to confirm that input format is set to "Full HTML" and press Save. Upon loading my site, I discover that the HTML in FCKEditor's Source view is now:
<p><img alt="\"an image" src="\"http://test.com/image.png\"" /></p>
Obviously that prevents the image from rendering properly since the browser sees the path to the image as:
"http://test.com/image.png"
Does someone know how to help?
Quick workaround could be to not use the quotes since it seems to be adding them in anyway.
Example:
<img src=http://site.com/image alt=alt text>
Have you changed or selected a suitable text format?
If you go to admin/config/content/formats, you can update or even create a new text format.
Select the one you're currently using that is resulting in this problem, and check if one of the filters is creating this problem. There are some that can influence or generate the problem you're experiencing.
"Correct faulty and chopped off HTML" filter
"Convert URLs into link" filter
"Limit allowed HTML tags" filter
Also, check in the FCKEditor's config page if any auto-correction filter is activated.
In any case, if the problem is inserting images, I think you should be better off with a dedicated module, like IMCE (http://drupal.org/project/imce).
Hope it helps.
i have 2 errors coming up on firefox. Theses errors are shown below.
1-there is no attribute "property". This refers to the line below:
<meta property="og:title" content="blahblahblah"/>
This is to do with linking it to social networks i.e facebook etc
2-there is no attribute onerror. This refers to the line below:
<img src="281.jpg" width="125" height="125" onerror="onImgErrorSmall(this)"/>
This basically displays a default image if the actual image dose not show up.
the question really is, i know these are not valid attributes but how can i get around them, if anyone has any ideas id be grateful.
For the meta tag there is no property attribute
For the img tag there is no attribute called onerror
No way to get around them as they are not part of the html markup
Live with them or remove - they will never validate against a web standard
You pasted stuff into a wysiwyg editor directly from Microsoft Office or OpenOffice document.
These properties are proprietary.
You should clean up or remove the markup before pasting. (Most of wysiwyg editors in use today have this function (a.k.a. paste from Word))
This link may be able to help you out.
onerror is only supported by the "browser" that Microsoft makes.