Cerberus
Cerberus copied to clipboard
TedGoas
Add new Hybrid component: "Background Image with Icon, Text, Button"
EoA tests can be viewed here:
https://app.emailonacid.com/shared-preview/Cu3JZIawpw
I find that this is a very useful component, and it's also a good "canary in the coal mine" if there are other HTML issues.
Happy to hear your thoughts and adjust further / port over to other templates when ready.
Hey just wanted to let you know I saw this but haven't gotten a chance to review or test!
Hey Marcel, thanks for the PR. I reviewed the test and the code looks pretty solid.
However this PR adds almost 200 lines of code that replicate what's already there. We already have patterns for type, buttons, and foreground content over a background image. This simply combines them in another way.
I do like you've built on the Background Image with Text pattern. I wonder if it makes sense to replace that pattern with yours, or integrate the two. So this way we still only have one pattern, but it's amore robust one.
What do you think?
I think that's a good idea -- to build out an existing component rather than add a new one. On the other hand, I have apprehensions about including a component with a background image at all. It will work just fine for many use cases, but once you start getting into the realm of email forwarding and Outlook, background images can be quite fragile and finicky. In my experience, having background image support is... Ambitious to say the least. No email builder that I'm aware of will ever give that option out of the box, probably because it's not bulletproof enough.
I really put this new component through the ringer with a recent round of testing, and if someone wants full email client support and no bugs, they are better off using a single image instead...
I'll defer to you on whether this component fits with the ethos of this repo.
@marcelgruber Sorry I've been sitting on this so long! I like your suggestions. I just pushed a few changes to simplify your code a bit, can you take a look and let me know what you think?
Test results: Link to EoA Test
Outlook seems to be having some issues as usual:
I believe this is the reason why I originally used spacers instead of padding on the <td>.
Since proposing this change, I have largely abandoned the use of any kind of VML shapes (aka background images for Outlook) due to the layout breaking when forwarding. However, when we get the issues ironed out of this, this change may still be valuable for some use cases.
Moved the padding decoration to fix Outlook, looks good on my end, can you confirm?
@marcelgruber Ping! Trying to revive this. Are you able to review the most recent code in this branch?