How can I maintain image class when using mc:edit in a MailChimp template?

Question

I'm trying to create a MailChimp template where an image is editable using mc:edit

Here's the code:

<img class="flexibleImage" mc:edit="top_image">

This seems all good, but once I edit this image using the MailChimp editor, I lose the original class "flexibleImage" and all other class and style info related to that img element.

How can I create a template with an editable image and maintain (or add) that class?

Answer 1

For anyone else with the problme, this answer is based on a response from MailChimp support:

It looks like it isn't possible to keep a custom class attached to an editable image. What you could do instead though is apply the class to the image's containing element. So if the image is in a <div>, add flexibleImage to the div, and then update your CSS rules to point to .flexibleImage>img.

Answer 2

This happens because the image you want to edit is inside an mc:repeatable block that in turn is inside another mc:repeatable block

Answer 3

Even four years later this is still an issue.

The other route is to put mc:edit on the parent container, and have images managed through there, but you lose the Image uploader box, which is poor user experience.

You can go into Settings when you have uploaded a new image and put the sizes in there. Not ideal, but Mailchimp is to blame here (no such issue on Campaign Monitor templates).