My template has a line that looks like this:
<img class="img_col img_col_1 mktoImg" ... src="https://www.MYSITE.com/IMAGE.png" mktoName="Img Content" id="imgContent1">
Which is fine and looks fine in the previews. However, when I create a new email based off this template it transforms the previous line into this:
<img class="img_col img_col_1 mktoImg img_col img_col_1 mktoImg" ... src="https://www.MYSITE.com/IMAGE.png" id="imgContent1" mktoname="Img Content" />
As you can see, it doubles the class names for the image, three become six. This happens without any modification to the email itself. Just created a new email, selected the template, checked the source code, and it's there. Naturally, these lines start throwing this error:
"You cannot use two mkto definitions in a single class"
Which makes sense, since the classes are doubled. I first noticed this bug because whenever I changed the image using the visual editor, any other change to text or button elements would cause strange blocks of text started popping up for no reason. These are impossible to remove and cause layout problems both in the previews and in the actual emails received.
Here's a short video of the issue manifesting itself: https://video.drift.com/v/ab17Js1JY06/. At the 2 minute mark, you can see how after modifying the images, the editing of the HREF for the buttons below the text causes these random undeleteable blocks to appear.
I know these two issues could be unrelated, but I don't thing it's coincidental. Editing the buttons and text without changing the images won't trigger the bug.
Any reason for this to happen? I can share the full code of the template if needed, but there's nothing special about it and the markup is correct, I checked it with an HTML tool.
I haven't seen anything like this before, but I normally stay away from the "mktoImg" class all together unless it's really needed to lock an image into the background or something.
1. You might try and use a "mktoText" area there instead since that seems to be working for the text and buttons and then use the Rich Text Editor's toolbar "Add/Edit Image" to get a similar interface for editing your images.
<div class="mktoText" id="Section1-Image1" mktoName="Sec1 Image #1">
<img src="http://www.fpoimg.com/300x300" alt="placeholder"/>
2. If you'd prefer to go the 'mktoImg' route, you might try using a parent div instead of applying it directly to the image. On the parent <div>, you can add the 'mktoImgClass' attribute and put the "img_col" and "img_col_1" classes in there instead of in the class="" attribute on the actual img element. Here's a link to add'l syntax for the 'mktoImg' widget:
The <div> approach might look something like this:
<div class="mktoImg" id="exampleImg" mktoName="Example Image" mktoImgLink="http://www.marketo.com" mktoImgClass="img_col img_col_1">
<a><img style="border:10px solid red;"></a>
*Note: the <img> is just a plain ol' image (optional inline CSS if you'd like). The class, link and target, etc can be set in the attributes on the parent div to pass to the <a> and <img> inside, rather than having that stuff on the inner elements (a, img).
Let me know if either of these work for you, I'd expect the first to be more fail-safe and the second to be a bit closer to what you've got setup now using the mktoImg class, but maybe more pieces to the puzzle there. Happy to help out more if this doesn't iron it out for you, lemme know what you run into next.
Thanks and good luck!