We have a content-managed solution (SDL Tridion, to be specific; however, the question is more general), which includes multiple sites with content of different languages. They all share a number of Razor-based templates, which are used to render HTML fragments with specific injected content when pages are published.
CRM is also managed through the CMS and the same templating is used for the creation of email newsletters. These HTML emails contain images, which are published out to whatever site manages the distribution list in question. Because the templating system is generic and the CMS has no concept of the absolute URLs of the final product, these images are all embedded with relative addresses. We have the capacity to apply an absolute URL as metadata to the different websites in the CMS and write .Net extensions to format these URLs into rendered image tags; however, this would add considerable overhead to this piece of work.
We can resolve this by using a <base href="..." />
tag in the <head>
section of the email's markup. This seems to work in Outlook, at least; however, I have not been able to find much up-to-date information on what email clients do and do not support this tag.
The question, then: How widely supported among email clients - particularly browser-based ones - is the <base>
tag?
In Microsoft Outlook, double-click to open an email. You'll see an “Actions” menu under the “Message” tab. Click on that menu and select the “Other Actions,” then click on “View Source” to see the HTML code. Regardless of what your default text editor is, the HTML file will open as a .
The <base> tag specifies the base URL and/or target for all relative URLs in a document. The <base> tag must have either an href or a target attribute present, or both. There can only be one single <base> element in a document, and it must be inside the <head> element.
December 2021) HTML email is the use of a subset of HTML to provide formatting and semantic markup capabilities in email that are not available with plain text: Text can be linked without displaying a URL, or breaking long URLs into multiple pieces.
The href attribute specifies the base URL for all relative URLs on a page.
Unfortunately, it won't work for most web-based email clients (Hotmail, Gmail) and that typically adds up to about 30% of receivers.
Why it won't work:
Most web-based clients inject whatever's inside the body tag of your email and strip out everything else, including the head
. So, if you send:
<html>
<head><base ...></head>
<body><p class="youremail">Email</p></body>
</html>
The email client does this:
<html>
<head><Email client head></head>
<body>
<email client wrapper>
<email>
<p class="youremail">Email</p>
</email>
<email client wrapper>...
</body>
So your base tag will be stripped. Even if it wasn't, since it's not include in the email client's head, it will be ignored by the browser.
Unfortunately, absolute paths on images is the way to go. I have got over similar problems in the past by using a 'preflight processor'. You could use that to get the <base>
href and set it on all the images before returning the finished HTML.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With