Background Image New Email Editor

[kenmckown]

I am working on a new template, and I have run into an issue. I want to create a 2x2 section in the template, but when I set the background image, it spans the whole page. I just want it behind the two columns, not the whole page. Here is what it looks like.

I can't see a way to make the background image just behind the two columns. I tried all the background size images.

[Dave_Roberts]

@kenmckown - unfortunately this looks like the expected outcome for the background image tool, maybe it's just another thing that got overlooked in the new editor 😕 

Here's a look at the code-view for some context of what's happening under the hood:

1) [BLUE] There's a blue outline around the "acr-structure" <div> which is the target container for the background image tool in the UI. Unfortunately, no matter what you do, this <div> runs the width of the page so setting a background image for the structure will always mean setting it for the entire row unless something changes in the UI.

2) [RED] There's a red outline around the "structure__table" <table> which IS actually set to the width of the email (in this case the default width of 750 -- which is too wide and a poor choice for a default, but that's another issue altogether). This should be the target for the background image controls to accomplish what you and most folks would be after here for adding a background image behind the two-columns rather than the entire row.

3) [GREEN] These are the columns inside the structure table -- just for reference.

Proposed Solution:

For anyone reading this who is thinking about how to fix it, it would be a matter of mapping the UI controls for background image (and maybe background color too while you're at it) to the <table class="structure__table"> rather than the <div class="acr-structure">. There should be a clear separation between the styling for the edge-to-edge background (acr-structure) than for the actually structure background (structure__table). To be clear, each one needs a set of controls.

Currently the "viewport" controls are correlated to the <table class="structure__table">, but that looks like it's only available for the Body element styling rather than for each of the Structures within the body. A simple fix might be to add the "Viewport" controls into each Structure element and extend those controls from just background color to also include the background image controls.  

[Sergio_Azevedo1]

Were you able to get this to work? I just tried using the editor today and I was able to get a bg image centered, but it required setting the width of the actual image to be the same as the email width (in this case 600px). The problem I'm facing now is getting it to work in Outlook. :-*(**

[Dave_Roberts]

I wouldn't count on this working in Outlook unless something changes with the UI - it's clearly not built with an understanding of how XML (conditional tables) can be used in the modern email landscape. There's a bunch of places that add conditional tables where they aren't needed and other places like the background image where the controls are just not mapped correctly to work in Outlook. The core issue with here is the codebase and the reliance on the Acrite editor (which seems to be <div> based) instead of actually building something useful for email (which has always been <table> based).  This architectural issue also shows itself in the template conversion tool b/c it'll throw your old (Email 2.0) templates into Compatibility Mode (which removes most of the tools in the editor 👎) unless the architecture matches (eg. no parent <table> around the entire email, and no <tr>s for modules or rows within the email) and it's not really best practice outside of this Acrite tool to create a layout using <div>s instead of <table>s. 

[Sergio_Azevedo1]

I don't believe you. There's just NO WAY Adobe would make such an oversight... /s

I was wondering if it would be worth playing with an html block and throwing in some vml in there, but, with no direct editing of the template html in this new version, I can't see how to add/update the xmlns tag in the head? Unless the html is exported, edited, and then exported back in? 

[Dave_Roberts]

hahaha, I learned today that "/s" means "sarcasm" -- something new everyday! 🙂

This is just the tip of the iceberg in terms of product oversights in the new repurposed Adobe Universal Editor tool for Marketo Email.

I think this could potentially be solved by importing code into the editor which was already setup correctly to accept the VML and "xmlns" tags but you've got to make sure you adhere to the "acr_" format for everything b/c the Import feature is also a piece of work and will kick you into "Compatibility Mode" (aka Half-Baked Mode) if you don't use their strict rules for formatting your email with different HTML structure and specific classes, etc. This means your EM2.0 emails will arrive in "Compatibility Mode" and basically anything you're doing today won't work in the new editor... if you can believe that too?!?

Another issue here to be aware of is how an approach like this needs to align with the rules of the UI. For example, I'm not sure that using this approach (even though it should work in terms of doing what it's supposed to) would communicate with the UI in a way that would let an end-user adjust the background image without needing to download the code, make changes and then upload the adjusted code as a new template. If the intention of the new designer is to move away from a reliance upon developers and code editing, this accomplishes exactly the opposite. This is one (of many, many, many) issues that center around making the new tool a "closed platform" instead of an "open platform" in the way that EM 2.0 is currently setup.

... now if we still had EM Variables that we could configure to solve for a case like this and easily enable the end-user to update background images in a complex module without actually needing to code, that would be pretty awesome. 

[Christiane_Rode]

Are you setting the background image on the structure (not the contents)? If you're setting it on the Structure, on the Styles tab, under the image source link, there should be a section for "Image Placement." Are you able to choose "center" for your placement? 

When I do that on my end, that's how I get the image to be centered on my email area instead of spanning the full width of the editor panel.

[kenmckown]

Yeah I set it to Centered, still spans the entire email page.

[Disha_Goyal6]

@kenmckown, I tried different methods but facing the same issue.

[Disha_Goyal6]

Hi @kenmckown, you can use HTML option to create this layout.

[Dave_Roberts]

... but then there is no UI feature to easily change the background image. The whole idea of this new tool is to move away from the reliance on coding and this approach (using HTML for everything) does exactly the opposite. While it might work in some cases -- maybe not exactly with background images in Outlook without a few other changes to the document as well, it still breaks the connection to the UI and puts the end-user in a place to need to edit code to make changes which is a worse experience than what is possible in EM2.0 where a variable could easily solve the issue without any concerns about the code becoming malformed. 

An email made up on a bunch of Custom HTML Components just feels like a nightmare situation - I'm not sure this is the right route in the interest of the end-user who isn't code savvy. But then again, for anyone who is email code savvy, this looks a lot like job security 😉