Add image in Signature using Gmail send email action

Very cool! 😃🙌 Note that images in both Google Drive and Dropbox (and other cloud storage systems) can be made public, so you can use any cloud storage system that you would like for this.

Been looking for a way to do this for years now. However, my image is not loading.

Do you have any idea what could be?

Hey @giulia_mg, 

Where do you store your image and what type of the file is it? 

Thanks

Hey Dimitris!

I've stored in on cloudinary as a png file.

Hey @giulia_mg, 

You need to use the public url for the asset. Here is the guide from cloudinary. To test if the url is public, you  can copy the url from the asset and past it on an incognito browser and see if this search returns the image, if it returns then you have the right url 🙂 

In case it doesn't work please post here and it would be pleasure to check case 🙂 

Thanks

Hey @Dimitris_Goudis 

So, I checked and my email signature is public on cloudinary, but still not working.
This is how I'm writting on Airtable automation:

</td><td width=96 valign=top>

<div class=t102 style="display:inline-table;text-align:initial;vertical-align:inherit;width:48.97959%;max-width:96px;">

<table role=presentation width=100% cellpadding=0 cellspacing=0 class=t104><tr>

<td class=t105><div style="font-size:0px;"><img class=t106 style="display:block;border:0;height:auto;width:15%;Margin:0;max-width:25%;" width={image_width} height={image_height} src={https://res.cloudinary.com/duqasmcuv/image/upload/v1684946215/Central_de_Pedidos_gxqpwm.png}></div></td>

Also, not so sure of which height and width would be the best fit...Any sugestion?

Thanks!!!

Dimitris, this worked great!!
Thank you soo much for all your help!

@Dimitris_Goudis is there a way to link the signature photo? Would like to link the image to my website if possible. 

Hey @Cristina_Garcia, 

thanks for your message. This is very nice idea. Yea you can do it you just need to update the html code by adding the tag with the redirection link and will work. 🙂 

Yours sincerely, 
Dimitris Goudis

What would be the formula to link the photo of the signature?

Hi @Dimitris_Goudis !! 

Thank you for the code! I tried using it but the image doesn't appear. I have my signature image in Google Drive but made public (tried it on incognito window). When I try running it this is what appears instead of the image:

This is how I put the code:

</td><td width=96 valign=top>

<div class=t102 style="display:inline-table;text-align:initial;vertical-align:inherit;width:48.97959%;max-width:96px;">

<table role=presentation width=100% cellpadding=0 cellspacing=0 class=t104><tr>

<td class=t105><div style="font-size:0px;"><img class=t106 style="display:block;border:0;height:auto;width:15%;Margin:0;max-width:25%;" width=100% height=100% src=https://drive.google.com/file/d/1N7R1ivK4qMupA1N-1Ep-YGul81s54LFB/view?usp=sharing></div></td>

Hey @Arturo_Hinojosa, 

Thanks for your reply! the image source should be in a public url while the google drive's urls are not public. To test it try to open the images url from an incognito window, if the image appears then you can use this link in your code. 

Yours sincerely, 
Dimitris Goudis

Hey @Cristina_Garcia, 

You have to add the href tag before the img tag in code. Please check the instructions from here. 

If you have troubles again please feel free to DM me 🙂 

Yours sincerely,
Dimitris Goudis 

Hello, 

I'm wondering if publishing the signature via Canva will work? It appears it is not for me but i'm wondering if I am doing it wrong. This is how it shows in the bottom of my email when I test it: 

This is what I am using as the code in the automation:

</td><td width=96 valign=top>

<div class=t102 style="display:inline-table;text-align:initial;vertical-align:inherit;width:48.97959%;max-width:96px;">

<table role=presentation width=100% cellpadding=0 cellspacing=0 class=t104><tr>

<td class=t105><div style="font-size:0px;"><img class=t106 style="display:block;border:0;height:auto;width:15%;Margin:0;max-width:25%;" width={image_width} height={image_height} src=https://www.canva.com/design/DAFujmo-9s4/view></div></td> 

Here is another variation I tried filling in the length and height and all it did was leave an empty space at the bottom of the email:

</td><td width=96 valign=top>

<div class=t102 style="display:inline-table;text-align:initial;vertical-align:inherit;width:48.97959%;max-width:96px;">

<table role=presentation width=100% cellpadding=0 cellspacing=0 class=t104><tr>

<td class=t105><div style="font-size:0px;"><img class=t106 style="display:block;border:0;height:auto;width:15%;Margin:0;max-width:25%;" width=90 height=90 src=https://www.canva.com/design/DAFujmo-9s4/view></div></td>

Thank you 

Hi 

I just have a question regarding this code. We created our signature using WiseStamp, when we pull it uo it doesn't seem to give us a URL but it does give us a HTML code but when we drop this into airtable it partially works, some images and words do not show up. Would you know anything about WiseStamp signatures?

I just have a question regarding this code. We created our signature using WiseStamp; when we pull it up, it doesn't seem to give us a URL, but it does give us an HTML code. But when we drop this into airtable it partially works; some images and words do not show up. Does anyone know anything about WiseStamp signatures?

Hey @JMANHOMES, 
I am not sure is canva link are public but you can give it a trial and share your feedback 😎

Hey @antoninaschimdy, 

Not sure what's going on, are your images stores on a public url? 

Thanks 

Is amazon photos public? that is where they are currently stored

I actually was able to get it working, but for some reason no matter which Height and width size I input it shows up small. see attached photos. I have tried variations of sizes from 400x100 to 16000x4000 and the size of the signature has not changed.

I believe canva can make the links public? they give you and embed code or a smart link code to use which is only provided if it is live. 

Hey @antoninaschimdy,

This because of the table's dimensions in the code. I think in your case it would work better to add simply the html image tag and add there the dimensions that refer on the image asset. 

Thanks 

Hi Dimitris, this is amazing. One question, where in the html code that I can change the height of the space between the image and my signature(text)? Thank you!

Hey @Jessie31, 

Thanks for your reply! As soon as in this piece of code the text is out of the html element table there is no specific place to update the line high. You have the following options here and hope one of them work for you: 

- You can include the signature text in your html part and add the high settings
- You can use shift enter and not simple enter to add a new line, this will create move to the next line but it will not create a new section in you text 

Do those options make sense for you? 

Thanks.

Yours sincerely,
Dimitris Goudis