Support images in signatures editor

[grinich]

As reported in https://twitter.com/benlevermore/status/687665975634870272

[jamesaspence]

+1

[emlazo1]

+1

[emlazo1]

+1

[bengotow]

Hmm — I think we have a couple options here, and we should look at how other clients do it. We currently allow you to paste raw HTML in as your signature, which allows you to use img tags and images hosted on the web.

We could allow you to drag and drop an image into the signature editor, but then we'd need to attach it to the email and we don't currently support inline attachments.

@grinich what did you have in mind here?

[bengotow]

(Potentially blocked on #968)

[ghost]

Recently a copy-paste of an Email Signature (with Photo) from about.me stopped displaying an image. I looked at the pasted HTML and it missed the URL to the image. I think this is a bug, not an enhancement.

Here is the (organized) HTML that gets generated by Nylas, when I copy the (visual) signature from about.me and paste it into Nylas via the "live preview" (not live HTML). The image won't be displayed in Nylas, nor any other HTML viewer.

<div class="signature-container">
    <div>
        <table border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td style="width: auto; height: 20px; font-size: 0px;">
                         
                    </td>
                </tr>
                <tr>
                    <td style="width: auto;">
                        <div style="line-height: 0;">
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <td style="width: 107px; line-height: 1; vertical-align: top;" align="left" valign="top">
                                            <img style="display: block; width: 0; height: 0; overflow: hidden;" alt="--" width="0" height="0" />
                                            <div>
                                                <img style="margin: 0px; padding: 0px; display: block; border: 1px solid #eeeeee;" alt="" width="105" height="70" />
                                            </div>
                                        </td>
                                        <td style="width: 10px; font-size: 0px;">
                                             
                                        </td>
                                        <td style="width: auto; line-height: 1; padding-bottom: 3px; vertical-align: bottom;" align="left" valign="bottom">
                                            <div style="margin: 0; font-size: 18px; font-weight: bold; color: #333333; font-family: proxima-nova-1,Proxima-Nova, Helvetica, Arial, Sans-Serif;">
                                                Martin Páleník
                                            </div>
                                            <div style="margin: 0; margin-top: 1px; font-size: 12px; color: #2b82ad; font-family: proxima-nova-1,Proxima-Nova, Helvetica, Arial, Sans-Serif;">
                                                <img style="display: block; width: 0; height: 0; overflow: hidden;" alt="https://" width="0" height="0" />
                                                about.me/slovenskyweb
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td style="width: auto; height: 20px; font-size: 0px;">
                        <img style="margin: 0px; padding: 0px; overflow: hidden;" alt="" width="1" height="1" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

And here is the (organized) HTML of the signature, that gets generated, when I copy the same (visual) signature from about.me and paste it (visually) into the Online HTML Editor. Here, the image is shown correctly and you can see the URL of the image is inserted as well.

<div class="signature-container">
    <div>
        <table border="0" cellspacing="0" cellpadding="0">
            <tbody>
                <tr>
                    <td>
                         
                    </td>
                </tr>
                <tr>
                    <td>
                        <div>
                            <table border="0" cellspacing="0" cellpadding="0">
                                <tbody>
                                    <tr>
                                        <td align="left" valign="top">
                                            <img alt="--" width="0" height="0" />
                                            <div>
                                                <img src="https://thumbs.about.me/thumbnail/users/s/l/o/slovenskyweb_emailsig.jpg?_1454630413_62" alt="" width="105" height="70" />
                                            </div>
                                        </td>
                                        <td>
                                             
                                        </td>
                                        <td align="left" valign="bottom">
                                            <div>
                                                Martin Páleník
                                            </div>
                                            <div>
                                                <img alt="https://" width="0" height="0" />
                                                about.me/slovenskyweb
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td>
                        <img src="https://about.me/t/sig?u=slovenskyweb" alt="" width="1" height="1" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

The signature copied from about.me into Gmail/Inbox works. I got the feeling that Nylas signature worked before as well, but I might be using Gmail/Inbox so I'm not sure.

I am using the latest updated Fedora 24 Workstation, which I installed yesterday, and Nylas, which has also been installed yesterday directly from the website, that is Nylas version 0.4.45-7637265.

[jackiehluo]

Another request: https://nylas.zendesk.com/agent/tickets/5406

[mgohashi]

+1

[hallamoore]

Another request: https://nylas.zendesk.com/agent/tickets/5887

[robjac]

+1

[sysfu]

Hey all you 'tards giving the '+1' responses; there's a thumbs up button on the original post. Use that for its intended purpose please and quit spamming our inboxes yer junk 'me too' comments.

[robjac]

for sysfu...

+1

Just unsub? The thumbs up feature is only available on desktop.

[sachinag-zz]

Another request: https://nylas.zendesk.com/agent/tickets/7124

[AlexDunmow]

It's been a while since this ticket was opened. Is there an ETA?

It's hard to swallow that I'm paying for an email client that doesn't support images in signatures.

[GM-Polyakov]

Another request (from me).

[toshitapandey]

Is this fixed yet?

[Sadsurfer]

Still not fixed, currently not going Pro because if this is the level of support and features then not sure I want to buy $12 a month for something that ignores the simple stuff. Get the basics right guys then worry about all the other nice things - I get Enterprise is probably where you make your money but (I am guessing) there is not a single company who does not put images in their signatures and expecting users to edit HTML and host an image is unrealistic

[AlexDunmow]

Cancelled my subscription due to this issue.

[akamud]

Stopped using because of this.

[ursoforte]

Bybrand generates beautiful signatures in pure HTML, and can place in the signature area on Nylas. Easy. You will not need to modify the email client, at least i think

[multivac61]

As far as I can tell having images embedded in e-mail signatures is already supported. Simply edit the raw HTML to include a img tag with your favorite image.

Say for example that I would like to include a .png image of the following URL https://i.imgur.com/d7MTabz.png. Then the raw HTML is

<img src="https://i.imgur.com/d7MTabz.png">

et voilà! you now have successfully placed an image in your e-mail signature. The caveat is that you have to host the image yourself, which is no biggy.

[AlexDunmow]

The caveat is that 90% of email clients will block the image, because it's an external URL not an embedded image. Which is a biggy.

Nylas just needs to support inline images in its signatures. This is a pretty common feature that email clients have done for a very very long time. It may not be sexy, but it's necessary.