Menu
I create a default template in SendGrid, for use in their transactional api. I then add an img link with a float: right in it. When I hit "save" in their editor, it wipes the float from my image and inserts a new class called sg-image in it. This messes up my styles, of course. Anyone ever seen this or know why Sendgrid is with my template? I cannot find any documentation about it, and their support team is unresponsive to my bug report.
Before:
<html>
<head>
<title></title>
</head>
<body>
<div><%body%></div>
<a href="%STORYURL1%" style="color:#333332;text-decoration:none">
<img src="%STORYPIC1%" height="122" style="float:right !important; border:1px solid #e5e5e5; margin-left:7px;"></a>
</body>
</html>After
<html>
<head>
<title></title>
</head>
<body>
<div><%body%></div>
<div><a href="%STORYURL1%" style="color:#333332;text-decoration:none"><span class="sg-image" data-imagelibrary="%7B%22width%22%3A0%2C%22height%22%3A%22122%22%2C%22alignment%22%3A%22%22%2C%22border%22%3A1%2C%22src%22%3A%22%25STORYPIC1%25%22%2C%22classes%22%3A%7B%22sg-image%22%3A1%7D%7D"><img height="122" src="%STORYPIC1%" style="border: 1px solid transparent; margin-left: 7px; height: 122px;" /></span></a></div>
</body>
</html>
599
The <template> tag is used as a container to hold some HTML content hidden from the user when the page loads. The content inside <template> can be rendered later with a JavaScript.
We have been experiencing this exact issue for months and have ended up not using their terrible template system and building our own. Anyway they finally admitted the problem and came back with a solution/ work around.
The solution they have provided:
Hello, Here is a solution an engineer has provided: Example:
<td><span class="sg-image" data-imagelibrary="%7B%22width%22%3A%22160%22%2C%22height%22%3A%22200%22%2C%22alt_text%22%3A%22%7B%7B%20uc%5B2%5D%5B%27uniqueSymbol%27%5D%20%7D%7D%20-%20%7B%7B%20uc%5B2%5D%5B%27name%27%5D%20%7D%7D%22%2C%22alignment%22%3A%22center%22%2C%22border%22%3A0%2C%22src%22%3A%22http%3A//cdn.fakewebsite.st/image/%7B%7B%20uc%5B2%5D%5B%27uniqueSymbol%27%5D%7Creplace%28%7B%27%3A%27%3A%20%27-%27%7D%29%20%7D%7D.png%22%2C%22classes%22%3A%7B%22sg-image%22%3A1%7D%7D" style="float: none; display: block; text-align: center;"><a href="https://fakewebsite.st/?utm_source=blah&utm_medium=email&utm_campaign=v1" target="_blank"><img alt=" - " height="200" src="http://cdn.fakewebsite.st/image/{{ uc[2]['uniqueSymbol']|replace({':': '-'}) }}.png" style="width: 160px; height: 200px;" width="160" /></a></span></td>
Take a look at "data-imagelibrary". This is URL encoded information about the image that is supposed to be used. data-imagelibrary:
%7B%22width%22%3A%22160%22%2C%22height%22%3A%22200%22%2C%22alt_text%22%3A%22%7B%7B%20uc%5B2%5D%5B%27uniqueSymbol%27%5D%20%7D%7D%20-%20%7B%7B%20uc%5B2%5D%5B%27name%27%5D%20%7D%7D%22%2C%22alignment%22%3A%22center%22%2C%22border%22%3A0%2C%22src%22%3A%22http%3A//cdn.fakewebsite.st/image/%7B%7B%20uc%5B2%5D%5B%27uniqueSymbol%27%5D%7Creplace%28%7B%27%3A%27%3A%20%27-%27%7D%29%20%7D%7D.png%22%2C%22classes%22%3A%7B%22sg-image%22%3A1%7D%7D
data-imagelibrary decoded:
{"width":"160","height":"200","alt_text":" - ","alignment":"center","border":0,"src":"http://cdn.fakewebsite.st/image/{{ uc[2]['uniqueSymbol']|replace({':': '-'}) }}.png","classes":{"sg-image":1}}
You can make changes to this data and then re-encode:
{"width":"160","height":"200","alt_text":" - ","alignment":"center","border":0,"src":"http://cdn.fakewebsite.st/image/{{ hc[2]['uniqueSymbol']|replace({':': '-'}) }}.png","classes":{"sg-image":1}}
Re-encoded:
%7B%22width%22%3A%22160%22%2C%22height%22%3A%22200%22%2C%22alt_text%22%3A%22%7B%7B%20hc%5B2%5D%5B%27uniqueSymbol%27%5D%20%7D%7D%20-%20%7B%7B%20hc%5B2%5D%5B%27name%27%5D%20%7D%7D%22%2C%22alignment%22%3A%22center%22%2C%22border%22%3A0%2C%22src%22%3A%22http%3A%2F%2Fcdn.fakewebsite.st%2Fimage%2F%7B%7B%20hc%5B2%5D%5B%27uniqueSymbol%27%5D%7Creplace(%7B%27%3A%27%3A%20%27-%27%7D)%20%7D%7D.png%22%2C%22classes%22%3A%7B%22sg-image%22%3A1%7D%7D
You can put the URL encoded information back into the HTML and it should change the code. Let me know if this is helpful.
SendGrid Support
140
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
