Mail Action Step - Rendering Images with direct web links

Cevdet_Basacik · February 8, 2019, 12:26pm

I would appreciate help with following example.

direct link to the image : https://docs.google.com/uc?id=1gkzAm29lVpTgNrQU4goiXKri-6NfkXn5

My question is how to display the image above in the body of email, using “Mail Action Step” rendering Markdown. We can use the following example :

My Email with image

Dear Friends

In this email, I will attempt to render an image, with the help of my friends. I also have a list:

Item 1
Item 2
Item 3
And here is the image :
(Need to render/display the image here in the body of the email)

Thanks in advance for your help

agiletortoise · February 8, 2019, 1:49pm

You would have to be sending HTML email, but if you are using a Markdown > HTML email action like the Markdown Mail action that ships in the default “Basic” action group, then Markdown images will work - as long as you are linking to a valid publicly available image URL on the internet, like:

![](https://docs.google.com/uc?id=1gkzAm29lVpTgNrQU4goiXKri-6NfkXn5)

Cevdet_Basacik · February 8, 2019, 8:59pm

Thank you very much. It works as described.

Cevdet_Basacik · February 8, 2019, 10:45pm

Is it possible to align the image ? And wrap text around it ?

sylumer · February 8, 2019, 11:33pm

Markdown image syntax doesn’t support that. You would have to use HTML image tags instead to do this, which you can mix in with your Markdown with no issues.

Cevdet_Basacik · February 9, 2019, 7:20pm

Thanks I will check it out.

Cevdet_Basacik · February 9, 2019, 9:42pm

No luck - I am new to this stuff … Would be grateful if you could get this image (https://docs.google.com/uc?id=1gkzAm29lVpTgNrQU4goiXKri-6NfkXn5) to display in body of email rendered by “Markdown to Mail” action.

Thanks in advance.

sylumer · February 9, 2019, 10:04pm

I used this as a “Markdown Mail” action.

Example of Markdown containing the Image HTML

Some e-mail title here
# Dear Friends

In this email, I will attempt to render an image, with the help of my friends. I also have a list:

1. Item 1
2. Item 2
3. Item 3

And here is the image with some text wrapped around it:  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque nec ipsum ultrices ultricies et a tellus. Quisque molestie leo purus, vitae imperdiet orci. Pellentesque mauris turpis, eleifend at lobortis eget, lacinia vitae lectus. Praesent nec elit nunc, nec molestie nisl. Suspendisse facilisis mi vitae nisi sollicitudin ut imperdiet elit rhoncus. Etiam interdum cursus purus, ut pharetra enim adipiscing faucibus. Nulla malesuada aliquam sollicitudin.

<img src="https://docs.google.com/uc?id=1gkzAm29lVpTgNrQU4goiXKri-6NfkXn5" align="left">Nullam ac magna lectus. Phasellus rhoncus tempus orci at fringilla. Nullam at pulvinar orci. Phasellus tempor, turpis ac iaculis sagittis, sem nunc elementum nunc, placerat pulvinar urna dui quis enim. Etiam sollicitudin pretium tempor. Ut cursus rhoncus odio, sed eleifend risus pretium eu. Fusce eu enim quis nisi pellentesque lacinia. Nulla faucibus blandit orci eu viverra. Donec vestibulum tempus facilisis. Ut et justo quis massa suscipit feugiat. Phasellus sagittis scelerisque tincidunt. Donec diam quam, semper eget aliquam vel, vehicula vitae erat. Morbi tortor mauris, sodales id tristique vel, feugiat vitae tortor. Etiam a elit nunc, id malesuada diam. Nam nisi mauris, luctus nec sodales vitae, mollis eu risus.

Sed in nunc nulla, at convallis nisi. Suspendisse consequat euismod vestibulum. Donec dictum, est et feugiat faucibus, metus nisl pellentesque enim, a posuere orci lectus volutpat mi. Praesent lectus lorem, sodales sit amet accumsan a, placerat quis est.

Thanks in advance for your help

Screenshot of how the mail looked when I ran the action

Cevdet_Basacik · February 9, 2019, 11:20pm

It works - thank you so much.

martinpacker · February 10, 2019, 8:50am

So the interesting “marshalling” thing is to get your image either into data URL form or else hosted somewhere.

I wonder what happens in either case. In the first case some mail clients might not handle it. In the second I assume what they get is a link not a copy.

Am I right in the previous paragraph?

sylumer · February 10, 2019, 10:55am

For reference, here’s the above sample Markdown, but with the image base64 encoded into the content.

Example Markdown with Image Base64 encoded (Raw)

Some e-mail title here
# Dear Friends

In this email, I will attempt to render an image, with the help of my friends. I also have a list:

1. Item 1
2. Item 2
3. Item 3

And here is the image with some text wrapped around it:  

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque nec ipsum ultrices ultricies et a tellus. Quisque molestie leo purus, vitae imperdiet orci. Pellentesque mauris turpis, eleifend at lobortis eget, lacinia vitae lectus. Praesent nec elit nunc, nec molestie nisl. Suspendisse facilisis mi vitae nisi sollicitudin ut imperdiet elit rhoncus. Etiam interdum cursus purus, ut pharetra enim adipiscing faucibus. Nulla malesuada aliquam sollicitudin.

<img src="data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBwgHBgkIBwgKCgkLDRYPDQwMDRsUFRAWIB0iIiAdHx8kKDQsJCYxJx8fLT0tMTU3Ojo6Iys/RD84QzQ5OjcBCgoKDQwNGg8PGjclHyU3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3Nzc3N//AABEIAHcAdwMBIgACEQEDEQH/xAAcAAABBQEBAQAAAAAAAAAAAAAAAwQFBgcBAgj/xAA7EAABBAECAwQIBAQGAwAAAAABAAIDBBEFIQYSMRNBUWEHIjJxgZGhsRQVctFCQ8HwI1JTYnPxFhcz/8QAGgEAAgMBAQAAAAAAAAAAAAAAAAQCAwUBBv/EACQRAAMAAgICAgIDAQAAAAAAAAABAgMRBBIhMRNBFDJRYYEF/9oADAMBAAIRAxEAPwDcUIQgDhKqut8TPinfX04NJbs6QjO/kp3WpnV9JtzR7OZE4g+CxPinVZ6sUVarIY3ygufI3Y46YB7vekeVktNY48NjnFxS07rykXF/EmsxP5haz5OjaQfopbSuN4nns9Wi7E/60YJafeOo+qyHQPzGzc/w7czYmbylzuYEeGDtkqxzkZKU+XLhrXbY58OLLP66LtqPpEpwkto0pbGP45DyA/cqOj9Jswk/xtKYWf7J9/qFSpk1kVv5OR/ZxcTFr0atD6R9DfXMkosxSj+UY8k+4jb6pt/7Koud6lCfl7i5wCyzvSdqKZ0faV5Xte3ctadnD3Kf5GR+N6IviY5862bponFWnau8RRPMUx/lybE+7xU8F87aBqMr5Q1zyJmesx7dj/2t04a1L800mKw7/wCg9ST9Q/sFX4MzqnFexTPgUJXPolUIQmhUEIQgAQhCAEbkDLVWavJ7ErCw/FYfxTo8xkdXeALdZxG+weD++xC3bCg+I+Hqusx87yYrLB6kzRnbwI7wluRhd6qfaGePmWNtV6ZkmkQ/gtPjjI5ZHevJ7z+3Repn9SUm6VNbdWzqULqlMyCeT2OyBJ2Oe5ZSXats1m+s+AdK1+eRwdg4OD0KQed0+0TgDWtOqTT3XVa7XYLu0mw1oHjgHfdeYtPr3Z/wlXWdOfO88rWc0jeY+RLMEq9wk9L0VRlTnb9kc17C8tDgXAZxnfCcxJBnBWtaVdfbuNEzRn1ojz5z3nvTqJq5k6r9WSx06W2hClTczWHStGIuXmB8ztj7rZPR/C+LQi94wJZnPZ7sAfcFUvg/Qm63ZkbJN2cUAa54aPWdnOw8OnVatBDHBCyKFgYxjQ1rR3AJjixVV8jE+XklL40KIQhaBnghCEACEIQALhXVxAGGcQ0pNK1m3TkBAZISw+LDu0/JXDgCGFmjOsxgGxNM5j3d4aMYb5eKm+OdBoapQNqzZipTVx6tmUgNx/ld5fb75vwnxGzSLckT5BLTkd65jyeUjbnA64/oszJi+OtmpOT5sWvtGoTVKOu6fb0+yxzoHjs374PiCO8dxGR57hVPTPRxpemam2467YtmtIHMjeGgNcMEF2OpGQe5WSKSvea23Sscr+XlE8DgcjwI6EeRG2/RN3Vpu0nc+8cTvD5OyYWEkNDdiScDAHTBXXknroXU1s8yTskkkjaHczDg5G3wP9OqpOu14otUeIQGhzQ5wHcf73Vp1PUKmlwCMcoc0YZEw7/35lQfDdSrrmrvN+9FGS7mMZJa6Xyaen1z90pMu71I7D6T2otvo4oOr6dPbkGPxDgGebW53+ZPyVvScUbII2xxNDGMAa1o6ADuXsFbOKOkKTJyW7p0dQhCsIAhCEACELhQBV+MeLotAYK8AbNeeMtYfZjHi79lTq3GWsTS8z7pGf4QxoH2Vf16aS5qlq1McvkldnywcY+A2TSo8hwWVmzXe9PRr4ePEytrbJPiIWdRnYb08ltrvWjfK/HJ4+74BQ7tCaxpcLbc9wDc/VO9RviR0cLDkR5Lj5nu+H9U3Y50m2ThVxV68mtg4uOo20I1TfpyE1LMrHdMxvIypE6lrj2Ylv2eX/kwvdetzdycmp6vRDrYXwo7eH4IyGGSd55pAPFzySnf4WSAczXQS+W7SvE0JjORsmz7BAw4lc9l34uP6JmLi3WKcQZUuStaRsJMPx7s5S+lca6/XsCSa3+KZn1opWNwR7wMhVjn52N8RsUvVIyFLvcrwzJrDDbTk3nSr8Wp0IblfPZyDOD1ae8H3FO1WPR5zfkGXeyZ38nu2B+oKs61cdOoTZi5JU20gQhCmQBcXUIAzDjfhG6y/Ne0mu+zXncXyQxjL4nnqQO8Hrt0JKpepaZqelU47NupLWZM8sYZRyuzjPs9R8V9BKsekPRZNa4cljrt5rNdwniaOriAQR8QT8cJa+PPmkPcflNVM16MSiUjVCjYz0T+s/BSNHq8Xon6bAQFIOiaI8qIqzgY3T02hy9VUQuXsa3WjBUHaG6lbcwOd1EWXZKlJcvC8jXnMbiQMg9R4q76P6P9asStN3s6UHe4vD3keQG3zPwUJwXoztb4irxFua8DhNOe7lB2HxO3z8Fu4TuHDNrdHnf+ln+PJ1j39jfT6cOn04alZvLDCwNaE5QhOmKCEIQAIQuZQAx1jV6mj1DZuvLW5w1rd3PPgAqkONblgufBWgijBwGvJe75ghJfhf8Ayziy7Pcc78s02Q144wfbePa+vXy5VaH06UMPZRVoWRgY5QwYSGbJkvfR6Q5jnHH7LbMf1vTnTW57kJaXyyGR8YAAyTk8qiI3FpwdiO4rSeJNHjZE+1SbycgzJGOmPEeCoGpRtMgeNubr70pNVvVG3x+UpS/g7FYx3pY2jjqovmLSjtPNT6mksstbQ8lnJ70hHHJYlEcYy4/RJty/vwFNaTB6rWxNzJIdsdT4KNPqhfNykvElm4Z1R+g6e2tSrwdo88080gLjI75jAA2x+5UzBx26CcM1Ks0xHrLBnLR48pzn5pXRtHrVGNMzWyz/AMTnDIB8AFK3NL0/Ua5it1o3DGA8Dlc33FTxXm3vt/hg5qxNvc7/ALJqtZhtQRz15GyRSNDmPacghKqj8Evm0jXL3DliQyRBn4mq4jHq5wfuNvEOV4WnjvvOzPyR0rQIQhTIAuFdQgCi8HSCKjcjO0jL04k/VzfthTck+QoHWmO4d4gntPGNM1JwcZO6Gfoc+Ad1z4p2ZwWgg5B6Eb5WPlbimmaUyrXZC07w7LT0OxWW2almy6ZtOvNOIHHm7JheWjOM4Cu+uatHp1R8j3DtCCI2d7j4+4eKmfR1ok2maY+3cYW2bhDi13VrB0B8DuSjjw8tE7v4o2Y0/wBVxY/Zw6tOxHwXhrWh2SRhfR89StYGLFeKUeEjA77pAaPpgII02mCOhEDf2Tv4z/kqnntLSRgNKtYvSCOlXlneTjliYXfZWfh6vJX1ple1H2c0AcHMPc4DGFsUcbI28sbGsHg0YWe8cUJdK1yLXYYy6tLhs/KPZdjl+ox8R5qnPxnMbRLDye99X4JuGTCctnwOqhq1qOaJssLw+N24cF7sX4akDp7EjY42jJLkjORonWPZ6iIl4+00s9ptOUyfpzt9SrqqjwTSnnnta9didG+00R1o3dWQjvP6jv8ABW5bHHlqPIhnad6X0CEIV5SCEIQAjYrw2Ynw2ImSxPGHMeMgjzCq03AlVr3fl2o36LCc9lHJzMHuB3+q6hQrHN/sicZKj9WONH4J0vTrQtzGa7abu2W07m5T4gdFZQhC7MqfCRyrq3umdQhCkRBJzxRzxOimY18bhhzXDII8CEIQBVZ+BKQldLp125Q5juyJ+W/I/ultP4J06CwyxelsahMzdn4l2WtPiGjb5oQqvhxp70W/Nka02WcDC6hCtKgQhCAP/9k=" align="left">Nullam ac magna lectus. Phasellus rhoncus tempus orci at fringilla. Nullam at pulvinar orci. Phasellus tempor, turpis ac iaculis sagittis, sem nunc elementum nunc, placerat pulvinar urna dui quis enim. Etiam sollicitudin pretium tempor. Ut cursus rhoncus odio, sed eleifend risus pretium eu. Fusce eu enim quis nisi pellentesque lacinia. Nulla faucibus blandit orci eu viverra. Donec vestibulum tempus facilisis. Ut et justo quis massa suscipit feugiat. Phasellus sagittis scelerisque tincidunt. Donec diam quam, semper eget aliquam vel, vehicula vitae erat. Morbi tortor mauris, sodales id tristique vel, feugiat vitae tortor. Etiam a elit nunc, id malesuada diam. Nam nisi mauris, luctus nec sodales vitae, mollis eu risus.

Sed in nunc nulla, at convallis nisi. Suspendisse consequat euismod vestibulum. Donec dictum, est et feugiat faucibus, metus nisl pellentesque enim, a posuere orci lectus volutpat mi. Praesent lectus lorem, sodales sit amet accumsan a, placerat quis est.

Thanks in advance for your help

Example Markdown with Image Base64 encoded (Rendered)

Some e-mail title here

Dear Friends

In this email, I will attempt to render an image, with the help of my friends. I also have a list:

Item 1
Item 2
Item 3

And here is the image with some text wrapped around it:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget neque nec ipsum ultrices ultricies et a tellus. Quisque molestie leo purus, vitae imperdiet orci. Pellentesque mauris turpis, eleifend at lobortis eget, lacinia vitae lectus. Praesent nec elit nunc, nec molestie nisl. Suspendisse facilisis mi vitae nisi sollicitudin ut imperdiet elit rhoncus. Etiam interdum cursus purus, ut pharetra enim adipiscing faucibus. Nulla malesuada aliquam sollicitudin.

Nullam ac magna lectus. Phasellus rhoncus tempus orci at fringilla. Nullam at pulvinar orci. Phasellus tempor, turpis ac iaculis sagittis, sem nunc elementum nunc, placerat pulvinar urna dui quis enim. Etiam sollicitudin pretium tempor. Ut cursus rhoncus odio, sed eleifend risus pretium eu. Fusce eu enim quis nisi pellentesque lacinia. Nulla faucibus blandit orci eu viverra. Donec vestibulum tempus facilisis. Ut et justo quis massa suscipit feugiat. Phasellus sagittis scelerisque tincidunt. Donec diam quam, semper eget aliquam vel, vehicula vitae erat. Morbi tortor mauris, sodales id tristique vel, feugiat vitae tortor. Etiam a elit nunc, id malesuada diam. Nam nisi mauris, luctus nec sodales vitae, mollis eu risus.

Sed in nunc nulla, at convallis nisi. Suspendisse consequat euismod vestibulum. Donec dictum, est et feugiat faucibus, metus nisl pellentesque enim, a posuere orci lectus volutpat mi. Praesent lectus lorem, sodales sit amet accumsan a, placerat quis est.

Thanks in advance for your help

In terms of what happens, mail client apps receive the mail source and then choose how to process it. The vast majority of clients will choose to render the HTML by default.

However, since online marketers started using “web beacons” many mail clients started including options not to load images by default from untrusted sources; you can opt to mark a source as trusted in an app. This should apply to external images only (ie. not the base64 encoded image), but it is entirely possible that this varies from mail client to mail client based on how the developers choose to code any opt-in.

In my opinion a good developer should have coded for external images only and be protecting the user from tracking which a purely internal image would not enable. Any argument to malformed rendering and security considerations suggests the app should not support any rich text or attachments either.

For mail clients that do not support images (welcome command line junkies) then the app should provide the plain text part of the mail and not the image or in fact any of the rich formatting. They usually include the “real” mail as a MIME part attachment (rather than a link, auto-downloaded attachment, etc.) if I recall correctly, that you could then save off. It’s been a while since I regularly used a plain text mail app - though Martin, you might appreciate that the last one I used with regularity was called MEMO running on an OS/390 I think; it may have been z/OS towards the end of using it at a green screen terminal, I can’t recall exactly.

Overall, I think it all eventually comes down to MIME attachments and an effort to offer plain text always as that is really what e-mail is under the hood right now - everything else is built on top rather than integrated in … I think, but email engineering is not my forte. I’m pretty sure it comes back to the introduction in the mid-nineties of RFC 1563 and perhaps to this particular statement:

martinpacker · February 11, 2019, 7:25am

(For me it was PROFS then Officevision - both on VM - before we switched to (Lotus latterly IBM) Notes. I was in Poughkeepsie when we announced we bought Lotus - for Notes.)