Editable, responsive images and Gmail app

I found a similar post about my issue here, but I wanted to throw the question out there again just in case a solution has been found. https://www.campaignmonitor.com/forums/topic/8305/editable-img-height-auto-broken-in-gmail/

This involves uploading an image to an editable template. The issue is that the gmail app changes 'height:auto;' to 'min-height:auto'. So, if you have width:100% on the image (to make it behave responsively), it will scale as expected but the native height will remain intact resulting in a vertically stretched image if you add a new image.

Hardcoded images work fine because the height attribute is left off, however, CM will automatically inject the height on an uploaded image.

Basically, we need to find a work around for the gmail app's obnoxious behavior or have a way of disabling CM from automatically adding the height. I'm going to have a hard time explaining to a client that he/she just won't be able to add full width images to their responsive email template.

roshodgekiss roshodgekiss, 1 year ago

HI lowbelly, what a tricky situation to be in! Previously, we've "tricked" Gmail into not overwriting CSS by using !important in our CSS styles, for example: "height: auto !important;". Have you tried this?

We're between a rock and a hard place here - sadly, if you remove the height="" tag from images, Outlook 2003 will render these 'heightless' images at a height of around 700px until images are turned on within the email client. Keen to hear what decision you make on this!


Get in touch with us on Twitter: http://twitter.com/campaignmonitor
We're also on Facebook: http://facebook.com/campaignmonitor
lowbelly, 1 year ago

I just had to tell the client that the image would appear slightly vertically stretched in the gmail app. Or, we'd just have to export the template, hard code a new image and reupload it. It sounds like she's just not going to use a full width image which is a shame. 

I attended a webinar on responsive design with Litmus today and the speaker mentioned that the gmail app may begin supporting media queries this year (or not). Hopefully they fix the bug that converts height to min-height as well.

I'm a bit stuck on how to proceed in the future though with CM templates for my clients. Depending on my various client's audiences, maybe some email templates don't get the responsive treatment, at least until gmail cleans up its act.

Thanks for the great support.

nicolemerlin nicolemerlin, 1 year ago

Hey Ros! Hope you are well :)

Oh man, this is such a pity. I've just finished coding a template but now it looks like I can't do the editable fluid/hybrid images that I promised. I could cry.

Do you think there is any hope for changing this? I know Outlook.com also displays square empty image blocks with images off if you don't define a height, and of course that sucks. But I do wonder if it's worth having a better images-off experience for two clients at the expense of a good fluid or responsive experience for Gmail App users—who are only going to increase in number now that Android 5+ forces all users into the Gmail App.

In any case, should there be any file of +1s for this issue, please throw mine on :)

Thanks!

Edit for PS: If it were at all possible to have something similar to cm_dontconvertlink (like cm_dontconvertheight?) that would be AMAZING. Thanks, you guys!

Syfer, 1 year ago

Hi lowbelly,

I am shooting in the dark here but maybe you can try:

min-width:100%; max-width:100%; min-height:auto; max-height:auto; height:auto;

Logically this should fit an image at 100% width in the box and render height proportionality.

Oh and important tags work for gmail, maybe you can try that in the height: auto as well.

Cheers

ihendo ihendo, 11 months ago

I'm in the same boat as nicolemerlin. I've finished coding a fluid hybrid template for a client, and this one issue means I can't deliver the design I promised.

I've spent the better part of a day trying more and more obscure hacks to get around this issue on the Gmail end, but I haven't found anything that works.  (I had high hopes for the object-fit CSS property, but sadly Gmail strips that too.)

The client won't accept squashed images, and hardcoding images in templates isn't an option. So at the moment it looks like I'm going to have to fix the width of the email and disable the fluid design for Outlook.com, Gmail and Yahoo.

Can we please get an option to override the automatic height setting behaviour for images? nicolemerlin's suggestion for "cm_dontconvertheight" (or maybe"cm_dontsetheight") seems like a reasonable solution, and it fits with your existing overrides. Images already support the "cm_dontimportimage" directive, so you must already have conditional processing on image tags.

Thanks.

ihendo ihendo, 11 months ago

@Syfer Nice attempt, but I'm afraid that doesn't work. "auto" isn't a valid value for the max-height property, and Gmail rewrites all "height" properties as "min-height" properties. (Even if you add !important)

I did get a bit closer by setting the max-height of the image in "vw" units, (based on image height / width ratio) but it doesn't work in the Gmail web client and it means you have to use a hard coded image aspect ratio.

EvilJordan EvilJordan, 11 months ago

Found this thread with the same issue from two years ago: https://www.campaignmonitor.com/forums/post/28988/

I suspect, since it's that old, there is nothing CM can actually do to fix this.

In the meantime, what's the "solution," even if it's not ideal? Not to use full-width images? Not to use responsive images at all?


I am very fat.
StephenJ StephenJ, 9 months ago

After much experimentation, I think I may have a solution : )

I've written more in my blog post here, but basically by using an attribute selector to define your responsive image CSS:

* [title="gmail-fix"] {
width: 100% ;
max-width: 600px ;
height: auto;
}

Along with your CM template tag:

<img editable src="my-image.jpg" alt="responsive image" width="600" title="gmail-fix">

This should ensure your editable images are resized proportionally in the Gmail app, even if they have a fixed height applied to them : )

Give it a try and let me know how you go!

lukeh, 4 months ago
ihendo :

I did get a bit closer by setting the max-height of the image in "vw" units, (based on image height / width ratio) but it doesn't work in the Gmail web client and it means you have to use a hard coded image aspect ratio.

Thanks @ihendo, max-height in "vw" is working well enough for me. I think it makes my project passable as all of my "editable" images are banners and the same aspect ratio.

mikeblack, 1 month ago

I have been wrestling with this same issue for the last couple of days. This is really frustrating, Gmail is such a widely used app at this point, are we really holding back responsive emails on gmail to continue to support Outook 2003?

It should be in the hands of the template builders to determine if we want to set these properties or not on editable images. Let us test and decide what works best for our needs.

I'm developing an template for a client that's going almost exclusively to mobile devices and there's no good solution here. Since the height on editable images in templates are a requirement imposed on us by CM, we may have to move our list elsewhere that gives us that control.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098